/* Effect: werelden — v0.1.0 (nieuw in djturbeau.com v0.3.0)
   Een wereld is een <dialog class="wereld" id="w-…" style="--kl:…"> met een vaste kop (nummer, titel,
   sluitknop) en een inhoud die zelf scrolt. Desktop: groot venster met een rand in de kleur van het
   vlak; gsm: schermvullend. Groeit open vanuit het aangeklikte vlak (transform-origin via werelden.js).
   Zonder JavaScript: de wereld verschijnt via :target (html zonder .js). Kost: laag. */
.wereld {
  --kl: #39ff90;
  width: min(1120px, calc(100vw - 32px));
  height: min(calc(100svh - 32px), 940px);
  max-width: none; max-height: none;
  margin: auto; padding: 0;
  border: 3px solid var(--kl); border-radius: 18px;
  /* zelfde lijntjes-achtergrond als het Dates-vak vooraan, in de kleur van elk venster (Franky 27-09-2026) */
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--kl) 10%, transparent), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, color-mix(in srgb, var(--kl) 16%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--kl) 7%, transparent) 0 1px, transparent 1px calc(100% / 7)),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--kl) 6%, transparent) 0 1px, transparent 1px 20%),
    color-mix(in srgb, var(--kl) 4%, #07060b);
  color: var(--ink, #f1ecf8);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.9), 0 0 60px -10px color-mix(in srgb, var(--kl) 35%, transparent);
  overflow: hidden;
}
.wereld[open] { display: flex; flex-direction: column; animation: wereld-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes wereld-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.wereld::backdrop { background: rgba(2, 1, 5, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html.wereld-open { overflow: hidden; }

.w-kop {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--kl) 20%, #0e0c14), #0e0c14 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--kl) 30%, transparent);
}
.w-kop .nr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kl); color: #0b0a10; font: 700 12px/1 var(--mono, monospace); font-style: normal; }
.w-kop .w-rond { flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--kl) 70%, transparent), 0 0 18px rgba(255, 90, 0, 0.35); }
.w-kop h2 { margin: 0; font: 400 clamp(22px, 3vw, 30px)/1 var(--display, serif); letter-spacing: 0.01em; }
.w-kop p { margin: 4px 0 0; font: 600 10.5px/1.3 var(--mono, monospace); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--kl) 70%, #fff); }
.w-sluit {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.03); color: #fff; font: 18px/1 var(--sans, sans-serif);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.w-sluit:hover, .w-sluit:focus-visible { border-color: var(--kl); color: var(--kl); background: rgba(255, 255, 255, 0.06); }
.w-inhoud { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px clamp(16px, 4vw, 44px) 44px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--kl) 45%, transparent) transparent; }
.wereld[open] .w-inhoud > * { animation: w-kind-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.wereld[open] .w-inhoud > *:nth-child(2) { animation-delay: 60ms; }
.wereld[open] .w-inhoud > *:nth-child(3) { animation-delay: 120ms; }
.wereld[open] .w-inhoud > *:nth-child(n + 4) { animation-delay: 170ms; }
@keyframes w-kind-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* korte werelden (middelpunt, merch): zo hoog als hun inhoud */
.wereld--compact { width: min(920px, calc(100vw - 32px)); height: fit-content; max-height: calc(100svh - 32px); }
@media (max-width: 767px) {
  .wereld, .wereld--compact { width: 100vw; height: 100svh; max-height: none; border-radius: 0; border-width: 3px 0 0; }
  .w-kop { padding: 10px 10px 10px 12px; gap: 10px; }
  .w-inhoud { padding: 22px 16px 40px; }
}

/* zonder JavaScript: #dates enz. tonen de wereld als gewone laag */
html:not(.js) .wereld:target { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70; }

@media (prefers-reduced-motion: reduce) {
  .wereld[open], .wereld[open] .w-inhoud > * { animation: none; }
}