/* podium.css · De laag van het podium (zie podium.js), gedeeld door
   keuzehulp.html en ai-geletterdheidscheck.html. Hier alleen de laag zelf,
   de knoppen rechtsboven en de regel in de hero; hoe de kaart er op het
   podium uitziet (.is-staged) staat in keuzehulp.css en check.css. */

/* Desktop: de pagina erachter staat stil. Op telefoon en tablet niet: op iOS
   dwingt overflow:hidden op html een herlayout van de hele pagina af, precies
   op het moment dat het podium opent; daar vangt podium.js de veeg op. */
@media (min-width: 761px) and (hover: hover) {
  html.pd-open { overflow: hidden; }
}

/* Boven de nav (100) en de mobiele balk (1100), onder de cookievraag (1200). */
.pd-layer {
  position: fixed;
  inset: 0;
  z-index: 1150;
  color: var(--ink);
}
.pd-layer[hidden] { display: none; }
/* De pagina's verbergen met [hidden] binnen hun eigen sectie (#check
   [hidden] { display: none !important }); op het podium valt de kaart
   daarbuiten, dus hier nog een keer. */
.pd-layer [hidden] { display: none !important; }
.pd-back,
.pd-surface,
.pd-stage { position: absolute; inset: 0; }

.pd-back {
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Het podium zelf: matglas met de gloed van de site erin. Begint als de
   kaart (clip-path op zijn plek) en groeit uit tot het hele scherm. */
.pd-surface {
  background:
    radial-gradient(55% 45% at 12% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 72%),
    radial-gradient(50% 55% at 100% 100%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(44px) saturate(170%);
  backdrop-filter: blur(44px) saturate(170%);
  will-change: clip-path;
}
.pd-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 128px 24px 80px;
}
/* margin auto centreert, en valt veilig terug naar boven als de inhoud
   hoger is dan het scherm (place-items: center knipt dan de bovenkant af). */
.pd-stage > .is-staged { margin: auto 0; }

/* Op het podium is de kaart geen glaskaart meer: het podium is het
   materiaal. !important omdat .glass, .glass--glow en .reveal anders winnen. */
.pd-layer .is-staged {
  position: static !important;
  isolation: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  max-width: none !important;
}
.pd-layer .is-staged::before,
.pd-layer .is-staged::after { display: none; }
/* .reveal.is-in zet blur(0): dat maakt de kaart een containing block en dan
   schuiven de knoppen bovenin mee. De kopie die bij het sluiten wegkrimpt
   mag wel bewegen. */
.pd-layer .is-staged:not(.pd-ghost) {
  transform: none !important;
  filter: none !important;
}
.pd-ghost { pointer-events: none; }

/* ---------- Rechtsboven: sluiten, en daaronder opnieuw beginnen ----------
   Een capsule die zegt wat hij doet, zodat de uitslag geen doodlopende weg
   is: je kunt hem gewoon wegzetten en verder lezen. */
.pd-ctl {
  position: absolute;
  z-index: 5;
  top: 26px;
  right: clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.pd-close,
.pd-again {
  pointer-events: auto;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.94);
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-spring),
    visibility 0s linear 0.35s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pd-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pd-close__x {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  transition: transform 0.4s var(--ease-spring);
}
.pd-close__x svg { width: 14px; height: 14px; }
.pd-close:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.pd-close:hover .pd-close__x { transform: rotate(90deg); }
.pd-close:focus-visible,
.pd-again:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pd-again {
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}
.pd-again:hover { color: var(--ink); }
.pd-layer.can-close .pd-close,
.pd-layer.is-result .pd-again {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.25s, 0.25s, 0s, 0s, 0s, 0s;
}
.pd-layer.can-close .pd-close:active { transform: scale(0.97); }

/* ---------- De regel onder de eerste vraag in de hero ---------- */
.pd-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: none;
  margin: 1.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
  transition: opacity 0.3s var(--ease-out);
}
.pd-hint svg { flex: none; width: 15px; height: 15px; color: var(--accent-deep); }
[data-theme="light"] .pd-hint svg { color: #1f7fe0; }
.pd-hint.is-off { opacity: 0; }
.is-staged .pd-hint { display: none; }

@media (max-width: 760px) {
  .pd-stage { padding: 96px 16px 40px; }
  .pd-ctl { top: 16px; }
  .pd-close { height: 44px; padding-right: 16px; }
}

/* Telefoon en tablet (1 okt 2026): het matglas haperde daar bij het openen.
   Een blur van 44px over het hele scherm, elk frame opnieuw, want de
   aurora (body::before) en de puls op de spine liepen erachter door. Hier
   dus een dicht podium zonder backdrop-filter (zonder blur schemerde de
   hero-kop er zelfs bij 97% nog doorheen), en wat achter het
   podium beweegt staat stil zolang het open is. Desktop blijft zoals hij is. */
@media (max-width: 760px), (hover: none) {
  .pd-back {
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .pd-surface {
    background:
      radial-gradient(70% 40% at 10% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 72%),
      radial-gradient(70% 45% at 100% 100%, color-mix(in srgb, var(--accent-3) 14%, transparent), transparent 72%),
      var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.pd-open body::before,
  html.pd-open .spine__node::after { animation-play-state: paused; }
  /* De opening (podium.js grow) is alleen transform en opacity. Het vlak
     draagt tijdens het groeien de ronding van de kaart (--pd-rad); daarna
     weg, anders zie je op een hoekig scherm de hoeken van het podium. */
  .pd-surface { will-change: transform; }
  .pd-surface.is-growing { border-radius: var(--pd-rad, 28px); }
  /* geen glas op de sluitknop: een backdrop-filter boven een bewegende laag
     bemonstert op iOS elk frame het hele scherm opnieuw */
  .pd-close {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--ink) 12%, var(--bg));
  }
  /* Tot het eerste frame getekend is staat alles stil (podium.js grow):
     anders is de intocht van de vraag al klaar voordat iemand iets zag. */
  .pd-layer.is-pending .is-staged,
  .pd-layer.is-pending .is-staged * { animation-play-state: paused !important; }
  /* Spookkopie van de hero-kaart tijdens het openen (podium.js heroGhost):
     op de plek van de kaart, zonder glas, groeit mee en vervaagt. */
  .pd-ghost-hero {
    position: absolute !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: hidden !important;
    pointer-events: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transition: none !important;
    will-change: transform, opacity;
  }
  .pd-ghost-hero::before,
  .pd-ghost-hero::after { display: none !important; }
  .pd-ghost-hero * { transition: none !important; animation: none !important; }
  /* Voorverwarmen kort na het laden (podium.js warm): één keer onzichtbaar
     tekenen, zodat de eerste echte opening niet op het aanmaken van de
     lagen hoeft te wachten. */
  .pd-layer.is-warm { opacity: 0.01; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-close,
  .pd-again,
  .pd-close__x,
  .pd-hint { transition: none; }
}