/* ═══════════════════════════════════════════════════════════
   animations.css — Santangelo Initium
   Scroll reveal + fade + parallax + stagger
═══════════════════════════════════════════════════════════ */

/* ─── Base states (hidden before reveal) ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
  transform-origin: center;
}

/* ─── Revealed state ─── */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Stagger delays ─── */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* ─── Auto stagger for children ─── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger].is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.15s; }
[data-stagger].is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.25s; }
[data-stagger].is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.35s; }
[data-stagger].is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.45s; }
[data-stagger].is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.55s; }
[data-stagger].is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.65s; }
[data-stagger].is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 0.75s; }

/* ─── Parallax wrapper ─── */
[data-parallax] {
  will-change: transform;
}

/* ─── Counter animation ─── */
.si-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Hero entrance (no scroll trigger, fires on load) ─── */
.si-hero__eyebrow,
.si-hero__title,
.si-hero__subtitle,
.si-hero__actions {
  opacity: 0;
  transform: translateY(20px);
  animation: heroEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.si-hero__eyebrow  { animation-delay: 0.1s; }
.si-hero__title    { animation-delay: 0.25s; }
.si-hero__subtitle { animation-delay: 0.45s; }
.si-hero__actions  { animation-delay: 0.65s; }

@keyframes heroEntrance {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─── Metric number pulse ─── */
@keyframes metricPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.si-metric__number.counting {
  animation: metricPulse 0.4s ease-in-out;
}

/* ─── Line draw (for decorative lines) ─── */
.si-line-draw {
  width: 0;
  height: 2px;
  background: var(--si-gold);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.si-line-draw.is-visible {
  width: 100%;
}

/* ─── Gold underline on heading reveal ─── */
.si-section-title::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--si-gold);
  margin-top: 12px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.si-section-title.is-visible::after {
  width: 48px;
}

/* ─── Respects prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="fade"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"],
  [data-stagger] > *,
  .si-hero__eyebrow,
  .si-hero__title,
  .si-hero__subtitle,
  .si-hero__actions {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .si-section-title::after {
    width: 48px;
    transition: none;
  }
}