/* ==========================================================================
   /demo/ (templates/demo.php): de demo op de volle breedte met een routepaneel
   ernaast, en het slot op het lichte vlak. Het venster zelf staat in demo.css.
   Waarden uit tokens.css, regels uit merk/STYLEGUIDE.md, de poort in
   ux-onderzoek/poort-demo.md.
   ========================================================================== */

/* ---------- 1. de kop: een zin en een regel, de demo meteen eronder ---------- */

.zd-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 2)}
body.zh .zd-hero__titel{font-size:var(--type-maat-titel);max-width:20ch;line-height:var(--type-regel-kop);text-wrap:balance}
.zd-hero .zh-inleiding{margin-top:var(--ruimte-blok-l)}
.zd-hero .zh-inleiding a{white-space:nowrap}

/* ---------- 2 tot 4. de demo en het paneel ---------- */

.zd-podium{display:grid;gap:var(--ruimte-blok-l)}
.zd-podium [data-demo]{scroll-margin-top:calc(var(--ruimte-knop) + var(--ruimte-blok-l) + var(--ruimte-blok-l))}
@media (min-width:1180px){
  .zd-podium{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
}

/* De kop heeft hier geen knop, dus Start de rondleiding is het goud van dit
   scherm (op home en /product/ draagt de hero het, demo.css). De kaart staat
   bovenin, zodat hij in het eerste scherm valt; een klik ernaast is zelf
   rondklikken (demo.js). */
.zd-podium .dmstart[data-demo-scherm="start"]{
  align-items:start;cursor:pointer;
  background:linear-gradient(to top, transparent 35%, color-mix(in srgb, var(--kleur-grond) 70%, transparent));
}
.zd-podium .dmstart[data-demo-scherm="start"] .dmstart__kaart{cursor:auto}
.zd-podium .dmstart[data-demo-scherm="start"] .btn.ocher{background:var(--kleur-actie);border-color:var(--kleur-actie);box-shadow:none;color:var(--kleur-op-actie)}
@media (hover:hover) and (pointer:fine){
  .zd-podium .dmstart[data-demo-scherm="start"] .btn.ocher:hover{background:var(--kleur-actie-hover);border-color:var(--kleur-actie-hover)}
}

/* Het paneel stuurt de demo, zoals bij Mercury, maar staat ernaast in plaats
   van eroverheen: de ballon van de rondleiding ligt al in het venster. Een rand
   en geen schaduw (STYLEGUIDE 4). */
.zd-paneel{
  padding:var(--ruimte-blok-l);border-radius:var(--radius-paneel);
  background:var(--kleur-glas-paneel);border:1px solid var(--kleur-glas-paneel-rand);
}
.zd-paneel__kop{display:grid;gap:var(--ruimte-blok-m)}
.zd-paneel__kop .zh-label{margin:0}

/* Alleen of met een team: wat je ziet is Alleen, Met een team gaat naar /teams/. */
.zd-wissel{
  display:grid;grid-template-columns:1fr 1fr;margin:0;padding:calc(var(--ruimte-blok-s) / 4);border-radius:var(--radius-pil);
  box-shadow:inset 0 0 0 1px var(--kleur-veld-rand);
}
.zd-wissel__keus{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--ruimte-tikdoel);padding:0 var(--ruimte-blok-m);border-radius:var(--radius-pil);
  font-size:var(--type-maat-knop);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  color:var(--kleur-tekst-2);text-decoration:none;
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zd-wissel__keus[aria-current]{background:var(--kleur-accent-goud-was);color:var(--kleur-tekst)}

/* De route: vier stations onder elkaar op een staande lat. Elk station tekent
   zijn eigen stuk lat naar het volgende, in kleur.rand; wat je al voorbij bent
   staat open in kleur.actie (is-voorbij, gezet door rondleiding.js). */
.zd-route{
  --zd-pad:var(--ruimte-blok-s);--zd-mid:calc(var(--zd-pad) + var(--ruimte-tikdoel) / 2);
  list-style:none;margin:var(--ruimte-blok-l) 0 0;padding:0;display:grid;
}
.zd-route li{position:relative;min-width:0}
.zd-route li:not(:last-child)::before,.zd-route li:not(:last-child)::after{
  content:"";position:absolute;left:calc(var(--zd-mid) - 1px);top:var(--zd-mid);width:10px;height:100%;pointer-events:none;
  background:
    repeating-linear-gradient(180deg, var(--lat-streep) 0 1px, transparent 1px 12px) left top / 6px 100% no-repeat,
    linear-gradient(var(--lat-streep), var(--lat-streep)) left top / var(--lat-lijn) 100% no-repeat;
  transform-origin:center top;
  transition:transform var(--motion-duur-vouw) var(--motion-curve-uit),opacity var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zd-route li::before{--lat-streep:var(--kleur-rand);--lat-lijn:1px}
.zd-route li::after{
  --lat-streep:var(--kleur-actie);--lat-lijn:3px;transform:scaleY(0);
  transition:transform var(--motion-duur-lade) var(--motion-curve-uit);
}
.zd-route li.is-voorbij::after{transform:none}
/* Klaar: de lat vouwt stuk voor stuk dicht naar Betaald, het app-icoon staat in
   het venster naast Start je proef. */
.zd-paneel.is-klaar .zd-route li::before,.zd-paneel.is-klaar .zd-route li::after{
  transform:scaleY(0);opacity:0;transform-origin:center bottom;
  transition-delay:calc(var(--i) * var(--motion-duur-hover));
}

.zd-stap{
  position:relative;z-index:1;display:grid;grid-template-columns:var(--ruimte-tikdoel) minmax(0,1fr);column-gap:var(--ruimte-blok-m);
  align-items:center;width:100%;padding:var(--zd-pad);border:0;border-radius:var(--radius-tegel);background:none;
  font:inherit;color:var(--kleur-tekst-2);text-align:left;cursor:pointer;
  transition:background var(--motion-duur-hover) var(--motion-curve-uit),color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zd-stap__station{
  grid-row:1 / span 2;align-self:start;position:relative;display:grid;place-items:center;
  width:var(--ruimte-tikdoel);height:var(--ruimte-tikdoel);border-radius:50%;
  background:var(--kleur-grond);box-shadow:inset 0 0 0 1.5px var(--kleur-veld-rand);
  transition:background var(--motion-duur-kaart) var(--motion-curve-uit),box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),
    transform var(--motion-duur-kaart) var(--motion-curve-uit);
}
.zd-stap .zr-lat__ico{width:22px;height:22px;fill:none;stroke:var(--kleur-tekst-2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.zd-stap__naam{font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);color:var(--kleur-tekst)}
.zd-stap__zin{font-size:var(--type-maat-tekst);line-height:var(--type-regel-tekst)}

/* Waar de demo nu staat: het station in goud-was met een gouden ring, zoals op /product/. */
.zd-stap[aria-current] .zd-stap__station{background:var(--kleur-accent-goud-was);box-shadow:inset 0 0 0 1.5px var(--kleur-actie)}
.zd-stap[aria-current] .zr-lat__ico{stroke:var(--kleur-tekst)}
.zd-stap:active .zd-stap__station{transform:scale(var(--motion-schaal-druk))}

/* Gezien: een vink in kleur.gelukt op het station, en die blijft staan. */
.zd-stap__vink{
  position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;
  background:var(--kleur-gelukt);fill:none;stroke:var(--kleur-grond);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.6);
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit),transform var(--motion-duur-kaart) var(--motion-curve-uit);
}
.zd-stap.is-gezien .zd-stap__vink{opacity:1;transform:none}

@media (hover:hover) and (pointer:fine){
  .zd-wissel a.zd-wissel__keus:hover{color:var(--kleur-tekst);text-decoration:underline;text-underline-offset:4px}
  .zd-stap:hover{background:var(--kleur-glas-vol);color:var(--kleur-tekst)}
  .zd-stap:hover .zd-stap__station{box-shadow:inset 0 0 0 2px var(--kleur-actie)}
}

/* Bij het laden komen de stations een voor een op hun plek, en vouwt elk stuk
   lat daarna open. Alleen de start: daarna gelden de standen hierboven. */
html.js .zd-route li{animation:zh-in var(--motion-duur-lade) var(--motion-curve-uit) backwards;animation-delay:calc(var(--motion-duur-menu) + var(--i) * var(--motion-duur-hover))}
html.js .zd-route li:not(:last-child)::before{animation:zd-vouw var(--motion-duur-vouw) var(--motion-curve-uit) backwards;animation-delay:calc(var(--motion-duur-menu) + (var(--i) + 1) * var(--motion-duur-hover))}
@keyframes zd-vouw{from{transform:scaleY(0)}to{transform:none}}

/* ---------- 5. wat je ziet ---------- */

.zd-noot{margin-top:var(--ruimte-blok-l);font-size:var(--type-maat-tekst);line-height:var(--type-regel-tekst);color:var(--kleur-tekst-2);text-align:center}

/* ---------- 6. het slot, op het lichte vlak (grond in pagina.css) ---------- */

.zd-slot .zh-wrap{display:grid;justify-items:center;text-align:center;gap:var(--ruimte-blok-l)}
body.zh .zd-slot h2{font-size:var(--type-maat-titel);max-width:14ch}
.zd-slot .zh-inleiding{margin-inline:auto}
.zd-slot .zh-knoppen{justify-content:center}

/* ---------- smaller: het paneel onder het venster ---------- */

@media (max-width:1179px){
  .zd-paneel__kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  /* De stations naast elkaar op een liggende lat, zoals de latten van /product/. */
  .zd-route{grid-template-columns:repeat(4,minmax(0,1fr))}
  .zd-stap{grid-template-columns:1fr;align-items:start}
  .zd-stap__station{grid-row:auto;margin-bottom:var(--ruimte-blok-s)}
  .zd-route li:not(:last-child)::before,.zd-route li:not(:last-child)::after{
    left:var(--zd-mid);top:calc(var(--zd-mid) - 5px);width:100%;height:10px;transform-origin:left center;
    background:
      repeating-linear-gradient(90deg, var(--lat-streep) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
      linear-gradient(var(--lat-streep), var(--lat-streep)) left bottom / 100% var(--lat-lijn) no-repeat;
  }
  .zd-route li::after{transform:scaleX(0)}
  .zd-route li.is-voorbij::after{transform:none}
  .zd-paneel.is-klaar .zd-route li::before,.zd-paneel.is-klaar .zd-route li::after{transform:scaleX(0);transform-origin:right center}
  @keyframes zd-vouw{from{transform:scaleX(0)}to{transform:none}}
}
@media (max-width:600px){
  /* Twee bij twee: geen lat meer, de vinken en de gouden ring dragen de stand. */
  .zd-route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--ruimte-blok-s)}
  .zd-route li::before,.zd-route li::after{display:none}
  .zd-stap__naam{font-size:var(--type-maat-tekst)}
}

/* ---------- minder beweging: alles stil, alles zichtbaar ---------- */

@media (prefers-reduced-motion:reduce){
  html.js .zd-route li,html.js .zd-route li:not(:last-child)::before{animation:none}
  .zd-route li::before,.zd-route li::after,.zd-stap,.zd-stap__station,.zd-stap__vink,.zd-wissel__keus{transition:none}
  .zd-paneel.is-klaar .zd-route li::before,.zd-paneel.is-klaar .zd-route li::after{transition-delay:0s}
}