/* CSS-only opening sequence: 0.2s blank, 0.4s entrance, 2s hold, 0.7s exit. */
html.homepage {
  /* Reserve scrollbar width before the reveal to prevent a sideways layout jump. */
  scrollbar-gutter: stable;
  overflow-y: hidden;
  animation: intro-unlock 0s 3.3s forwards;
}
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--section-gradient);
  color: #19293C;
  animation: intro-exit 0.7s 2.6s ease-in-out forwards;
}
.site-intro-text {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 6.5vw, 104px);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  animation: intro-text-enter 0.4s 0.2s ease-out forwards;
}
.site-intro-text span { display: block; white-space: nowrap; }
/* Hide underlying focus targets until the reveal begins. */
.homepage body > header,
.homepage body > main,
.homepage body > footer {
  visibility: hidden;
  animation: intro-content-reveal 0s 2.6s forwards;
}
@keyframes intro-text-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-exit {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes intro-content-reveal { to { visibility: visible; } }
@keyframes intro-unlock { to { overflow-y: auto; } }

/* Explicitly restart on Home navigation, including restored browser pages. */
html.homepage.intro-reset,
.intro-reset .site-intro,
.intro-reset .site-intro-text,
.homepage.intro-reset body > header,
.homepage.intro-reset body > main,
.homepage.intro-reset body > footer { animation: none; }

/* Jump links go directly to their section instead of replaying the intro. */
html.homepage.intro-skip { animation: none; overflow-y: auto; }
.homepage.intro-skip .site-intro { display: none; }
.homepage.intro-skip body > header,
.homepage.intro-skip body > main,
.homepage.intro-skip body > footer { animation: none; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  html.homepage { animation: none; overflow-y: auto; }
  .site-intro { display: none; }
  .homepage body > header,
  .homepage body > main,
  .homepage body > footer { animation: none; visibility: visible; }
}