/* ============================================================
   ELEVATED STATES — motion layer
   Quiet, once-only motion: sections rise into view, numbers count
   up, leaderboard bars grow, cards lift on hover. Everything here
   is off for anyone who has asked their device for reduced motion.
   ============================================================ */

/* Reveal — applied by motion.js to section children. Hidden only
   once JS has confirmed it will run (html.js-motion), so nothing is
   ever invisible if a script fails to load. */
html.js-motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.65,.2,1),transform .7s cubic-bezier(.2,.65,.2,1);transition-delay:var(--rd,0s);will-change:opacity,transform}
html.js-motion [data-reveal].in{opacity:1;transform:none}

/* Leaderboard bars grow from the left */
html.js-motion .lbbarfill{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--bd,0s)}
html.js-motion .lb.in .lbbarfill{transform:scaleX(1)}

/* Hover lift on card-like things — subtle, 250ms */
.pill3>div,.pillar,.events>*,.ways .way,.tier,.night3>div,.lineup>div,.kpi,.card,.st,.stat,.way,.org,.bd{transition:transform .25s ease,box-shadow .25s ease}
.pill3>div:hover,.pillar:hover,.events>*:hover,.ways .way:hover,.tier:hover,.night3>div:hover,.lineup>div:hover,.kpi:hover,.card:hover,.org:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(36,26,68,.14)}

/* Buttons: a touch of life */
.btn{transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.btn:active{transform:translateY(0);box-shadow:none}

/* Tripping Ball hero: real stars + a slow shimmer through the gold title */
.starfield{position:absolute;inset:0;pointer-events:none}
.starfield i{position:absolute;width:2px;height:2px;border-radius:50%;background:#EAD3A0;opacity:.2;animation:twinkle var(--d,4s) ease-in-out var(--o,0s) infinite}
.starfield i.big{width:3px;height:3px;box-shadow:0 0 6px rgba(234,211,160,.6)}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.85;transform:scale(1.35)}}
.shimmer{background-size:200% 100%!important;animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.breathe{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

@media (prefers-reduced-motion:reduce){
  html.js-motion [data-reveal]{opacity:1;transform:none;transition:none}
  html.js-motion .lbbarfill{transform:none;transition:none}
  .starfield i,.shimmer,.breathe{animation:none!important}
  .btn,.pill3>div,.events>*,.tier,.card,.org{transition:none}
}