/* ============================================================================
   Proef "Licht atelier", poging 2 (volledige pagina). Enkel voor website/proeven/atelier.html,
   bovenop /css/style.css. Je eigen product in beeld (zoals Stripe), grote glazen panelen
   (zoals craft.do), kleurverloop dat doorloopt en kamers per blok (zoals Mercury).
   Geen eigen kleurcodes: enkel merktokens en mengsels ervan.
   ============================================================================ */

.atelier {
  --paneel-glas: color-mix(in srgb, var(--kaart) 60%, transparent);
  --paneel-blur: blur(24px) saturate(160%);
  --paneel-schaduw: 0 2px 6px color-mix(in srgb, var(--inkt) 6%, transparent), 0 40px 80px -32px color-mix(in srgb, var(--inkt) 38%, transparent);
}
.atelier .blok { padding: clamp(80px, 11vw, 144px) 0; }

/* ---------- Kamers: elk blok een eigen lichte grond, zacht in elkaar overlopend ---------- */
.atelier .kamer { isolation: isolate; }
.atelier .kamer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
}
.atelier .kamer--oker::before {
  background:
    radial-gradient(60% 50% at 85% 20%, color-mix(in srgb, var(--oker-zacht) 95%, transparent), transparent 70%),
    radial-gradient(50% 40% at 10% 85%, color-mix(in srgb, var(--oker-zacht) 80%, transparent), transparent 70%),
    color-mix(in srgb, var(--oker-zacht) 40%, var(--papier));
}
.atelier .kamer--petrol::before {
  background:
    radial-gradient(55% 60% at 10% 30%, color-mix(in srgb, var(--inkt) 16%, transparent), transparent 70%),
    radial-gradient(45% 55% at 95% 75%, color-mix(in srgb, var(--oker) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--inkt) 5%, var(--papier));
}
.atelier .kamer--licht::before {
  background:
    radial-gradient(50% 42% at 12% 18%, color-mix(in srgb, var(--inkt) 8%, transparent), transparent 70%),
    radial-gradient(42% 38% at 92% 78%, color-mix(in srgb, var(--oker-zacht) 90%, transparent), transparent 70%),
    color-mix(in srgb, var(--kaart) 60%, var(--papier));
}
.atelier .kamer h2 em { color: var(--oker-diep); }

/* ---------- Verloopband (zoals de hero): loopt door in Hoe het werkt en Gratis proberen ---------- */
.atelier .band { isolation: isolate; overflow: hidden; }
/* Zachte randen boven en onder met een laag OVER de vlekken. Een mask-image werkte niet op de
   bewegende vlekken (eigen laag in de browser): die stopten bovenaan met een harde lijn. */
.atelier .verloop--band { background: var(--papier); --band-boven: var(--papier); --band-onder: var(--papier); }
.atelier .verloop--band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--band-boven) 0, transparent 240px, transparent calc(100% - 240px), var(--band-onder) 100%);
}
/* Gratis proberen: de luifel hangt bovenaan het blok (absoluut, zie .luifel in style.css), het verloop
   begint eronder; onderaan loopt het blok zacht over in papier, want de vragen staan eronder. */
.atelier .proberen { background: linear-gradient(180deg, var(--papier-diep) 0, var(--papier-diep) calc(100% - 140px), var(--papier) 100%); }
.atelier .proberen .verloop--band { background: var(--papier-diep); top: 32px; --band-boven: var(--papier-diep); }
.atelier .proberen .luifel { z-index: 2; }
.atelier .band h2 em { color: var(--oker-diep); }

/* ---------- Productscènes: echte schermen van ReviewMerci in glas ---------- */
.atelier .scene { position: relative; }
.atelier .scene-label {
  position: absolute; z-index: 3; padding: 4px 12px; border-radius: var(--radius-pil);
  background: var(--kaart); color: var(--oker-diep); font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--oker) 30%, transparent), var(--schaduw-kaart);
}

/* Hoe het werkt: de video rustig in glas, de feedbackpagina op een gsm ervoor */
.atelier .werkt { align-items: center; }
.atelier .scene--werkt { justify-self: center; width: 100%; max-width: 480px; padding: 0 0 72px; }
.atelier .scene--werkt .werkt-video {
  width: auto; margin-left: 90px; aspect-ratio: 1 / 1.05; max-width: none;
  background: var(--paneel-glas); -webkit-backdrop-filter: var(--paneel-blur); backdrop-filter: var(--paneel-blur);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--paneel-schaduw); border-radius: 28px;
}
.atelier .scene--werkt .video-plaatshouder { align-items: flex-start; text-align: left; padding: 32px 24px 32px 134px; color: var(--inkt); }
.atelier .scene--werkt .video-plaatshouder > span:not(.video-icoon) { max-width: 22ch; }
.atelier .scene-gsm { position: absolute; left: 0; top: 48px; width: 200px; z-index: 2; }
.atelier .scene-gsm .vb-gsm { width: 100%; box-shadow: 0 40px 70px -24px color-mix(in srgb, var(--inkt) 55%, transparent); }
.atelier .scene-gsm .vb-scherm { min-height: 360px; gap: 9px; padding: 30px 14px 18px; font-size: .875rem; }
.atelier .scene-gsm .vb-gsm-titel { font-size: 1.05rem; }
.atelier .scene-gsm .vb-sterren--groot svg { width: 22px; height: 22px; }
.atelier .scene-gsm .vb-keuze { padding: 8px 10px; font-size: .8125rem; }
.atelier .scene-gsm .scene-label { top: -14px; left: 50%; translate: -50% 0; }

