/* ============================================================================
   INTRO — the page-load title card. Storyboard: docs/Storyboards/ (Roswell
   Revisited, 1975).

   The white frame is painted by an INLINE style on #intro in index.html, so
   it is on screen with the first paint — before this sheet, before the
   fonts, before anything. Everything after that first white frame is
   hero-intro.js driving these classes. The card exists to buy the hero
   plates decode time: by the time the black dissolves, the diorama under it
   is already alive.

   THE CARD IS THE SITE'S, NOT THE THEME'S. It is the one thing that looks
   identical whichever theme loads: pure white, pure black, white type in
   Fraunces and Public Sans. Nothing in here reads a theme token, and no
   theme sheet may override it — index.html loads the two faces for every
   theme so the card never falls back to the theme's display font.
   ========================================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;              /* above nav, above everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background: #fff;
  transition: background-color 0.7s ease;
  /* PASS-THROUGH, always. The card is a picture, not a wall: the pointer
     reaches the diorama underneath for the whole show, so the camera is
     already tracking the cursor when the black dissolves — no lurch on
     the handoff. (The skip listens on the document instead.) */
  pointer-events: none;
}
.intro.is-black { background-color: #000; }
/* THE REVEAL: the black and the type fade OUT TOGETHER (the type's fade is
   driven from hero-intro.js so it overrides the fly-in's finished state)
   and end on the same beat. */
.intro.is-reveal { background-color: transparent; }
.intro.is-done { opacity: 0; transition: opacity 0.4s ease; }

.intro__word {
  margin: 0;
  color: #fff;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  /* The two halves land a beat apart — frame 6 of the storyboard. */
}
.intro__word span {
  display: inline-block;
  opacity: 0;
  will-change: transform, filter, opacity;
}

.intro__sub {
  margin: 0;
  color: #fff;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: clamp(0.875rem, 1.1vw, 0.9rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;       /* recentres tracked-out caps */
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity, letter-spacing;
}

/* No JS = no sequence: the card must never wall off the site. */
.no-js .intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { transition: none; }
  .intro.is-done { transition: opacity 0.3s ease; }
}