/* ============================================================
   CHAOS AGENCY — Animation CSS
   Animation-specific styles only.
   Keyframes, transition classes, scroll-reveal states,
   and GPU-accelerated transforms for GSAP-driven animations.
   See chaos-animations.md for full animation specifications.
   ============================================================ */


/* ============================================================
   1. CUSTOM CURSOR — Desktop Only
   Reference: chaos-animations.md section 9

   Three elements compose the custom cursor:
   - .custom-cursor: 32px red ring, follows mouse with 0.5s lag
   - .custom-cursor-dot: 4px red dot, follows mouse near-instantly
   - .cursor-label: "VIEW" text shown inside the ring on work tiles

   The ring expands (scale 3) and fills red on work tile hover.
   The ring shrinks (scale 0.5) on links and buttons.
   Default browser cursor is hidden on desktop via cursor: none.
   ============================================================ */

/* Hide default cursor on desktop — custom cursor replaces it */
@media (min-width: 769px) {
  *,
  *::before,
  *::after {
    cursor: none !important;
  }
}

/* Outer ring — red border circle by default. JS adds .cursor-on-red
   when hovering over red background sections, switching to white.
   Width/height are animated (not scale) to avoid pixelation
   when the ring expands on work tile hover. */
.custom-cursor {
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-red);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;          /* Never intercept clicks */
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.3s ease, border-color 0.2s ease, width 0.3s cubic-bezier(0.25,1,0.5,1), height 0.3s cubic-bezier(0.25,1,0.5,1);
}

/* On red backgrounds — ring switches to white.
   !important overrides GSAP inline styles on the border. */
.custom-cursor.cursor-on-red {
  border-color: #FFFFFF !important;
}

/* Small red dot — centred inside ring via flexbox.
   No independent positioning needed — it's a child of .custom-cursor. */
.custom-cursor-dot {
  width: 4px;
  height: 4px;
  background: var(--color-red);
  border-radius: 50%;
  pointer-events: none;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* On red backgrounds — dot switches to white */
.custom-cursor-dot.cursor-on-red {
  background: #FFFFFF;
}

/* "VIEW" label shown inside the ring when hovering work tiles.
   Font-size is set for the expanded 96px ring — no scale needed,
   so text stays crisp at any display density. */
.cursor-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
}

/* Hide custom cursor on mobile/tablet — it's not injected,
   but this ensures no ghost element if viewport changes */
@media (max-width: 768px) {
  .custom-cursor,
  .custom-cursor-dot {
    display: none !important;
  }
}


/* ============================================================
   2. GPU ACCELERATION — Frequently Animated Elements
   Reference: chaos-animations.md section 14

   will-change and translateZ(0) promote these elements to
   their own compositor layer for smoother animation.
   ============================================================ */

.hero-float-card,
.work-tile,
.custom-cursor {
  will-change: transform;
  transform: translateZ(0);
}

/* Note: .menu-panel is NOT included above because it relies on
   transform: translateX(100%) in components.css to stay hidden.
   Overriding that with translateZ(0) would make it visible on load. */