/* =====================================================================
   SprookjesZorg — intro op de homepage ("De drempel")
   Losse module: zonder dit bestand en intro.js werkt de site gewoon.
   Merkregels: het logo zelf beweegt niet (Logogebruik: geen animatie op
   het logo). Alleen het toneel eromheen: sterren, tekst, het doek dat opgaat.
   Geen verloop, geen gloed, geen schaduw. Rechte hoeken.
   ===================================================================== */

html.sz-intro-open, html.sz-intro-open body { overflow: hidden; }

#sz-intro {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bosgroen, #1b4d3e);
  color: var(--warmwit, #fafaf8);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform 1.05s cubic-bezier(.72,0,.28,1), opacity .4s ease;
  will-change: transform;
}
#sz-intro.is-weg { transform: translateY(-100%); }
/* het logo beweegt niet mee: het toneel vervaagt eerst, daarna gaat het doek op */
.szi-toneel { transition: opacity .35s ease; }
#sz-intro.is-leeg .szi-toneel { opacity: 0; }
#sz-intro:focus { outline: none; }

#sz-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.szi-toneel {
  position: relative; z-index: 1;
  width: min(92vw, 720px);
  max-height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 0;
}

/* het logo staat stil vanaf het eerste beeld; het draagt de payoff zelf, dus die staat er niet nog eens onder */
.szi-logo { width: clamp(200px, 30vh, 300px); height: auto; }

.szi-regels { margin: clamp(18px, 4vh, 40px) 0 0; display: grid; gap: clamp(6px, 1.4vh, 12px); }
.szi-regel {
  font-family: var(--display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(24px, 3.1vh, 28px); line-height: 1.3; /* goud op bosgroen: minimaal 24px (18pt) */
  color: var(--wit, #fff);
  margin: 0;
}
.szi-regel b { font-weight: 400; color: var(--goud, #c8a050); }


.szi-knop {
  margin-top: clamp(22px, 4.6vh, 44px);
  font-family: var(--body, "Nunito Sans", Arial, sans-serif);
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  background: var(--warmwit, #fafaf8); color: var(--bosgroen, #1b4d3e);
  border: 1px solid var(--warmwit, #fafaf8); border-radius: 0;
  padding: 15px 30px; cursor: pointer;
}
.szi-knop:hover { background: transparent; color: var(--warmwit, #fafaf8); }
.szi-knop:focus-visible, .szi-over:focus-visible { outline: 2px solid var(--goud, #c8a050); outline-offset: 4px; }

.szi-over {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  font-family: var(--body, "Nunito Sans", Arial, sans-serif);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: none; border: 0; color: var(--warmwit, #fafaf8); opacity: .85;
  padding: 10px 6px; cursor: pointer;
}
.szi-over:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- tijdlijn ---------- */
.szi-in { opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; }
#sz-intro.speelt .szi-in { opacity: 1; transform: none; }
#sz-intro.speelt .szi-r1   { transition-delay: .8s; }
#sz-intro.speelt .szi-r2   { transition-delay: 1.9s; }
#sz-intro.speelt .szi-knop { transition-delay: 3.2s; }

/* wie de knop al gebruikt vóór het einde: alles meteen tonen */
#sz-intro.is-klaar .szi-in { transition-delay: 0s !important; }

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  #sz-intro { transition: opacity .25s ease; }
  #sz-intro.is-weg { transform: none; opacity: 0; }
  .szi-in, #sz-intro.speelt .szi-in { opacity: 1; transform: none; transition: none; }
}

/* lage schermen (telefoon dwars) */
/* Het volledige logo blijft minimaal 200px (Logogebruik); bij te weinig hoogte
   vallen de twee regels weg in plaats van dat het logo krimpt. */
@media (max-height: 560px) {
  .szi-logo { width: 200px; }
  .szi-regels { display: none; }
  .szi-knop { margin-top: 14px; padding: 11px 22px; }
}