/* motion.css — warm, unhurried, hand-lit. */
/* Reveal system (IntersectionObserver adds .is-in, then unobserves) */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--d-wipe) var(--ease-arch), transform var(--d-wipe) var(--ease-arch);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Arch wipe — the panel opens from the base upward through the arch shape. */
.arch-wipe {
  clip-path: inset(100% 0 0 0 round var(--arch));
  transition: clip-path var(--d-wipe) var(--ease-arch);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.arch-wipe.is-in { clip-path: inset(0 0 0 0 round var(--arch)); }
.arch-wipe.is-done { clip-path: none; }
/* Content inside a wiping panel rises behind the opening arch. */
.arch-wipe > .rise {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--d-slow) var(--ease-arch), transform var(--d-slow) var(--ease-arch);
  transition-delay: calc(var(--i, 0) * 65ms + 180ms);
}
.arch-wipe.is-in > .rise { opacity: 1; transform: none; }
/* Ambient sway & drift */
@keyframes hang-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
.sway {
  transform-origin: 50% -14px;
  animation: hang-sway 5s var(--ease-inout) infinite;
  animation-delay: var(--sway-delay, 0s);
}
@keyframes cloth-sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
.sway-soft {
  transform-origin: 50% -20px;
  animation: cloth-sway 6.5s var(--ease-inout) infinite;
  animation-delay: var(--sway-delay, 0s);
}
/* Foil shimmer */
@keyframes foil-travel {
  0%, 62% { background-position: 210% 0; }
  100% { background-position: -110% 0; }
}
/* a bright band sweeping across a surface, masked to its rim */
.shimmer-rim { position: relative; overflow: hidden; }
.shimmer-rim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 210% 0;
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: foil-travel 6s var(--ease-inout) infinite;
}
/* Marquee */
@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* Small loops */
@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); }
}
@keyframes badge-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.13); }
  100% { transform: scale(1); }
}
/* Countdown digit — vertical foil shimmer wipe, no flip, no odometer roll */
@keyframes digit-in {
  from { clip-path: inset(0 0 100% 0); opacity: .2; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes well-shimmer {
  0% { transform: translate3d(0, -110%, 0); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translate3d(0, 130%, 0); opacity: 0; }
}
.digit__v { display: block; }
.digit.is-changing .digit__v { animation: digit-in 300ms var(--ease-arch); }
.digit.is-changing::after { animation: well-shimmer 300ms var(--ease-out); }
/* Filtered grid (FLIP is driven by games-filter.js; these are the end states) */
.is-filtered-out { opacity: 0; transform: scale(.96); pointer-events: none; }
.flip-move { transition: transform var(--d-slow) var(--ease-arch); }
/* Utility */
/* Reduced motion — everything above is switched off or reduced to a fade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .arch-wipe > .rise { opacity: 1; transform: none; }
  .arch-wipe { clip-path: none; }
  .sway, .sway-soft { animation: none; transform: none; }
  .marquee__track { animation: none; transform: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .shimmer-rim::before, .btn--primary::after { animation: none; opacity: 0; }
  .badge--live .dot { animation: none; }
  .toast[data-show="true"] .toast__bar { animation: none; transform: scaleX(1); }
  .digit.is-changing .digit__v, .digit.is-changing::after { animation: none; }
  .shot { transform: none; }
  .testimonials__track { animation: none; }
  .testimonials { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  /* Parallax and the ambient canvas are skipped in JS, not here. */
}