/*
 * OI intro overlay (intro.js). Geometry is set per frame from JS, a port of
 * the OI emblem (remotion-play/src/oi/EmblemLoop.tsx). Shown only while
 * html.oi-intro is set; the inline <head> script sets it before first paint.
 * The wordmark reuses the nav's .logo-word / .logo-o / .logo-i (styles.css),
 * so the intro ends on exactly the logo it docks into.
 */

#intro { display: none; }

html.oi-intro #intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  cursor: pointer;
  /* Failsafe: if intro.js never runs, uncover the page anyway. */
  animation: oi-intro-failsafe 0.3s ease 10s forwards;
}

/* The real nav logo waits under the overlay until the handoff
   (same failsafe: it comes back on its own if intro.js never runs). */
html.oi-intro .site-nav .logo {
  opacity: 0;
  animation: oi-intro-failsafe-logo 0.3s ease 10s forwards;
}

@keyframes oi-intro-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes oi-intro-failsafe-logo {
  to { opacity: 1; }
}

.intro-bg {
  position: absolute;
  inset: 0;
  background: var(--og-bg);
}

.intro-halo,
.intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-word {
  position: relative;
  will-change: transform, opacity;
}

.intro-word span { opacity: 0; }

/* Only the sliding letters are inline-blocks (transforms need it). The O and
   I stay inline like the nav logo's: an inline box spans the font's ascent
   and descent, which the ink maths in intro.js and the logo gradients in
   styles.css both assume. */
.intro-word .intro-l { display: inline-block; }

/* Offered when the browser blocks sound before a click; restarts with it. */
.intro-sound {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--og-radius-pill);
  border: 1px solid var(--og-line);
  background: var(--og-chip);
  color: var(--og-txt-soft);
  font: 600 0.8rem var(--og-font);
  cursor: pointer;
  animation: intro-sound-in 0.4s ease 0.3s both;
  transition: var(--og-transition);
}

.intro-sound:hover,
.intro-sound:focus-visible {
  border-color: var(--og-accent-line);
  background: var(--og-hl);
  color: var(--og-txt);
}

@keyframes intro-sound-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}