/* ==========================================================================
   ANIMATIONS — reveal states toggled by JS (main.js) via GSAP/IO (v2)
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}
[data-reveal].is-revealed {
  transition: opacity var(--dur-slow) var(--ease-signal), transform var(--dur-slow) var(--ease-signal);
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-revealed { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-48px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="right"].is-revealed { transform: translateX(0); }

/* Stagger children automatically via inline --delay set by JS */
[data-reveal] { transition-delay: var(--delay, 0s); }

/* Parallax layers — transform set inline by JS scroll handler */
[data-parallax] { will-change: transform; }

/* Magnetic buttons — transform set inline by JS on mousemove */
.magnetic { display: inline-flex; will-change: transform; }

/* Headline line-mask reveal (hero) */
.hero-copy h1 .line span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-signal);
}
.hero-copy.is-ready h1 .line span { transform: translateY(0); }
.hero-copy h1 .line:nth-child(1) span { transition-delay: 0.05s; }
.hero-copy h1 .line:nth-child(2) span { transition-delay: 0.16s; }
.hero-copy h1 .line:nth-child(3) span { transition-delay: 0.27s; }

/* Preloader exit */
.preloader.is-done { opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease-soft), visibility 0.6s; }

/* ---- Editorial hero illustration: gentle draw-in + idle drift ---- */
.hero-illustration .ill-line {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: illDraw 1.8s var(--ease-signal) forwards;
}
.hero-illustration .ill-line:nth-of-type(1) { animation-delay: 0.1s; }
.hero-illustration .ill-line:nth-of-type(2) { animation-delay: 0.25s; }
.hero-illustration .ill-line:nth-of-type(3) { animation-delay: 0.4s; }
.hero-illustration .ill-line:nth-of-type(4) { animation-delay: 0.55s; }
.hero-illustration .ill-line:nth-of-type(5) { animation-delay: 0.7s; }
@keyframes illDraw { to { stroke-dashoffset: 0; } }

.hero-illustration .ill-dot {
  animation: illFloat 4.5s ease-in-out infinite;
}
.hero-illustration .ill-dot:nth-of-type(2n) { animation-delay: 0.8s; }
.hero-illustration .ill-dot:nth-of-type(3n) { animation-delay: 1.6s; }

/* Continuous idle breathing motion on the two orbit circles — keeps the
   hero feeling alive even before any scroll/mouse interaction. Uses a
   dedicated .ill-orbit class (rather than element+class targeting) so it
   can't collide with the :nth-of-type animation-delay rules above. */
.hero-illustration .ill-orbit.ill-orbit {
  transform-origin: center;
  animation: illDraw 1.8s var(--ease-signal) forwards, illBreathe 8s ease-in-out infinite 2s;
}
@keyframes illBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes illFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Counting number tick (class swapped by JS during count) */
.stat__number.is-counting { color: var(--c-blue); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-copy h1 .line span { transform: none !important; }
  .hero-illustration .ill-line { animation: none !important; stroke-dashoffset: 0 !important; }
  .hero-illustration .ill-dot { animation: none !important; }
  .marquee__track { animation: none !important; }
}