/* Alleen index.html laadt deze optionele intro. Zonder JS blijft hij verborgen. */
.logo-intro[hidden] { display: none; }

/* Vóór de eerste paint aangezet; de JS-watchdog verwijdert dit bij fouten. */
html.intro-pending::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #f7f2eb;
}

html.intro-active .site-header .brand__mark svg { visibility: hidden; }
html.intro-active.intro-landing .site-header .brand__mark svg { visibility: visible; }

.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 1001;
  isolation: isolate;
  touch-action: none;
}

.logo-intro__backdrop {
  position: absolute;
  inset: 0;
  background: #f7f2eb;
  will-change: opacity;
}

.logo-intro__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(128px, 22vw, 216px);
  aspect-ratio: 1;
  transform-origin: 50% 50%;
}

.logo-intro__logo svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  html.intro-pending::before,
  .logo-intro { display: none; }
  html.intro-active .site-header .brand__mark svg { visibility: visible; }
}