/* ============================================================
   SJ WEBDEV SERVICES — animations.css
   Scroll reveals, entrance sequences, ambient motion
   ============================================================ */

/* ---------- Scroll reveal (driven by IntersectionObserver) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* staggered children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-stagger].is-revealed > * { opacity: 1; transform: none; }
[data-stagger].is-revealed > *:nth-child(1) { transition-delay: .00s; }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].is-revealed > *:nth-child(7) { transition-delay: .42s; }
[data-stagger].is-revealed > *:nth-child(8) { transition-delay: .49s; }

/* ---------- Hero entrance (runs after loader) ---------- */
.hero__inner > * {
  opacity: 0;
  transform: translateY(30px);
}
body.is-ready .hero__inner > * {
  animation: heroRise .9s var(--ease) forwards;
}
body.is-ready .hero__inner > *:nth-child(1) { animation-delay: .05s; }
body.is-ready .hero__inner > *:nth-child(2) { animation-delay: .15s; }
body.is-ready .hero__inner > *:nth-child(3) { animation-delay: .25s; }
body.is-ready .hero__inner > *:nth-child(4) { animation-delay: .35s; }
body.is-ready .hero__inner > *:nth-child(5) { animation-delay: .45s; }
@keyframes heroRise {
  to { opacity: 1; transform: none; }
}

/* hero slash draws in */
.hero__slash, .page-head__slash {
  transform-origin: top;
  animation: slashGrow 1.2s var(--ease) .2s both;
}
@keyframes slashGrow {
  from { transform: scaleY(0) rotate(18deg); opacity: 0; }
  to   { opacity: .85; }
}

/* ---------- Text reveal (word/line mask) ---------- */
.reveal-text { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-text > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease);
}
.reveal-text.is-revealed > span { transform: none; }

/* ---------- Ambient floating dots (hero) ---------- */
.hero__dot { animation: floatY 7s ease-in-out infinite; }
.hero__dot:nth-child(odd) { animation-duration: 9s; animation-direction: reverse; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* ---------- Page transition overlay ---------- */
#page-transition {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
body.page-leaving #page-transition {
  transform-origin: bottom;
  animation: wipeIn .55s var(--ease) forwards;
}
@keyframes wipeIn {
  to { transform: scaleY(1); }
}

/* gentle fade for whole page on load */
main { animation: pageFade .7s var(--ease) both; }
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* counter shimmer when counting */
.stat .num.is-counting .suffix { animation: none; }

/* card icon idle (services on dark) */
@keyframes nudge { 0%,100%{transform:none} 50%{transform:translateY(-3px)} }

/* ---------- Reduced motion: disable everything ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > *, .hero__inner > *, .reveal-text > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__dot { animation: none !important; }
}