#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

#intro-overlay.fading-out { opacity: 0; }

#intro-svg {
  width: min(80vw, 70vh);
  height: auto;
  overflow: visible;
  /* Optical centering. Stroke-length-weighted centroid sits ~40 viewBox-x
     and ~14 viewBox-y left/above the bbox center, so without this shift the
     figure reads left of center during the dominant draw phase. Recompute
     if the polygon coordinates change. */
  transform: translate(9.5%, 4.5%);
}

/* Bloom fades via JS inline transition */
#intro-bloom-rect {
  transition: opacity 1.2s ease-out;
}

/* Lines: dashoffset animated via JS inline transition */
#intro-strokes line {
  transition: stroke-dashoffset 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fill polygons: animated via JS inline transition */
#intro-outer-fill,
#intro-inner-fill {
  transition: fill-opacity 0.45s ease-in-out;
}

/* Glow pulse during stroke-drawing phase */
@keyframes intro-glow-pulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}
#intro-strokes { animation: intro-glow-pulse 1.8s ease-in-out infinite; }

/* Suppress landing fadeUp animations while intro plays */
body.intro-active .site-name-wrap,
body.intro-active .nav-item {
  animation: none;
  opacity: 0;
}

/* Hide overlay before first paint when intro will be skipped */
html.intro-skip #intro-overlay { display: none; }

/* CSS fallback — hide overlay immediately if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none; }
}