/* ==========================================================================
   animations.css — every keyframe, the reveal system and reduced motion.
   Entrances use animations with fill-mode "backwards": they hold the start
   frame while waiting, then hand control back to normal styles, so they
   never block hover transforms or the magnetic offset afterwards.
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes ripple { 0% { opacity: .28; scale: 0; } 100% { opacity: 0; scale: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -14px) rotate(5deg); }
}
@keyframes sway { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.72) rotate(45deg); opacity: .65; }
}
@keyframes slide-stripes { to { background-position: 39.6px 0; } }
@keyframes live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* entrances */
@keyframes letter-in { from { opacity: 0; transform: translateY(.5em) rotate(8deg); } }
@keyframes deal { from { opacity: 0; transform: translateY(140px) rotate(-10deg) scale(.9); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes rise-lg { from { opacity: 0; transform: translateY(90px) scale(.96); } }
@keyframes from-right { from { opacity: 0; transform: translate(70px, 30px) rotate(6deg); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
@keyframes fade { from { opacity: 0; } }
@keyframes char-in { from { opacity: 0; transform: translateY(80%) rotate(10deg); } }
@keyframes draw { from { transform: scaleY(0); } }
@keyframes dot-in { 0%, 45% { transform: scale(0); } }

/* hero: letters fall in, covers are dealt like cards */
html.js .hero .word > span { animation: letter-in 1s var(--ease) backwards; }
html.js .hero .word > span:nth-child(1)  { animation-delay: .05s; }
html.js .hero .word > span:nth-child(2)  { animation-delay: .10s; }
html.js .hero .word > span:nth-child(3)  { animation-delay: .15s; }
html.js .hero .word > span:nth-child(4)  { animation-delay: .20s; }
html.js .hero .word > span:nth-child(5)  { animation-delay: .25s; }
html.js .hero .word > span:nth-child(6)  { animation-delay: .30s; }
html.js .hero .word > span:nth-child(7)  { animation-delay: .35s; }
html.js .hero .word > span:nth-child(8)  { animation-delay: .40s; }
html.js .hero .word > span:nth-child(9)  { animation-delay: .45s; }
html.js .hero .word > span:nth-child(10) { animation-delay: .50s; }
html.js .hero .word > span:nth-child(11) { animation-delay: .55s; }
html.js .cover-wrap { animation: deal 1.1s var(--ease) backwards; animation-delay: calc(.45s + var(--i, 0) * .08s); }

/* scroll reveals (classes added by js/reveal.js) */
html.js [data-reveal]:not(.is-in),
html.js [data-stagger]:not(.is-in) > * { opacity: 0; }

[data-reveal].is-in { animation: rise .9s var(--ease) backwards; animation-delay: var(--delay, 0s); }
[data-reveal="rise"].is-in { animation-name: rise-lg; animation-duration: 1.1s; }
[data-reveal="right"].is-in { animation-name: from-right; animation-duration: 1.2s; animation-delay: .2s; }
[data-reveal="fade"].is-in { animation-name: fade; }
[data-reveal="pop"].is-in { animation: pop .9s var(--ease-spring) backwards; animation-delay: .5s; }
[data-reveal="pin"].is-in { animation: none; }
html.js [data-reveal="pin"]:not(.is-in) { opacity: 1; }
html.js [data-reveal="pin"]:not(.is-in)::before { transform: scaleY(0); }
html.js [data-reveal="pin"]:not(.is-in)::after { transform: scale(0); }
[data-reveal="pin"].is-in::before { animation: draw .9s var(--ease) backwards; }
[data-reveal="pin"].is-in::after { animation: dot-in 1.1s var(--ease-spring) backwards; }

[data-stagger].is-in > * { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
[data-stagger="pop"].is-in > * { animation-name: pop; animation-timing-function: var(--ease-spring); animation-delay: calc(var(--i, 0) * 60ms + .1s); }
[data-stagger="letters"].is-in > * { animation-name: letter-in; animation-duration: 1s; animation-delay: calc(var(--i, 0) * 55ms); }

html.js [data-split]:not(.is-in) .ch { opacity: 0; }
[data-split].is-in .ch { animation: char-in .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 32ms + .1s); }

/* reduced motion: no loops, no parallax, no recede — content just appears */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .01ms !important;
  }
  .recede, .m, .phone, .hero .word, .covers { transform: none !important; translate: none !important; opacity: 1 !important; }
  .has-drip::before { scale: none !important; }
}