/* ============================================================
   CHAOS AGENCY — Mobile Overrides
   All rules wrapped in @media (max-width: 768px).
   Loaded after style.css so these rules win over desktop styles.
   Zero desktop impact by construction: every rule is inside the
   media query.
   Spec: docs/superpowers/specs/2026-04-22-mobile-optimization-design.md
   ============================================================ */

@media (max-width: 768px) {

  /* Phase 1: natural scroll foundation */

  /* Override scroll-hijack positioning — sections flow normally.
     The scroll-hijack class is not added on mobile (see js/mobile.js),
     but defend here too in case of race conditions. */
  html.scroll-hijack,
  html:not(.scroll-hijack) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }

  html.scroll-hijack body,
  body {
    overflow-y: visible !important;
    height: auto !important;
  }

  /* Sections stack naturally — remove position:fixed from scroll-hijack */
  .view-container {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: auto !important;
  }

  .view-container > section {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100vh;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    will-change: auto;
  }

  /* Inactive view fully hidden */
  .view-container:not(.view-active) {
    display: none !important;
  }

  /* ============================================================
     PHASE 1 HOTFIX: ORBITAL WORDS VISIBLE ON MOBILE
     Orbital reveal uses scroll-hijack to add .word-locked. With
     hijack disabled on mobile, words never show. Force visible.
     Phase 4 will add IntersectionObserver-driven stagger-in.
     ============================================================ */

  .orbital-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  /* ============================================================
     PHASE 1 HOTFIX: HERO TAP-OUTSIDE RELIABILITY
     When a card is expanded on mobile, dimmed cards are at 5%
     opacity (essentially invisible) but still sit above the
     overlay and catch taps. Disabling pointer-events on
     non-expanded cards makes "tap outside" reliably hit the
     overlay, which collapses the expanded card cleanly.
     ============================================================ */

  .hero-cards-space.has-expanded .hero-float-card:not(.card-expanded) {
    pointer-events: none;
  }

  /* ============================================================
     PHASE 1 HOTFIX: HERO EXPAND/COLLAPSE FLICKER
     Desktop uses filter: brightness() transitions on both dimmed
     cards and the expanded card — compositing these is expensive
     on mobile GPUs and causes visible flicker when combined with
     the GSAP width/height tween.

     Drop the filter (and its transition) on mobile. Dimmed cards
     stay at 5% opacity (visually identical to brightness(0.2)+5%
     opacity combined). Expanded card drops the brightness(1.1)
     tint — imperceptible on a phone screen.

     Also add will-change hints so the browser promotes these
     elements to their own composite layers during the transition,
     avoiding layer-promotion churn on animation start/end.
     ============================================================ */

  .hero-cards-space.has-expanded .hero-float-card {
    filter: none !important;
    transition: opacity 0.3s ease !important;  /* no filter transition */
    will-change: opacity;
  }

  .hero-cards-space.has-expanded .hero-float-card.card-expanded {
    filter: none !important;
    will-change: transform, opacity;
  }

  /* Reset will-change when not expanded so cards aren't unnecessarily
     promoted to layers during ambient drift (which would hurt battery). */
  .hero-float-card {
    will-change: auto;
  }

  /* ============================================================
     PHASE 1 HOTFIX: HERO CARD LOAD FLICKER
     The rAF loop in hero.js writes el.style.opacity every frame
     during the explode-in entrance (opacity 0 -> targetOpacity,
     driven by GSAP tweening a numeric progress value). Desktop
     style.css declares `transition: opacity 0.5s ease` on every
     card, which tries to interpolate between each rAF-set value
     over 500 ms. On desktop this is masked by a steady 60 Hz
     cadence, but on mobile the uneven frame rate causes the
     renderer to chase the JS target 150-280 ms behind and
     visibly stutter -- the "tube light switching on" flicker.

     Drop the opacity (and filter) transitions on mobile so the
     rAF-driven opacity is rendered directly. Keep the box-shadow
     transition so hover / state changes still animate smoothly.
     ============================================================ */

  .hero-float-card {
    transition: box-shadow 0.5s ease !important;
  }

}