/* =====================================================================
   SEGNO STUDIO — Animations
   Scroll reveals, keyframes, header, arrows.
   All motion is gated behind prefers-reduced-motion.
   ===================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes segno-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes segno-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- Reveal system (IntersectionObserver toggles .is-visible) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Clip-reveal for images */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal="clip"].is-visible { clip-path: inset(0 0 0 0); }

[data-reveal="clip"] img,
[data-reveal="clip"] .mock {
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-out);
}
[data-reveal="clip"].is-visible img,
[data-reveal="clip"].is-visible .mock { transform: scale(1); }

/* Staggered children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.13s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.29s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.37s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.45s; }

/* Word-by-word headline reveal */
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span {
  display: block;
  transform: translateY(102%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
.reveal-lines.is-visible .line > span { transform: translateY(0); }
.reveal-lines .line:nth-child(2) > span { transition-delay: 0.09s; }
.reveal-lines .line:nth-child(3) > span { transition-delay: 0.18s; }

/* Hairline that draws itself in */
.rule-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
}
.rule-draw.is-visible { transform: scaleX(1); }

/* Subtle parallax hook (JS sets --parallax) */
[data-parallax] { transform: translate3d(0, var(--parallax, 0), 0); }

/* Reduced motion — disable everything decorative */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-stagger] > *,
  .reveal-lines .line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .timeline-h__track { width: 100% !important; transition: none !important; }
  .btn__spinner { animation: none !important; }
}