/* ============================================================
   ANIMATIONS — scroll reveal, hover, keyframes
   ============================================================ */

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-fade {
  opacity: 0;
  transition: opacity .75s ease;
}
.reveal-fade.is-visible { opacity: 1; }

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger groups — JS sets delay via inline style */
.reveal-group .reveal { transition-delay: inherit; }

/* ── Hero entrance ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleReveal {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-text-animate > * {
  animation: fadeUp .7s cubic-bezier(.4,0,.2,1) both;
}
.hero-text-animate > *:nth-child(1) { animation-delay: .08s; }
.hero-text-animate > *:nth-child(2) { animation-delay: .18s; }
.hero-text-animate > *:nth-child(3) { animation-delay: .28s; }
.hero-text-animate > *:nth-child(4) { animation-delay: .38s; }
.hero-text-animate > *:nth-child(5) { animation-delay: .48s; }

.hero-media-animate {
  animation: scaleReveal .9s cubic-bezier(.4,0,.2,1) .12s both;
}

/* ── Underline slide (for links) ─────────────────────────── */
.link-slide {
  position: relative;
  display: inline-block;
}
.link-slide::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base);
}
.link-slide:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-fade, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}