/* Wat je wint: het dashboard als groot scherm in een glazen browservenster */
.atelier .scene--dashboard { margin: 0 0 clamp(48px, 7vw, 88px); }
.atelier .scene--dashboard::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -6%; pointer-events: none;
  background:
    radial-gradient(34% 50% at 20% 40%, color-mix(in srgb, var(--inkt) 34%, transparent), transparent 70%),
    radial-gradient(32% 48% at 80% 30%, color-mix(in srgb, var(--oker) 55%, transparent), transparent 70%),
    radial-gradient(30% 40% at 60% 90%, color-mix(in srgb, var(--oker-zacht) 90%, transparent), transparent 70%);
}
.atelier .scene--dashboard .scene-label { top: -12px; right: 28px; }
.atelier .browser {
  border-radius: 28px; overflow: hidden;
  background: var(--paneel-glas); -webkit-backdrop-filter: var(--paneel-blur); backdrop-filter: var(--paneel-blur);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--paneel-schaduw);
}
.atelier .browser-balk { display: flex; gap: 7px; padding: 16px 20px; }
.atelier .browser-balk span { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--inkt) 16%, transparent); }
.atelier .browser-inhoud { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px; padding: 0 20px 20px; align-items: start; }
.atelier .browser .vb-paneel { box-shadow: none; }
.atelier .browser .vb-rapport { background: var(--kaart); }
.atelier .winst-raster--vier { margin-top: 0; }

/* ---------- Glazen panelen ---------- */
/* Wie we zijn: de drie beloftes naast elkaar, elk een glazen paneel */
.atelier .wie-tekst { max-width: none; }
.atelier .wie-intro { max-width: 60ch; }
.atelier .belofte-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.atelier .belofte-lijst li {
  padding: clamp(22px, 3vw, 30px); border-top: 0; border-radius: 24px;
  background: var(--paneel-glas); -webkit-backdrop-filter: var(--paneel-blur); backdrop-filter: var(--paneel-blur);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--glas-schaduw);
}
.atelier .belofte-lijst strong { display: block; margin-bottom: 8px; font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.25rem; line-height: 1.3; }

/* Prijzen: pakketten wit en helder; kaders en baas-strook in hetzelfde glas */
.atelier .prijzen--oprichters .pakketten { opacity: 1; }
.atelier .prijzen-raster { border-radius: 24px; box-shadow: var(--glas-licht), var(--paneel-schaduw); }
.atelier .prijs-kader, .atelier .baas-strook {
  background: var(--paneel-glas); -webkit-backdrop-filter: var(--paneel-blur); backdrop-filter: var(--paneel-blur);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--glas-schaduw); border-radius: 24px;
}
@media (hover: hover) and (pointer: fine) { .atelier .baas-strook:hover { background: color-mix(in srgb, var(--kaart) 85%, transparent); } }

/* Vragen: alle groepen samen in één groot wit paneel */
.atelier .faq > div:last-child {
  padding: clamp(20px, 4vw, 48px); border-radius: 28px; background: var(--kaart);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--inkt) 7%, transparent), var(--paneel-schaduw);
}

/* Gratis proberen: formulier in glas op het verloop, bedankscherm naast de stappen */
.atelier .formulier {
  background: color-mix(in srgb, var(--kaart) 78%, transparent); -webkit-backdrop-filter: var(--paneel-blur); backdrop-filter: var(--paneel-blur);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--paneel-schaduw); border-radius: 28px;
}
.atelier .scene-gsm--bedankt { position: relative; left: auto; bottom: auto; width: 230px; margin: 48px 0 0 8px; rotate: -3deg; }
.atelier .scene-gsm--bedankt .vb-scherm { min-height: 340px; }
.atelier .scene-gsm--bedankt .vb-vink { width: 46px; height: 46px; }

/* ---------- Gsm en tablet ---------- */
@media (max-width: 900px) {
  /* gsm: video-paneel volle breedte, de feedbackpagina eronder en er een beetje over */
  .atelier .scene--werkt { max-width: 440px; padding: 0; margin-top: 16px; }
  .atelier .scene--werkt .werkt-video { margin-left: 0; aspect-ratio: auto; }
  .atelier .scene--werkt .video-plaatshouder { align-items: center; text-align: center; padding: 32px 24px 72px; }
  .atelier .scene-gsm { position: relative; left: auto; top: auto; width: 200px; margin: -48px auto 0; }
  .atelier .scene-gsm .vb-scherm { min-height: 300px; }
  .atelier .browser-inhoud { grid-template-columns: minmax(0, 1fr); }
  .atelier .browser .vb-rapport { display: none; }
  .atelier .belofte-lijst { grid-template-columns: minmax(0, 1fr); }
  .atelier .scene-gsm--bedankt { display: none; }
}
@media (max-width: 420px) {
  .atelier .scene-gsm { width: 190px; }
}
/* zonder blur of bij minder transparantie: effen panelen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .atelier :is(.scene--werkt .werkt-video, .browser, .belofte-lijst li, .prijs-kader, .baas-strook, .formulier) { background: var(--kaart); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .atelier :is(.scene--werkt .werkt-video, .browser, .belofte-lijst li, .prijs-kader, .baas-strook, .formulier) { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Proef: link naar de huidige pagina ---------- */
.proef-terug { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 60; padding: 10px 18px; border-radius: var(--radius-pil);
  background: var(--inkt); color: var(--op-knop); font-size: .875rem; font-weight: 500; text-decoration: none; box-shadow: var(--schaduw-kaart); }
.proef-terug:hover { color: var(--op-knop); }

/* ruimte tussen de scène en de kaartjes eronder */
.atelier .werkt + .drie-kaarten { margin-top: clamp(72px, 9vw, 112px); }