/* ============================================================================
   ANIMATIONS — keyframe library (ceremonial, slow, weighted; no gaming flash)
   ============================================================================ */

/* ---- Screen transitions -------------------------------------------------- */
@keyframes screenIn{
  from{ opacity:0; transform:translateY(26px) scale(.992); filter:blur(6px); }
  to{   opacity:1; transform:translateY(0)    scale(1);    filter:blur(0); }
}
@keyframes screenOut{
  from{ opacity:1; transform:translateY(0)     scale(1); filter:blur(0); }
  to{   opacity:0; transform:translateY(-22px) scale(.992); filter:blur(8px); }
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }

/* ---- Generic reveals ----------------------------------------------------- */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(40px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes riseInSoft{
  from{ opacity:0; transform:translateY(20px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes scaleIn{
  from{ opacity:0; transform:scale(.86); }
  to{   opacity:1; transform:scale(1); }
}
@keyframes blurUp{
  from{ opacity:0; letter-spacing:.5em; filter:blur(10px); }
  to{   opacity:1; letter-spacing:normal; filter:blur(0); }
}

/* ---- Backgrounds --------------------------------------------------------- */
@keyframes gridDrift{
  from{ background-position:0 0, 0 0; }
  to{   background-position:64px 64px, 64px 64px; }
}
@keyframes hintPulse{ 0%,100%{opacity:.45} 50%{opacity:.85} }

/* ---- Gold sheen sweep (titles, plaque) ----------------------------------- */
@keyframes sheen{
  0%{   background-position:-220% 0; }
  100%{ background-position:320% 0; }
}
@keyframes lightSweep{
  0%{ transform:translateX(-140%) skewX(-18deg); opacity:0; }
  12%{ opacity:.9; }
  60%{ opacity:.9; }
  100%{ transform:translateX(160%) skewX(-18deg); opacity:0; }
}

/* ---- Glow / breathing ---------------------------------------------------- */
@keyframes goldBreath{
  0%,100%{ box-shadow:0 0 30px rgba(228,197,107,.30), 0 0 70px rgba(228,197,107,.12); }
  50%{     box-shadow:0 0 52px rgba(228,197,107,.55), 0 0 120px rgba(228,197,107,.22); }
}
@keyframes ringPulse{
  0%{   transform:scale(1);    opacity:.6; }
  70%{  transform:scale(1.6);  opacity:0; }
  100%{ transform:scale(1.6);  opacity:0; }
}
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ---- Button press ripple ------------------------------------------------- */
@keyframes ripple{
  from{ transform:scale(0); opacity:.5; }
  to{   transform:scale(2.4); opacity:0; }
}

/* ---- Ribbon cutting ------------------------------------------------------ */
@keyframes scissorGlide{
  0%{   transform:translate(-46%,-50%) rotate(-6deg); opacity:0; }
  18%{  opacity:1; }
  100%{ transform:translate(46%,-50%) rotate(-6deg); opacity:1; }
}
@keyframes bladeOpen{ 0%,55%{transform:rotate(0)} 70%{transform:rotate(-13deg)} 100%{transform:rotate(0)} }
@keyframes bladeOpenLow{ 0%,55%{transform:rotate(0)} 70%{transform:rotate(13deg)} 100%{transform:rotate(0)} }
@keyframes ribbonFallL{
  from{ transform:translateX(0) rotate(0); opacity:1; }
  to{   transform:translateX(-40%) translateY(120%) rotate(-26deg); opacity:0; }
}
@keyframes ribbonFallR{
  from{ transform:translateX(0) rotate(0); opacity:1; }
  to{   transform:translateX(40%) translateY(120%) rotate(26deg); opacity:0; }
}

/* ---- Curtain ------------------------------------------------------------- */
@keyframes curtainL{
  from{ transform:translateX(0); }
  to{   transform:translateX(-105%); }
}
@keyframes curtainR{
  from{ transform:translateX(0); }
  to{   transform:translateX(105%); }
}

/* ---- Plaque reveal ------------------------------------------------------- */
@keyframes plaqueRise{
  from{ opacity:0; transform:perspective(1400px) rotateX(14deg) translateY(60px) scale(.94); }
  to{   opacity:1; transform:perspective(1400px) rotateX(0)     translateY(0)    scale(1); }
}
@keyframes spotlightIn{ from{opacity:0; transform:scale(.7)} to{opacity:1; transform:scale(1)} }

/* ---- Finale rays --------------------------------------------------------- */
@keyframes raysSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes raysFade{ from{opacity:0; transform:scale(.6)} to{opacity:.8; transform:scale(1)} }
@keyframes sealStamp{
  0%{ opacity:0; transform:scale(1.8) rotate(-8deg); filter:blur(6px); }
  60%{ opacity:1; transform:scale(.96) rotate(0); filter:blur(0); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}

/* ---- Counters / bars ----------------------------------------------------- */
@keyframes barGrow{ from{ width:0; } }
@keyframes gaugeIn{ from{ opacity:0; transform:translateY(24px) scale(.9); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* ---- Stagger helper (set --i on each child) ------------------------------ */
.stagger > *{ opacity:0; animation:riseIn .8s cubic-bezier(.16,.84,.34,1) both; animation-delay:calc(var(--i,0) * .14s + .15s); }
.reduce-motion .stagger > *{ animation:fadeIn .4s ease both; animation-delay:calc(var(--i,0) * .05s); }