/* ============================================================
   animations.css — reveal initial states + reduced-motion
   GSAP drives the transitions; these set the "before" states.
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease); }
.stagger > *{ opacity:0; transform:translateY(20px); }
.stagger.is-in > *{ opacity:1; transform:none; transition:opacity .6s var(--ease),transform .6s var(--ease); }
.draw{ stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400); }
.draw.is-in{ stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--ease); }
.will-anim{ will-change:transform,opacity; }

@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); }
  60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); }
}
.shake{ animation:shake .5s var(--ease); }

.shimmer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.shimmer::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); animation:sweep 3.4s ease-in-out 1s infinite;
}
@keyframes sweep{ 0%{ left:-60%; } 55%,100%{ left:120%; } }

@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.scrollcue svg{ animation:bob 1.8s ease-in-out infinite; }

.flag-stripe{ overflow:hidden; }
.flag-stripe::after{
  content:""; position:absolute; inset:0; left:-30%;
  width:30%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:flagSheen 6s ease-in-out 1.2s infinite;
}
@keyframes flagSheen{ 0%{ left:-30%; } 45%,100%{ left:130%; } }

.spectrum__bar{ position:relative; }
.spectrum__sheen{
  position:absolute; top:0; bottom:0; left:0; width:22%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%); opacity:0;
}

.counting{ filter:blur(7px); opacity:.35; }

.crown .spark{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle,#FFF6DE 0%,var(--gold) 60%,transparent 70%);
  opacity:0; pointer-events:none;
}
@keyframes twinkle{
  0%{ transform:scale(0); opacity:0; }
  40%{ transform:scale(1.3); opacity:1; }
  100%{ transform:scale(0); opacity:0; }
}
.crown .spark.go{ animation:twinkle 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .flag-stripe::after,.crown .spark{ display:none !important; animation:none !important; }
  .counting{ filter:none !important; opacity:1 !important; }
  .spectrum__sheen{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.2s !important; scroll-behavior:auto !important; }
  .reveal,.stagger > *{ opacity:1 !important; transform:none !important; }
  .draw{ stroke-dashoffset:0 !important; }
  .shimmer::after{ display:none; }
  .scrollcue svg{ animation:none; }
}