/* Intro overlay — shown only when intro-gate.js adds .intro-active to <html> (never without JS). */

.intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--gutter);
  background-color: var(--color-paper);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

html.intro-active {
  overflow: hidden;
}

html.intro-active .intro {
  display: flex;
}

.intro.is-leaving {
  opacity: 0;
  transform: translateY(-32px);
  pointer-events: none;
}

.intro__stage {
  position: relative;
  width: min(100%, 880px);
  aspect-ratio: 2 / 1;
}

.intro__lines,
.intro__render {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro__lines {
  visibility: hidden;
  transition: opacity 800ms var(--ease);
}

.intro__lines.is-ready {
  visibility: visible;
}

.intro__lines svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.intro__render {
  object-fit: contain;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.intro.is-rendering .intro__lines {
  opacity: 0;
}

.intro.is-rendering .intro__render {
  opacity: 1;
  transform: none;
}

.intro__caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  opacity: 0;
  animation: intro-fade 600ms var(--ease) 300ms forwards;
}

/* Per-shape animations (classes and timing variables are set by intro.js) */
.intro-draw {
  animation: intro-draw var(--intro-dur, 800ms) var(--ease) var(--intro-delay, 0ms) forwards;
}

.intro-fade {
  opacity: 0;
  animation: intro-fade 400ms var(--ease) var(--intro-delay, 0ms) forwards;
}

@keyframes intro-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes intro-fade {
  to { opacity: 1; }
}

/* Reduced motion: the line drawing and fades still play (no large movement),
   but the slide and scale transforms are dropped. */
.intro.is-reduced .intro__render,
.intro.is-reduced.is-leaving {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Undo the site-wide "kill all animations" rule from base.css for the intro only */
  .intro .intro-draw {
    animation-duration: var(--intro-dur, 800ms) !important;
  }

  .intro .intro-fade {
    animation-duration: 400ms !important;
  }

  .intro .intro__caption {
    animation-duration: 600ms !important;
  }

  .intro,
  .intro .intro__lines,
  .intro .intro__render {
    transition-duration: 800ms !important;
  }

  .intro {
    transition-duration: 500ms !important;
  }
}