/* Homepage intro overlay — dark green splash that resolves into the hero.
   The intro mirrors the hero structure (.hero__content with .hero__title +
   .hero__subtitle + .hero__buttons), but the subtitle and buttons are hidden
   via visibility:hidden so they preserve layout space while staying invisible.
   This guarantees the title sits at the exact same Y position as the real
   hero title once the overlay fades out. */
.intro {
  position: fixed;
  inset: 0;
  background-color: #333d29;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: opacity 800ms ease;
}

.intro.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* Title scales up from 0.72 to 1.0 — final state matches .hero__title exactly. */
.intro .hero__title {
  transform: scale(0.72);
  transform-origin: center center;
  animation: intro-title-scale 2600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Words fade in left-to-right with 200ms stagger ("written" effect).
   Kept as inline (not inline-block) so the title wraps identically to the
   plain-text .hero__title in the real hero — important on mobile where the
   title may wrap to two lines. */
.intro__word {
  opacity: 0;
  animation: intro-word 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.intro__word--w1 { animation-delay: 240ms; }
.intro__word--w2 { animation-delay: 440ms; }
.intro__word--w3 { animation-delay: 640ms; }

/* Subtitle and buttons are invisible but occupy layout space so the
   title's vertical position is identical to the hero. */
.intro .hero__subtitle,
.intro .hero__buttons {
  visibility: hidden;
  pointer-events: none;
}

/* Maienholz wordmark at bottom — fades in shortly after the last word. */
.intro__brand {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-white);
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  animation: intro-brand 2600ms ease forwards;
}

@keyframes intro-title-scale {
  0%   { transform: scale(0.72); }
  58%  { transform: scale(0.72); }
  100% { transform: scale(1); }
}

@keyframes intro-word {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes intro-brand {
  0%   { opacity: 0; }
  42%  { opacity: 0; }
  54%  { opacity: 0.85; }
  100% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}