/* A single, finite opening: copy, drifting mist, then the fully readable site. */
.opening-intro { display: none; }
html.intro-pending, html.intro-playing,
html.intro-pending body, html.intro-playing body { overflow: hidden; }
html.intro-pending .opening-intro,
html.intro-playing .opening-intro {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 100;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
}
.intro-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, #f4faff 0%, #e0f0fa 55%, #d0e6f4 100%);
}
.intro-mist {
  position: absolute;
  inset: -12% -8%;
  pointer-events: none;
  opacity: 0;
  background: url('assets/mist-feather.svg') center / 100% 100% no-repeat;
  will-change: transform, opacity;
}
.intro-mist-near { transform: translate3d(-2%, -12%, 0) scale(1.03); }
.intro-jets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.intro-jet {
  --jet-height: clamp(260px, 36vw, 520px);
  --source-depth: clamp(180px, 28svh, 360px);
  position: absolute;
  left: -12vw;
  /* Keep the narrow source at least 180px BELOW the viewport at every size. */
  bottom: calc(var(--jet-height) * -.5 - var(--source-depth));
  width: min(150vw, 210svh);
  height: var(--jet-height);
  pointer-events: none;
  transform-origin: 0 50%;
  transform: rotate(-42deg);
}
.intro-jet-right { left: auto; right: -12vw; transform: translateX(100%) rotate(-138deg); }
.intro-jet-plume {
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url('assets/mist-jet.svg') center / 100% 100% no-repeat;
  transform-origin: 0 50%;
  will-change: transform, opacity;
}
/* Copy clears at 3.834s, followed by a 2.8s spray and a 2.4s falling tail. */
html.intro-playing .intro-jet-left .intro-jet-plume { animation: intro-jet-spray 5.2s 3.95s both; }
html.intro-playing .intro-jet-right .intro-jet-plume { animation: intro-jet-spray 5.2s 4.03s both; }
html.intro-playing .intro-jets { animation: intro-jets-settle 9.6s both; }
@keyframes intro-jet-spray {
  0% { opacity: 0; transform: scale(.08, .18); }
  6% { opacity: .95; }
  14% { opacity: 1; transform: scale(1, .75); }
  32% { opacity: .9; transform: translate3d(3%, 0, 0) scale(1.08, 1.15); }
  54% { opacity: .68; transform: translate3d(3%, 0, 0) scale(1.1, 1.4); }
  75% { opacity: .33; transform: translate3d(3%, 0, 0) scale(1.11, 1.85); }
  100% { opacity: 0; transform: translate3d(3%, 0, 0) scale(1.12, 2.15); }
}
@keyframes intro-jets-settle {
  0%, 64% { transform: translate3d(0, 0, 0); }
  75% { transform: translate3d(0, 3svh, 0); }
  86% { transform: translate3d(0, 10svh, 0); }
  100% { transform: translate3d(0, 23svh, 0); }
}
.intro-skip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intro-skip:focus-visible { outline-offset: -16px; }
.intro-copy {
  display: block;
  font-family: var(--serif);
  font-size: clamp(27px, 3.05vw, 48px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: .16em;
  text-align: center;
  text-shadow: 0 0 30px #fff9;
  opacity: 0;
}
.intro-copy > span { display: inline-block; white-space: nowrap; }
.intro-keyboard-hint {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  font-size: 11px;
  letter-spacing: .15em;
  opacity: 0;
}
.intro-skip:focus-visible .intro-keyboard-hint { opacity: 1; }
html.intro-pending .site-header, html.intro-pending .hero { opacity: 0; }
html.intro-playing .intro-copy { animation: intro-copy-dissolve 5.4s both; }
html.intro-playing .intro-veil { animation: intro-veil-clear 7s both; }
html.intro-playing .intro-mist-near { animation: intro-mist-near 9.6s both; }
html.intro-playing .site-header { animation: intro-site-appear 7s both; }
html.intro-playing .hero { animation: intro-hero-appear 7s both; }
@keyframes intro-copy-dissolve {
  0% { opacity: 0; filter: blur(5px); transform: translateY(7px); }
  17%, 49% { opacity: 1; filter: blur(0); transform: translateY(0); }
  71%, 100% { opacity: 0; filter: blur(10px); transform: translateY(-8px); }
}
@keyframes intro-veil-clear {
  0%, 56% { opacity: 1; }
  63% { opacity: .3; }
  78% { opacity: .1; }
  100% { opacity: 0; }
}
@keyframes intro-mist-near {
  0%, 61% { opacity: 0; transform: translate3d(-2%, -12%, 0) scale(1.03); }
  70% { opacity: .28; transform: translate3d(-2%, -5%, 0) scale(1.08); }
  84% { opacity: .2; transform: translate3d(1%, 9%, 0) scale(1.12); }
  100% { opacity: 0; transform: translate3d(3%, 26%, 0) scale(1.18); }
}
@keyframes intro-site-appear {
  0%, 56% { opacity: 0; }
  75% { opacity: .55; }
  100% { opacity: 1; }
}
@keyframes intro-hero-appear {
  0%, 56% { opacity: 0; }
  75% { opacity: .65; }
  100% { opacity: 1; }
}
@media (max-width: 700px), (max-width: 1024px) and (pointer: coarse) {
  .intro-jet { left: -30vw; width: 195vw; transform: rotate(-60deg); }
  .intro-jet-right { left: auto; right: -30vw; transform: translateX(100%) rotate(-120deg); }
  .intro-copy {
    /* Source order reads down the right column, then down the left column. */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(24px, 6.5vw, 32px);
    letter-spacing: .22em;
    line-height: 2.25;
    text-align: start;
  }
  .intro-copy > span { display: block; }
  .intro-copy > span:last-child { padding-top: 2.3em; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .intro-copy { font-size: 23px; letter-spacing: .15em; }
  .intro-copy > span:last-child { padding-top: 1.5em; }
}
@media (max-width: 700px) and (max-height: 430px), (max-width: 1024px) and (max-height: 430px) and (pointer: coarse) {
  .intro-copy { font-size: clamp(13px, 3.5svh, 18px); letter-spacing: .1em; }
  .intro-copy > span:last-child { padding-top: 1em; }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-playing .intro-copy { opacity: 1; filter: none; transform: none; }
  html.intro-playing .intro-mist { display: none; }
  html.intro-playing .intro-jet { display: none; }
  html.intro-playing .site-header, html.intro-playing .hero { opacity: 0; filter: none; }
}