/* ==========================================================
   ANIMATIONS – keyframes + scroll-reveal classes.
   Add class="reveal" (or reveal-left / reveal-right / reveal-zoom)
   to any element. Add style="--d:.2s" for a delay.
   ========================================================== */
.reveal,.reveal-left,.reveal-right,.reveal-zoom{opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal{transform:translateY(40px)}.reveal-left{transform:translateX(-50px)}.reveal-right{transform:translateX(50px)}.reveal-zoom{transform:scale(.92)}
.in{opacity:1!important;transform:none!important}
body.leaving{opacity:0;transition:opacity .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wordUp{to{transform:none}}
@keyframes reveal{to{clip-path:inset(0)}}
@keyframes settle{to{transform:scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes dash{to{stroke-dashoffset:-220}}
@keyframes gridMove{to{background-position:60px 60px}}
@keyframes cue{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(16px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-left,.reveal-right,.reveal-zoom{opacity:1;transform:none}
  .word>span{transform:none}.hero-visual .frame{clip-path:none}.hero-visual img{transform:none}
}