/* ===
   Yono Game — "High Table"
   motion.css · keyframes, the deal-in reveal system, stagger helpers,
                chip-press / fan utilities, and reduced-motion handling.
   Only transform, opacity, clip-path and background-position are animated.
   === */

/* --- THE DEAL (reveal)
   Cards enter from a common off-screen stack origin — up and to the right —
   as if dealt onto the table. Children stagger through --i.
   --- */
[data-rv] {
  opacity: 0;
  transform: translate3d(40px, -28px, 0) rotate(-5deg);
  transition:
    opacity   var(--d-deal) var(--e-deal),
    transform var(--d-deal) var(--e-deal);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-rv="left"]  { transform: translate3d(-40px, -22px, 0) rotate(4deg); }
[data-rv="up"]    { transform: translate3d(0, 34px, 0) rotate(0deg); }
[data-rv="scale"] { transform: scale(.94) rotate(-2deg); }
[data-rv="fade"]  { transform: none; }

[data-rv].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg));
}

/* Stagger helper — set style="--i:N" on children of a dealt row. */
.stagger > * { --i: 0; }
.stagger > *:nth-child(1) { --i: 0; }
.stagger > *:nth-child(2) { --i: 1; }
.stagger > *:nth-child(3) { --i: 2; }
.stagger > *:nth-child(4) { --i: 3; }
.stagger > *:nth-child(5) { --i: 4; }
.stagger > *:nth-child(6) { --i: 5; }
.stagger > *:nth-child(7) { --i: 6; }
.stagger > *:nth-child(8) { --i: 7; }

/* will-change is applied only while a reveal is in flight (added and removed
   by motion.js) so it is never left on a resting element. */
.is-animating { will-change: transform, opacity; }

/* --- KEYFRAMES -- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* One crisp scale-pop on a chip badge. */
@keyframes chip-pop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* Draining gold rule along the base of the social-proof toast. */
@keyframes drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Live dot — slow teal pulse. The word "Live" is always in the markup too. */
@keyframes live-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
.chip-teal .chip-dot { animation: live-pulse 2s var(--e-out) infinite; }

/* Countdown deal-swap: outgoing digit slides down and out, incoming slides
   in from above with a 2deg rotate settling to 0. A new card replacing the
   last — not a flip, not an odometer roll. */
@keyframes digit-out {
  from { transform: translateY(0) rotate(0deg);    opacity: 1; }
  to   { transform: translateY(72%) rotate(-2deg); opacity: 0; }
}
@keyframes digit-in {
  from { transform: translateY(-72%) rotate(2deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0deg);    opacity: 1; }
}
.digit { position: relative; overflow: hidden; }
.digit .d-val { display: block; }
.digit .d-val.out { animation: digit-out 260ms var(--e-in) forwards; }
.digit .d-val.in  { animation: digit-in  260ms var(--e-deal) forwards; }

/* Drawer links deal in one at a time behind the panel. */
.drawer .d-link {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-deal);
}
.drawer.is-open .d-link { opacity: 1; transform: none; }
.drawer.is-open .d-link:nth-child(1) { transition-delay: 60ms; }
.drawer.is-open .d-link:nth-child(2) { transition-delay: 100ms; }
.drawer.is-open .d-link:nth-child(3) { transition-delay: 140ms; }
.drawer.is-open .d-link:nth-child(4) { transition-delay: 180ms; }
.drawer.is-open .d-link:nth-child(5) { transition-delay: 220ms; }
.drawer.is-open .d-link:nth-child(6) { transition-delay: 260ms; }
.drawer.is-open .d-link:nth-child(7) { transition-delay: 300ms; }
.drawer.is-open .d-link:nth-child(8) { transition-delay: 340ms; }

/* Games grid FLIP — filtered-out cards are swept from the table. */
.g-cell { transition: transform 380ms var(--e-deal); }
.g-cell.is-out {
  opacity: 0;
  transform: scale(.96) rotate(-2deg);
  transition: opacity 240ms var(--e-in), transform 240ms var(--e-in);
  pointer-events: none;
}

/* Infinite testimonial rail. Fixed tilts, no sway. */
.rail-row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rail-track {
  display: flex;
  gap: var(--s-5);
  width: max-content;
  animation: rail-scroll 52s linear infinite;
}
.rail-row:hover .rail-track,
.rail-row.is-paused .rail-track { animation-play-state: paused; }
.rail-track > * { flex: 0 0 auto; }

/* Parallax targets — transform is written by motion.js. */
.px { transform: translate3d(0, var(--py, 0px), 0); }

/* --- FLAT PHONE --
   Every resting tilt goes flat below 600px: tilted cards in narrow columns
   overflow and read as a rendering bug.
   --- */
@media (max-width: 600px) {
  .g-card, .t-card, .car-item, .tilt {
    --tilt: 0deg;
    --tilt-h: 0deg;
    --fan: 0deg;
  }
  .car-item { transform: none; }
  .car-item.is-center { transform: none; }
  .g-card:hover, .g-card:focus-within { transform: translateY(-6px); }
}

/* --- REDUCED MOTION --
   Everything above is disabled or reduced to a plain fade.
   --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; }
  [data-rv].is-in { transform: none !important; }

  .marquee-track,
  .rail-track { animation: none !important; transform: none !important; }
  .rail-track { flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee-track { flex-wrap: wrap; width: 100%; justify-content: center; }

  .g-card, .t-card, .car-item, .tilt {
    --tilt: 0deg; --tilt-h: 0deg; --fan: 0deg;
    transform: none !important;
  }
  .g-card:hover, .g-card:focus-within { transform: none !important; }
  .car-item, .car-item.is-center { transform: none !important; }

  .btn-gold:hover, .btn-ghost:hover, .btn-tg:hover,
  .nav-tg:hover, .car-btn:hover { transform: none !important; }
  .btn-gold:active, .btn-ghost:active, .btn-tg:active { transform: none !important; }

  .digit .d-val.out, .digit .d-val.in { animation: none !important; opacity: 1 !important; }
  .toast.is-on .toast-rule { animation: none !important; transform: scaleX(1) !important; }
  .chip-teal .chip-dot { animation: none !important; }
  .g-card:hover .g-badge { animation: none !important; }
  .g-card:hover .g-shot img { transform: none !important; }

  .drawer .d-link { opacity: 1 !important; transform: none !important; }
  .modal-card { transform: none !important; }
  .toast { transform: none !important; }
  .px { transform: none !important; }
  .tab-ind { transform: translateX(var(--tx, 0)) !important; }
}