/* JDL Portal · opening
   Korte merkintro (ongeveer 3,5 seconde), één keer per sessie. Aansturing in opening.js.
   Volgorde: de lus tekent zich, de Tik-stip springt in de opening, loopt één rondje,
   het woordmerk schuift omhoog, de drie onderdelen komen binnen, dan veegt het scherm weg.
   Kleuren, easing en lettertype komen uit tokens.css, dus dag en nacht werken vanzelf. */

.opening { display: none; }

/* thema.js zet html.opening-bezig vóór de eerste weergave, alleen als de intro mag spelen
   (niet bij verminderde beweging, niet als hij deze sessie al is gezien). */
html.opening-bezig .opening {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: var(--ruimte-l) var(--rand-gutter);
  background: var(--kleur-bg); color: var(--kleur-tekst);
  clip-path: inset(0 0 0 0);
  touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}

.opening-binnen { display: grid; justify-items: center; gap: var(--ruimte-m); text-align: center; }

.opening-lus { width: clamp(150px, 38vw, 260px); height: auto; overflow: visible; margin-bottom: var(--ruimte-xs); }
.opening-ring { fill: none; stroke: var(--kleur-tekst); stroke-width: 3; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.opening-stip { fill: var(--kleur-stip); transform-box: fill-box; transform-origin: center; transform: scale(0); }

.opening-merk { margin: 0; overflow: hidden; padding-bottom: 0.1em; font-size: var(--tekst-xl); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.opening-merk-in { display: block; transform: translateY(115%); }

.opening-modules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ruimte-xs) var(--ruimte-m); font-size: var(--tekst-s); font-weight: 600; color: var(--kleur-tekst-zacht); }
.opening-modules li { display: inline-flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(12px); }
.opening-modules svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- spelen ---------- */
.opening.speelt .opening-ring { animation: opening-teken 1000ms var(--ease-uit) 150ms both; }
.opening.speelt .opening-stip { animation: opening-stip 460ms var(--ease-veer) 1100ms both; }
.opening.speelt .opening-merk-in { animation: opening-merk 560ms var(--ease-uit) 1650ms both; }
.opening.speelt .opening-modules li { animation: opening-module 480ms var(--ease-uit) both; }
.opening.speelt .opening-modules li:nth-child(1) { animation-delay: 2000ms; }
.opening.speelt .opening-modules li:nth-child(2) { animation-delay: 2090ms; }
.opening.speelt .opening-modules li:nth-child(3) { animation-delay: 2180ms; }
@keyframes opening-teken { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes opening-stip { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes opening-merk { from { transform: translateY(115%); } to { transform: none; } }
@keyframes opening-module { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- weg: het scherm veegt omhoog en laat de portal zien ----------
   Let op: de selectors beginnen bij html.opening-bezig, anders wint de basisregel hierboven op specificiteit. */
html.opening-bezig .opening.weg { pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path 480ms var(--ease-uit); }
html.opening-bezig .opening.weg .opening-binnen { opacity: 0; transform: translateY(-24px); transition: opacity 300ms var(--ease-in), transform 480ms var(--ease-uit); }
html.opening-bezig .opening.weg.snel { transition-duration: 260ms; }
html.opening-bezig .opening.weg.snel .opening-binnen { transition-duration: 180ms, 260ms; }

/* Noodrem: als opening.js om welke reden dan ook niet laadt, verdwijnt de laag na 6 seconden vanzelf. */
html.opening-bezig .opening.speelt { animation: opening-nood 1ms linear 6s forwards; }
@keyframes opening-nood { to { visibility: hidden; pointer-events: none; } }

/* Bij verminderde beweging speelt de intro niet; dan ook geen knop om hem af te spelen. */
@media (prefers-reduced-motion: reduce) { #opening-opnieuw { display: none; } }