/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].in-view { opacity: 1; transform: translateY(0); }

[data-reveal="scale"] { transform: translateY(0) scale(0.92); }
[data-reveal="scale"].in-view { transform: scale(1); }

[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].in-view { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].in-view { transform: translateX(0); }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

[data-reveal-group].in-view > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].in-view > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].in-view > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group].in-view > *:nth-child(3) { transition-delay: 0.19s; }
[data-reveal-group].in-view > *:nth-child(4) { transition-delay: 0.26s; }
[data-reveal-group].in-view > *:nth-child(5) { transition-delay: 0.33s; }
[data-reveal-group].in-view > *:nth-child(6) { transition-delay: 0.4s; }
[data-reveal-group].in-view > *:nth-child(7) { transition-delay: 0.47s; }
[data-reveal-group].in-view > *:nth-child(8) { transition-delay: 0.54s; }
[data-reveal-group].in-view > *:nth-child(9) { transition-delay: 0.61s; }
[data-reveal-group].in-view > *:nth-child(10) { transition-delay: 0.68s; }
[data-reveal-group].in-view > *:nth-child(11) { transition-delay: 0.75s; }
[data-reveal-group].in-view > *:nth-child(12) { transition-delay: 0.82s; }

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float { animation: floatSoft 5s ease-in-out infinite; }

/* Hero name entrance — split by WORD, never by character. Vazirmatn is a
   joined Persian script: wrapping individual letters in their own
   inline-block spans breaks that joining, so the stagger only ever
   operates at word granularity (see .word in components.css for the
   inline-block base rule, and splitHeroName() in app.js for the split). */
.hero-name .word {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--i-delay, 0s);
}

/* The transition-delay clock only starts counting once opacity is actually
   asked to change, so gating the flip behind body.hero-ready keeps every
   word's entrance perfectly timed to the preloader hand-off — never
   mid-cascade, never before the page is actually visible. */
body.hero-ready .hero-name .word { opacity: 1; transform: translateY(0); }

/* ---------- Hero entrance cascade ---------- */
.hero-inner > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

body.hero-ready .hero-inner > * { opacity: 1; transform: translateY(0); }

body.hero-ready .hero-inner > *:nth-child(1) { transition-delay: 0.02s; }
body.hero-ready .hero-inner > *:nth-child(2) { transition-delay: 0.12s; }
body.hero-ready .hero-inner > *:nth-child(3) { transition-delay: 0.2s; }
body.hero-ready .hero-inner > *:nth-child(4) { transition-delay: 0.55s; }
body.hero-ready .hero-inner > *:nth-child(5) { transition-delay: 0.68s; }
body.hero-ready .hero-inner > *:nth-child(6) { transition-delay: 0.78s; }