/* ===================================================================
   EXPLORE � mobile scrolly v2 (html.x-native.x-scrolly)
   Timing is driven by NAMED VIEW TIMELINES on the visible blocks
   (.xm-hero / .xm-feat / .xm-stage), NOT the oversized section box �
   that was causing beats to fire off-screen with huge dead gaps.
   Disable: ?scrolly=0
   =================================================================== */

@media (max-width: 1024px) {
  @supports (animation-timeline: view()) {
    /* Natural document flow � no vertical centering in a 178svh void. */
    html.x-native.x-scrolly .xm-hero {
      min-height: auto;
      padding-bottom: clamp(48px, 12vw, 80px);
    }
    html.x-native.x-scrolly .xm-feat {
      min-height: auto;
      scroll-snap-align: start;
      padding-top: clamp(28px, 7vw, 48px);
      padding-bottom: clamp(56px, 14vw, 96px);
    }

    /* ---- View timelines (one clock per visible block) ---- */
    html.x-native.x-scrolly .xm-hero {
      view-timeline-name: --xm-hero;
      view-timeline-axis: block;
    }
    html.x-native.x-scrolly .xm-feat {
      view-timeline-name: --xm-feat;
      view-timeline-axis: block;
    }
    html.x-native.x-scrolly .xm-stage {
      view-timeline-name: --xm-stage;
      view-timeline-axis: block;
      /* Shrink the active window so 0�100% maps to "on screen", not edges. */
      view-timeline-inset: 8% 12%;
    }

    html.x-native.x-scrolly .xm-feat .xm-title,
    html.x-native.x-scrolly .xm-feat .xm-sub,
    html.x-native.x-scrolly .xm-feat .xm-props {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* ---- Copy (feat sections): tied to --xm-feat ---- */
    html.x-native.x-scrolly .xm-feat .xm-title {
      animation: xm-scrolly-copy-in linear both, xm-scrolly-copy-out linear both;
      animation-timeline: --xm-feat, --xm-feat;
      animation-range: entry 0% cover 22%, exit 68% exit 92%;
      will-change: transform, opacity;
    }
    html.x-native.x-scrolly .xm-feat .xm-sub {
      animation: xm-scrolly-copy-in linear both, xm-scrolly-copy-out linear both;
      animation-timeline: --xm-feat, --xm-feat;
      animation-range: cover 18% cover 36%, exit 72% exit 94%;
      will-change: transform, opacity;
    }

    /* ---- Hero copy + phone: tied to --xm-hero ---- */
    html.x-native.x-scrolly .xm-hero .xm-title,
    html.x-native.x-scrolly .xm-hero .xm-sub,
    html.x-native.x-scrolly .xm-hero .xm-cta {
      animation: xm-scrolly-copy-in linear both, xm-scrolly-copy-out linear both;
      animation-timeline: --xm-hero, --xm-hero;
      animation-range: entry 0% cover 18%, exit 72% exit 92%;
      will-change: transform, opacity;
    }
    html.x-native.x-scrolly .xm-hero .xm-sub {
      animation-range: cover 6% cover 24%, exit 74% exit 94%;
    }
    html.x-native.x-scrolly .xm-hero .xm-cta {
      animation-range: cover 10% cover 28%, exit 70% exit 90%;
    }
    html.x-native.x-scrolly .xm-phone--hero {
      animation: xm-scrolly-phone-hero-in linear both, xm-scrolly-phone-hero-out linear both;
      animation-timeline: --xm-hero, --xm-hero;
      animation-range: entry 0% cover 32%, exit 65% exit 95%;
      transform-origin: center top;
      will-change: transform;
    }

    /* ---- Feature phone: tied to --xm-stage (when phone is on screen) ---- */
    html.x-native.x-scrolly .xm-stage .xm-phone {
      animation: xm-scrolly-phone-in linear both, xm-scrolly-phone-out linear both;
      animation-timeline: --xm-stage, --xm-stage;
      animation-range: entry 0% cover 28%, exit 62% exit 100%;
      transform-origin: center bottom;
      will-change: transform;
    }

    /* ---- Props: tied to --xm-stage, light stagger ---- */
    html.x-native.x-scrolly .xm-floats .xic {
      animation: xm-scrolly-prop-in linear both, xm-scrolly-prop-out linear both;
      animation-timeline: --xm-hero, --xm-hero;
      animation-range: entry 0% cover 28%, exit 68% exit 94%;
      will-change: transform, opacity;
    }
    html.x-native.x-scrolly .xm-floats .xic:nth-child(odd) {
      animation-range: cover 4% cover 30%, exit 66% exit 92%;
    }
    html.x-native.x-scrolly .xm-floats .xic:nth-child(3n) {
      animation-range: cover 8% cover 34%, exit 64% exit 90%;
    }
    html.x-native.x-scrolly .xm-props .xic {
      animation: xm-scrolly-prop-in linear both, xm-scrolly-prop-out linear both;
      animation-timeline: --xm-stage, --xm-stage;
      animation-range: entry 0% cover 26%, exit 64% exit 92%;
      will-change: transform, opacity;
    }
    html.x-native.x-scrolly .xm-props .xic:nth-child(2) {
      animation-range: cover 4% cover 28%, exit 66% exit 90%;
    }
    html.x-native.x-scrolly .xm-props .xic:nth-child(3) {
      animation-range: cover 8% cover 32%, exit 62% exit 88%;
    }
    html.x-native.x-scrolly .xm-props .xic:nth-child(4) {
      animation-range: cover 2% cover 24%, exit 68% exit 92%;
    }

    /* =============================================================
       WIN IT ALL BACK � one continuous beat on --xm-stage
       0�28% scroll list | 26�48% tray in | 50�72% tray out
       ============================================================= */
    html.x-native.x-scrolly [data-scene="win-back"] .xpurch__scroll img {
      animation: xm-scrolly-purch-scroll linear both;
      animation-timeline: --xm-stage;
      animation-range: entry 0% cover 32%;
      will-change: transform;
    }
    html.x-native.x-scrolly [data-scene="win-back"] .xpurch__chrome--bot {
      animation: xm-scrolly-chrome-fade linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 22% cover 32%;
    }
    html.x-native.x-scrolly [data-scene="win-back"] .xscrim {
      animation: xm-scrolly-scrim-pulse linear both, xm-scrolly-scrim-out linear both;
      animation-timeline: --xm-stage, --xm-stage;
      animation-range: cover 28% cover 44%, cover 48% cover 68%;
      will-change: opacity;
    }
    html.x-native.x-scrolly [data-scene="win-back"] .xtray {
      animation: xm-scrolly-tray-in linear both, xm-scrolly-tray-out linear both;
      animation-timeline: --xm-stage, --xm-stage;
      animation-range: cover 26% cover 46%, cover 50% cover 72%;
      transform-origin: center bottom;
      will-change: transform, opacity;
    }

    /* =============================================================
       PRIZES � PS5 + confetti on --xm-stage
       ============================================================= */
    html.x-native.x-scrolly [data-scene="prizes"] .xprize-zone {
      animation: xm-scrolly-prize-in linear both, xm-scrolly-prize-out linear both;
      animation-timeline: --xm-stage, --xm-stage;
      animation-range: cover 20% cover 42%, cover 48% cover 68%;
      transform-origin: center center;
      will-change: transform, opacity;
    }
    html.x-native.x-scrolly [data-scene="prizes"] .xprize__ps5 {
      animation: xm-scrolly-prize-ps5-float linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 28% cover 52%;
      will-change: transform;
    }
    html.x-native.x-scrolly [data-scene="prizes"] .xprize__logo {
      animation: xm-scrolly-prize-logo-float linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 30% cover 54%;
      will-change: transform;
    }
    html.x-native.x-scrolly [data-scene="prizes"] .xconfetti--mobile {
      animation: xm-scrolly-confetti-pulse linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 32% cover 56%;
      will-change: opacity;
    }

    /* =============================================================
       SPORTS � rise then swipe on --xm-stage
       ============================================================= */
    html.x-native.x-scrolly [data-scene="sports"] .xpick {
      animation: xm-scrolly-pick-rise linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 18% cover 38%;
      transform-origin: center center;
      will-change: transform, opacity;
    }
    html.x-native.x-scrolly [data-scene="sports"] .xpick__media--front {
      animation: xm-scrolly-pick-front-swipe linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 36% cover 58%;
      will-change: transform;
    }
    html.x-native.x-scrolly [data-scene="sports"] .xpick__media--back {
      animation: xm-scrolly-pick-back-swipe linear both;
      animation-timeline: --xm-stage;
      animation-range: cover 36% cover 58%;
      will-change: transform;
    }
  }
}

/* ---- Keyframes ---- */
@keyframes xm-scrolly-copy-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes xm-scrolly-copy-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-16px); }
}

