/* ===
   Yono Game — motion
   Short, conventional transitions: a small rise-and-fade on scroll, modest
   hover lifts, and nothing decorative. Only transform and opacity animate.
   === */

/* --- SCROLL REVEAL --- */
[data-rv] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-rev) var(--e-out), transform var(--d-rev) var(--e-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-rv="left"]  { transform: translateX(-16px); }
[data-rv="up"]    { transform: translateY(22px); }
[data-rv="scale"] { transform: scale(.98); }
[data-rv="fade"]  { transform: none; }
[data-rv].is-in   { opacity: 1; transform: none; }

/* Stagger helper — set style="--i:N" on children of a revealed 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; }

.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%); }
}
@keyframes drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.chip-teal .chip-dot { animation: live-pulse 2s var(--e) infinite; }

/* Countdown: the spent digit slides out, the next slides in. */
@keyframes digit-out {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(60%);  opacity: 0; }
}
@keyframes digit-in {
  from { transform: translateY(-60%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.digit { position: relative; overflow: hidden; }
.digit .d-val { display: block; }
.digit .d-val.out { animation: digit-out 240ms var(--e) forwards; }
.digit .d-val.in  { animation: digit-in  240ms var(--e-out) forwards; }

/* Drawer links arrive in sequence. */
.drawer .d-link {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity var(--d-ui) var(--e), transform var(--d-ui) var(--e);
}
.drawer.is-open .d-link { opacity: 1; transform: none; }
.drawer.is-open .d-link:nth-child(1) { transition-delay: 50ms; }
.drawer.is-open .d-link:nth-child(2) { transition-delay: 85ms; }
.drawer.is-open .d-link:nth-child(3) { transition-delay: 120ms; }
.drawer.is-open .d-link:nth-child(4) { transition-delay: 155ms; }
.drawer.is-open .d-link:nth-child(5) { transition-delay: 190ms; }
.drawer.is-open .d-link:nth-child(6) { transition-delay: 225ms; }
.drawer.is-open .d-link:nth-child(7) { transition-delay: 260ms; }
.drawer.is-open .d-link:nth-child(8) { transition-delay: 295ms; }

/* Games grid FLIP — filtered-out cards fade out. */
.g-cell { transition: transform var(--d-slow) var(--e); }
.g-cell.is-out {
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--d-ui) var(--e), transform var(--d-ui) var(--e);
  pointer-events: none;
}

/* Testimonial rail. */
.rail-row {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rail-track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  animation: rail-scroll 60s linear infinite;
}
.rail-row:hover .rail-track,
.rail-row.is-paused .rail-track { animation-play-state: paused; }
.rail-track > * { flex: 0 0 auto; }

/* Very slight parallax on the hero image; --py is written by motion.js. */
.px { transform: translate3d(0, var(--py, 0px), 0); }
@media (max-width: 900px) { .px { transform: none; } }

/* --- REDUCED MOTION --- */
@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], [data-rv].is-in { opacity: 1 !important; transform: none !important; }

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

  .g-card:hover, .g-card:focus-within { transform: none !important; }
  .g-card:hover .g-shot img { transform: none !important; }
  .car-item.is-center { transform: none !important; }
  .btn-gold:active, .btn-ghost:active, .btn-tg:active, .car-btn: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; }

  .drawer .d-link { opacity: 1 !important; transform: none !important; }
  .modal-card { transform: none !important; }
  .toast { transform: none !important; }
  .px { transform: none !important; }
}