/* Intro van OVCN Wat zie ik? (zie public/js/intro.js) */
.intro {
  --geel: #f9a800;
  --donkerblauw: #1f3855;
  --lijn-y: 42%;                                   /* hoogte van de lijn op het scherm */
  --teken-h: clamp(96px, 17vh, 170px);             /* hoogte van pandje en molen */
  --logo-h: clamp(46px, 11vw, 84px);
  position: fixed;
  inset: 0;
  background: var(--geel);
  overflow: hidden;
  touch-action: manipulation;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--donkerblauw);
}
@media (max-height: 520px) {                       /* telefoon liggend */
  .intro { --lijn-y: 28%; --teken-h: clamp(64px, 20vh, 100px); --logo-h: 42px; }
}

.intro-strook { position: absolute; left: 0; top: var(--lijn-y); width: 0; height: 0; will-change: transform; }
.intro-strook svg { position: absolute; left: 0; overflow: visible; }
.intro-strook path { fill: none; stroke: var(--donkerblauw); stroke-width: 6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

.intro-logo { position: absolute; }
.intro-logo img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; will-change: transform; }

/* Zonnegloed achter het logo: zachte kern plus subtiele stralen */
.intro-gloed {
  position: absolute;
  left: -40%;
  width: 180%;
  aspect-ratio: 1;
  top: 50%;
  margin-top: -90%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 210, 0.75) 22%, rgba(255, 240, 180, 0.25) 45%, rgba(255, 236, 170, 0) 65%);
}
.intro-gloed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.45) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
  mask: radial-gradient(circle, #000 18%, transparent 62%);
}

.intro-eind {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(var(--lijn-y) + var(--logo-h) / 2 + 3.5vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}
.intro-titel { margin: 0; font-size: clamp(2.1rem, 9vw, 3.6rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.intro-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 24rem;
  min-height: 62px;
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--donkerblauw);
  color: var(--geel);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 56, 85, 0.25);
}
.intro-knop:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.intro-privacy, .intro-tekst { margin: 0; max-width: 24rem; font-size: 0.95rem; line-height: 1.45; }
.intro-tekst { font-size: 1.05rem; }
.intro-tekst strong { display: block; font-size: 1.25rem; margin-bottom: 0.3rem; }
@media (max-height: 520px) {
  .intro-eind { gap: 0.5rem; top: calc(var(--lijn-y) + var(--logo-h) / 2 + 12px); }
  .intro-titel { font-size: 2rem; }
  .intro-knop { min-height: 52px; }
}

/* Vóór de start van het script: alleen het gele vlak, zodat er niets "flitst" */
.js .intro:not(.intro-gestart) .intro-strook,
.js .intro:not(.intro-gestart) [data-intro-eind] { opacity: 0; }

.intro-opnieuw {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 2px solid var(--donkerblauw, #1f3855);
  border-radius: 999px;
  background: #fff;
  color: #1f3855;
  font: 700 0.95rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}