/* ==========================================================================
   V3 Game — Chrome Mirage
   assets/css/motion.css
   Keyframes · reveal & stagger · specular sweep · reduced-motion block
   Only transform / opacity / clip-path / background-position are animated.
   ========================================================================== */

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Slow idle sheen on the primary CTA — background-position only */
@keyframes idle-sheen {
  0%, 72%  { background-position: 0% 50%; }
  86%      { background-position: 55% 50%; }
  100%     { background-position: 0% 50%; }
}

/* One-shot specular pass across a plate */
@keyframes sweep-once {
  from { background-position: 130% 50%; }
  to   { background-position: -70% 50%; }
}

/* Continuous specular band travelling across the testimonial row */
@keyframes sweep-travel {
  from { transform: translate3d(-30%, 0, 0); }
  to   { transform: translate3d(430%, 0, 0); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

@keyframes drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Crisp badge pop — no bounce past the target */
@keyframes badge-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes rail-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Reveal system ───────────────────────────────────────────────────────────
   Elements rise 20px and fade over 520ms, staggering by --i. A specular band
   passes across the plate once as it lands.                                  */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity   var(--dur-reveal) var(--ease-seat),
    transform var(--dur-reveal) var(--ease-seat);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

/* The landing sweep. Sits above the plate face, below its content. */
.reveal-sweep { position: relative; }
.reveal-sweep > .sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--specular);
  background-size: 260% 100%;
  background-position: 130% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
}
.reveal-sweep.is-revealed > .sweep {
  animation: sweep-once 820ms var(--ease-seat) both;
  animation-delay: calc(var(--i, 0) * 55ms + 160ms);
  opacity: 1;
}

/* Utility: run the sweep on hover of any plate */
.sweep-on-hover { position: relative; overflow: hidden; }
.sweep-on-hover > .sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--specular);
  background-size: 260% 100%;
  background-position: 130% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sweep-on-hover:hover > .sweep {
  background-position: -70% 50%;
  transition: background-position 520ms var(--ease-seat);
}

/* ── Counters ────────────────────────────────────────────────────────────── */
.counter { font-variant-numeric: tabular-nums; }

/* ── Odometer (countdown digits) ─────────────────────────────────────────── */
.odo {
  position: relative;
  display: flex;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--r-input);
  background-color: var(--groove);
  box-shadow: var(--bevel-in);
  overflow: hidden;
}
/* Housing shadow so digits appear to roll behind the plate edge */
.odo::before, .odo::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 34%;
  z-index: 2;
  pointer-events: none;
}
.odo::before { top: 0;    background: linear-gradient(to bottom, rgba(3,5,7,.92), transparent); }
.odo::after  { bottom: 0; background: linear-gradient(to top,    rgba(3,5,7,.92), transparent); }

.odo__col {
  position: relative;
  width: 1ch;
  height: var(--odo-h, 46px);
  overflow: hidden;
}
.odo__strip {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, calc(var(--d, 0) * var(--odo-h, 46px) * -1), 0);
  transition: transform 220ms var(--ease-roll);
  will-change: transform;
}
.odo__strip span {
  display: grid;
  place-items: center;
  height: var(--odo-h, 46px);
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  font-weight: 700;
  color: var(--chrome-hi);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Tilt ────────────────────────────────────────────────────────────────── */
.tilt-scene { perspective: 1200px; }
.tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform var(--dur-ui) var(--ease-seat);
}
.tilt.is-tilting { transition: none; }

/* ── FLIP ────────────────────────────────────────────────────────────────── */
.flip-move { transition: transform var(--dur-mid) var(--ease-seat); }
.flip-out {
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--dur-ui) var(--ease-seat),
              transform var(--dur-ui) var(--ease-seat);
}

/* ── Parallax layers ─────────────────────────────────────────────────────── */
.parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ── Infinite testimonial rail ───────────────────────────────────────────── */
.rail {
  position: relative;
  overflow: hidden;
  --mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}
.rail__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  padding-block: var(--sp-3);
  animation: rail-scroll 46s linear infinite;
}
.rail:hover .rail__track,
.rail:focus-within .rail__track { animation-play-state: paused; }
body.is-hidden .rail__track { animation-play-state: paused; }

/* The band that travels across the whole row, lighting each plate in turn */
.rail__sheen {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 26%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.05) 38%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.05) 62%,
    transparent 100%);
  animation: sweep-travel 9s var(--ease-seat) infinite;
}

/* ── will-change hygiene: only while a transition is actually running ────── */
.is-animating { will-change: transform, opacity; }

/* ==========================================================================
   REDUCED MOTION
   Everything decorative stops. Reveals resolve to their final state so no
   content is ever left invisible. Functional transforms (drawer, modal,
   toast, odometer) snap instead of sliding.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveals land immediately, fully visible */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-sweep > .sweep,
  .sweep-on-hover > .sweep,
  .rail__sheen,
  .modal__sweep,
  .btn__sheen { display: none !important; }

  /* Continuous loops off */
  .marquee__track,
  .rail__track { animation: none !important; transform: none !important; }
  .marquee__track { width: 100%; }
  .marquee__group:nth-child(2) { display: none; }
  .rail__track { width: 100%; flex-wrap: wrap; justify-content: center; }

  .btn-primary { animation: none !important; }
  .badge-live .pill-dot { animation: none !important; opacity: 1 !important; transform: none !important; }
  .toast.is-visible .toast__timer { animation: none !important; transform: scaleX(1); }

  /* Odometer: digits swap without rolling */
  .odo__strip { transition: none !important; }

  /* Parallax and tilt neutralised */
  .parallax { transform: none !important; }
  .tilt { transform: none !important; }

  /* Carousel keeps scroll-snap but drops smooth scrolling & scale steps */
  .carousel__slide { transform: none !important; }
  .carousel__slide img { opacity: 1 !important; }

  /* Card hover lift removed; hover still recolours so state stays legible */
  .card-hover:hover { transform: none !important; }
  .game-card { transform: none !important; }
  .game-card:hover { --ty: 0px; }
}