/* DuelVerse lobby motion — AREA 1 (lobby & chrome). Loaded only by lobby.html.
   Every effect is gated on html.js-motion (added by motion-lobby.js only when
   prefers-reduced-motion is NOT set), so no-JS / reduced-motion keeps the
   static site.css look. Animations use transform/opacity only. */
.motion-dust{position:fixed;inset:0;z-index:0;pointer-events:none}
html.js-motion .main{position:relative;z-index:1}

/* ---- carousel polish (site.js still owns paging/auto-advance) ---- */
html.js-motion .promo-card{transition:transform .18s ease-out,opacity .3s ease}
html.js-motion .carousel-dots button{transition:opacity .2s ease}

/* ---- Crown Clash / promo + race-head gold shimmer sweep ---- */
html.js-motion .promo-card::before,
html.js-motion #race .panel-head::before,
html.js-motion .countdown-fill::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(232,179,75,.16),rgba(167,139,250,.12),transparent);
  transform:translateX(-170%) skewX(-12deg);opacity:0;
}
html.js-motion .promo-card::before{animation:motion-sweep 5.5s ease-in-out infinite}
html.js-motion #race .panel-head{position:relative;overflow:hidden}
html.js-motion #race .panel-head::before{animation:motion-sweep 7s ease-in-out 1.2s infinite}
html.js-motion .countdown-fill{position:relative}
html.js-motion .countdown-fill::after{
  width:60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  animation:motion-sweep 3.8s linear infinite;
}
@keyframes motion-sweep{
  0%{transform:translateX(-170%) skewX(-12deg);opacity:0}
  8%{opacity:1}
  38%{transform:translateX(340%) skewX(-12deg);opacity:1}
  46%,100%{transform:translateX(340%) skewX(-12deg);opacity:0}
}

/* ---- game tiles: shine (tilt transform itself stays owned by site.js) ---- */
html.js-motion .tile{position:relative;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  html.js-motion .tile-art::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
    background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 62%);
  }
  html.js-motion .tile:hover .tile-art::after{opacity:1}
  html.js-motion .tile::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:2;pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(232,179,75,.13),transparent);
    transform:translateX(-180%) skewX(-14deg);transition:transform .7s ease,opacity .7s ease;opacity:0;
  }
  html.js-motion .tile:hover::after{transform:translateX(340%) skewX(-14deg);opacity:1}
}
@media (pointer:coarse){
  html.js-motion .tile{transition:transform .12s ease}
  html.js-motion .tile.motion-press{transform:scale(.97)}
}

/* ---- "playing now" numbers ---- */
.motion-live-num{display:inline-block;font-variant-numeric:tabular-nums}
.motion-live-num.motion-pop{animation:motion-pop .45s ease}
@keyframes motion-pop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ---- winners ticker (JS builds viewport + clones; static list otherwise) ---- */
.motion-ticker-viewport{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
}
html.js-motion .winner-list.motion-ticker-on{animation:motion-ticker var(--motion-ticker-d,24s) linear infinite;will-change:transform}
.motion-ticker-viewport:hover .winner-list.motion-ticker-on,
.motion-ticker-viewport.motion-paused .winner-list.motion-ticker-on{animation-play-state:paused}
@keyframes motion-ticker{to{transform:translateY(-50%)}}

/* ---- buttons in lobby main: press + ripple ---- */
html.js-motion .main .btn{position:relative;overflow:hidden}
html.js-motion .main .btn:active{transform:scale(.97)}
.motion-ripple{
  position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.4);
  transform:scale(0);animation:motion-ripple .65s ease-out forwards;
}
.btn-ghost .motion-ripple{background:rgba(167,139,250,.35)}
@keyframes motion-ripple{to{transform:scale(1);opacity:0}}

/* ---- hard kill-switch: reduced motion wins over everything above ---- */
@media (prefers-reduced-motion:reduce){
  .motion-dust{display:none}
  .winner-list.motion-ticker-on{animation:none;transform:none}
  .motion-live-num.motion-pop{animation:none}
  html.js-motion .promo-card::before,
  html.js-motion #race .panel-head::before,
  html.js-motion .countdown-fill::after,
  html.js-motion .tile::after,
  html.js-motion .tile-art::after{animation:none;opacity:0}
  html.js-motion .main .btn:active{transform:none}
}