/* The home page intro (intro.js). The page is covered from the first paint
   while the intro runs, then the cover fades and the hero's words and the
   header rise into place. The hero art does not move: the bird lands on its
   flag's dot, so that dot has to stay exactly where it was drawn. */

html.intro-on { overflow: hidden; }
html.intro-on::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000;
  background: var(--bg);
}

.intro {
  position: fixed; inset: 0; z-index: 2147483001;
  background: var(--bg);
  transition: opacity 1.1s ease;
}
.intro canvas { display: block; width: 100%; height: 100%; }
.intro--out { opacity: 0; pointer-events: none; }
.intro--quick { transition-duration: 0.3s; }

/* The three lines, in the upper third, clear of the hover and the landing. */
.intro__words {
  position: absolute; left: 0; right: 0; top: 18vh; padding: 0 1.5rem;
  text-align: center; pointer-events: none;
}
.intro__line {
  position: absolute; left: 0; right: 0; margin: 0; padding: 0 1.5rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(1.75rem, 4.2vw, 3.25rem); line-height: 1.1; color: var(--ink-strong);
  text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.intro__line.is-on { opacity: 1; transform: none; }

.intro__skip {
  position: absolute; right: 1rem; bottom: 1rem; min-height: 44px;
  padding: 0.625rem 1.125rem; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600;
  color: var(--ink-muted); background: var(--bg-elevated);
  border: 1px solid var(--border); cursor: pointer;
}
.intro__skip:hover { color: var(--brand); border-color: var(--brand-edge); }
.intro__skip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.intro-reveal .nav,
.intro-reveal .hero2__copy > * { animation: intro-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.intro-reveal .hero2__copy > :nth-child(2) { animation-delay: 0.08s; }
.intro-reveal .hero2__copy > :nth-child(3) { animation-delay: 0.16s; }
.intro-reveal .hero2__copy > :nth-child(4) { animation-delay: 0.24s; }
.intro-reveal .hero2__copy > :nth-child(n+5) { animation-delay: 0.32s; }
.intro-reveal .nav { animation-delay: 0.4s; }
.intro-reveal .flight__path { animation: intro-draw 1.2s ease both; }

@keyframes intro-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-draw { from { stroke-opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro-reveal * { animation: none !important; transition: none !important; }
}