@keyframes xm-scrolly-phone-in {
  from { transform: translateY(40px) scale(0.88); }
  to   { transform: translateY(0) scale(1); }
}
@keyframes xm-scrolly-phone-out {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-20px) scale(0.94); }
}
@keyframes xm-scrolly-phone-hero-in {
  from { transform: scale(0.94); }
  to   { transform: scale(1); }
}
@keyframes xm-scrolly-phone-hero-out {
  from { transform: scale(1); }
  to   { transform: scale(0.92) translateY(-16px); }
}

@keyframes xm-scrolly-prop-in {
  from {
    transform: translate(calc((var(--cx) - 0.5) * 48px), calc((var(--cy) - 0.5) * 48px))
               scale(0.8) rotate(calc(var(--rot, 0deg) * 0.8));
    opacity: 0;
  }
  to { transform: none; opacity: 1; }
}
@keyframes xm-scrolly-prop-out {
  from { transform: none; opacity: 1; }
  to {
    transform: translate(calc((var(--cx) - 0.5) * -32px), calc((var(--cy) - 0.5) * -32px))
               scale(0.85) rotate(calc(var(--rot, 0deg) * 1.05));
    opacity: 0;
  }
}

@keyframes xm-scrolly-purch-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -44%, 0); }
}
@keyframes xm-scrolly-chrome-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes xm-scrolly-scrim-pulse {
  from { opacity: 0; }
  to   { opacity: 0.45; }
}
@keyframes xm-scrolly-scrim-out {
  from { opacity: 0.45; }
  to   { opacity: 0; }
}
@keyframes xm-scrolly-tray-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12%) scale(0.24);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.02);
  }
}
@keyframes xm-scrolly-tray-out {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.02);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-12%) scale(0.86);
  }
}

