/* ═══════════════════════════════════════════
   NATALIE SMREKAR — Animations
   ═══════════════════════════════════════════ */

/* ─── Hero subtitle sequential fade ─── */
.hero__subtitle-word,
.hero__subtitle-dot {
  opacity: 0;
  transform: translateY(15px);
  animation: heroWordFade 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--delay) * 0.2s + 0.8s);
}

@keyframes heroWordFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Hero title fade ─── */
.hero__title {
  opacity: 0;
  transform: translateY(20px);
  animation: heroTitleFade 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes heroTitleFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Scroll reveal classes ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal--left {
  transform: translateX(-30px) translateY(0);
}

.reveal--right {
  transform: translateX(30px) translateY(0);
}

.reveal--visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ─── Stagger children ─── */
.reveal[data-stagger] .reveal,
.stagger > .reveal {
  transition-delay: calc(var(--stagger, 0) * 0.1s);
}

/* ─── Language bar fill animation ─── */
.lang-bar__fill--animate {
  width: var(--fill-width) !important;
}

/* ─── Nav overlay link stagger ─── */
.nav__overlay--open .nav__overlay-links li:nth-child(1) .nav__overlay-link { transition-delay: 0.1s; }
.nav__overlay--open .nav__overlay-links li:nth-child(2) .nav__overlay-link { transition-delay: 0.15s; }
.nav__overlay--open .nav__overlay-links li:nth-child(3) .nav__overlay-link { transition-delay: 0.2s; }
.nav__overlay--open .nav__overlay-links li:nth-child(4) .nav__overlay-link { transition-delay: 0.25s; }
.nav__overlay--open .nav__overlay-links li:nth-child(5) .nav__overlay-link { transition-delay: 0.3s; }
.nav__overlay--open .nav__overlay-links li:nth-child(6) .nav__overlay-link { transition-delay: 0.35s; }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hero__subtitle-word,
  .hero__subtitle-dot {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__title {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}