/* ============================================================
   ANIMATIONS — each reveal variant is visually distinct.
   Applied via data-reveal="variant-name" + .is-visible toggle
   ============================================================ */

/* all reveal elements start hidden */
[data-reveal]{ opacity:0; }
[data-reveal].is-visible{ opacity:1; }

/* 1. rise — simple upward fade, for body copy */
[data-reveal="rise"]{ transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal="rise"].is-visible{ transform:translateY(0); }

/* 2. rise-blur — soft focus pull, for hero subhead */
[data-reveal="rise-blur"]{ transform:translateY(20px); filter:blur(6px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
[data-reveal="rise-blur"].is-visible{ transform:translateY(0); filter:blur(0); }

/* 3. clip-reveal — text/image mask wipe, for headings */
[data-reveal="clip-up"]{ clip-path:inset(0 0 100% 0); transition:opacity 0.01s, clip-path 0.9s var(--ease-in-out); }
[data-reveal="clip-up"].is-visible{ clip-path:inset(0 0 0% 0); }

/* 4. scale-in — for cards/photos */
[data-reveal="scale-in"]{ transform:scale(0.86); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
[data-reveal="scale-in"].is-visible{ transform:scale(1); }

/* 5. swing-in — slight rotate, for badges/pills/icons */
[data-reveal="swing-in"]{ transform:rotate(-9deg) translateY(16px) scale(0.9); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
[data-reveal="swing-in"].is-visible{ transform:rotate(0) translateY(0) scale(1); }

/* 6. slide-right — from left */
[data-reveal="slide-right"]{ transform:translateX(-48px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal="slide-right"].is-visible{ transform:translateX(0); }

/* 7. slide-left — from right */
[data-reveal="slide-left"]{ transform:translateX(48px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal="slide-left"].is-visible{ transform:translateX(0); }

/* 8. drop-in — from above, for nav-adjacent / top elements */
[data-reveal="drop-in"]{ transform:translateY(-36px); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
[data-reveal="drop-in"].is-visible{ transform:translateY(0); }

/* 9. unfold — vertical scale from 0, for dividers/rules */
[data-reveal="unfold"]{ transform:scaleY(0); transform-origin:top; transition:opacity .5s, transform .7s var(--ease-in-out); }
[data-reveal="unfold"].is-visible{ transform:scaleY(1); }

/* 10. count-pop — for stat numbers */
[data-reveal="count-pop"]{ transform:scale(0.7) translateY(10px); transition:opacity .6s var(--ease-spring), transform .6s var(--ease-spring); }
[data-reveal="count-pop"].is-visible{ transform:scale(1) translateY(0); }

/* 11. skew-in — for diagonal / flyer style panels */
[data-reveal="skew-in"]{ transform:skewY(4deg) translateY(40px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal="skew-in"].is-visible{ transform:skewY(0) translateY(0); }

/* 12. flip-in — 3D flip, for portfolio thumbnails */
[data-reveal="flip-in"]{ transform:perspective(800px) rotateX(18deg) translateY(24px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
[data-reveal="flip-in"].is-visible{ transform:perspective(800px) rotateX(0) translateY(0); }

/* 13. zoom-rotate — for icons */
[data-reveal="zoom-rotate"]{ transform:scale(0.5) rotate(-16deg); transition:opacity .65s var(--ease-spring), transform .65s var(--ease-spring); }
[data-reveal="zoom-rotate"].is-visible{ transform:scale(1) rotate(0); }

/* 14. rise-wide — larger travel, for full-width panels */
[data-reveal="rise-wide"]{ transform:translateY(64px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal="rise-wide"].is-visible{ transform:translateY(0); }

/* 15. fade-only — pure opacity, for background/ambient elements */
[data-reveal="fade-only"]{ transition:opacity 1.1s ease; }
[data-reveal="fade-only"].is-visible{ }

/* 16. pop-rotate — for testimonial quote marks */
[data-reveal="pop-rotate"]{ transform:scale(0.4) rotate(18deg); transition:opacity .6s var(--ease-spring), transform .6s var(--ease-spring); }
[data-reveal="pop-rotate"].is-visible{ transform:scale(1) rotate(0); }

/* 17. slide-up-elastic — bouncy overshoot for CTAs */
[data-reveal="slide-up-elastic"]{ transform:translateY(56px); transition:opacity .9s cubic-bezier(.34,1.75,.64,1), transform .9s cubic-bezier(.34,1.75,.64,1); }
[data-reveal="slide-up-elastic"].is-visible{ transform:translateY(0); }

/* 18. curtain — width wipe */
[data-reveal="curtain"]{ clip-path:inset(0 100% 0 0); transition:opacity 0.01s, clip-path 0.85s var(--ease-in-out); }
[data-reveal="curtain"].is-visible{ clip-path:inset(0 0% 0 0); }

/* stagger helper: children get incremental delay via inline style or nth-child */
.stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* ---------- continuous ambient / non-scroll-triggered motion ---------- */

@keyframes float-slow{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(2deg); }
}
@keyframes float-slower{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(12px) rotate(-2deg); }
}
@keyframes spin-slow{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes pulse-glow{
  0%,100%{ opacity:0.5; transform:scale(1); }
  50%{ opacity:0.9; transform:scale(1.06); }
}
@keyframes shutter-blink{
  0%,92%,100%{ transform:scaleY(1); }
  96%{ transform:scaleY(0.05); }
}
@keyframes ticker-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.25; }
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(-4%,-4%); }
}
@keyframes reel-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.anim-float-slow{ animation:float-slow 6s ease-in-out infinite; }
.anim-float-slower{ animation:float-slower 8s ease-in-out infinite; }
.anim-spin-slow{ animation:spin-slow 18s linear infinite; }
.anim-pulse-glow{ animation:pulse-glow 3.4s ease-in-out infinite; }
.anim-shutter{ animation:shutter-blink 4.5s ease-in-out infinite; transform-origin:center; }
.anim-blink{ animation:ticker-blink 1.6s ease-in-out infinite; }