@keyframes xm-scrolly-prize-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes xm-scrolly-prize-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97) translateY(-8px); }
}
@keyframes xm-scrolly-prize-ps5-float {
  from { transform: translateY(8px); }
  to   { transform: translateY(-6px); }
}
@keyframes xm-scrolly-prize-logo-float {
  from { transform: translateY(6px); }
  to   { transform: translateY(-4px); }
}
@keyframes xm-scrolly-confetti-pulse {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes xm-scrolly-pick-rise {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(14px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}
@keyframes xm-scrolly-pick-front-swipe {
  from { transform: translateX(0) rotate(0deg); }
  to   { transform: translateX(13%) rotate(8deg); }
}
@keyframes xm-scrolly-pick-back-swipe {
  from { transform: translateX(0) rotate(0deg) scale(0.9); }
  to   { transform: translateX(-8%) rotate(-5deg) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  html.x-native.x-scrolly .xm-title,
  html.x-native.x-scrolly .xm-sub,
  html.x-native.x-scrolly .xm-cta,
  html.x-native.x-scrolly .xm-props,
  html.x-native.x-scrolly .xm-floats,
  html.x-native.x-scrolly .xm-phone,
  html.x-native.x-scrolly .xm-floats .xic,
  html.x-native.x-scrolly .xm-props .xic,
  html.x-native.x-scrolly .xpurch__scroll img,
  html.x-native.x-scrolly .xpurch__chrome--bot,
  html.x-native.x-scrolly .xscrim,
  html.x-native.x-scrolly .xtray,
  html.x-native.x-scrolly .xprize-zone,
  html.x-native.x-scrolly .xprize__ps5,
  html.x-native.x-scrolly .xprize__logo,
  html.x-native.x-scrolly .xconfetti--mobile,
  html.x-native.x-scrolly .xpick,
  html.x-native.x-scrolly .xpick__media--front,
  html.x-native.x-scrolly .xpick__media--back {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html.x-native.x-scrolly .xtray {
    transform: translateX(-50%) !important;
  }
  html.x-native.x-scrolly .xpick {
    transform: translate(-50%, -50%) !important;
  }
  html.x-native.x-scrolly .xpick__media--front {
    transform: translateX(13%) rotate(8deg) !important;
  }
  html.x-native.x-scrolly .xpick__media--back {
    transform: translateX(-8%) rotate(-5deg) scale(0.95) !important;
  }
}