/* ==========================================================================
   SmartPresent · herbruikbare componenten
   1. labels (tags)        5. live-voorbeeld
   2. kader-motief         6. beweging: reveal + pauzeknop
   3. devices (mock-ups)   7. reduced motion
   4. scène (presentatie-inhoud die zich aanpast aan de schermverhouding)
   ========================================================================== */

/* ---------- 1. labels ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.38em .8em .36em;border-radius:100px;
  font-family:var(--f-label);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.1;
  border:1px solid var(--c-line-strong);color:var(--c-soft);background:color-mix(in srgb,var(--c-bg) 70%,transparent);
  white-space:nowrap;
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag--inspiratie::before{background:var(--c-muted)}
.tag--demonstratie::before{background:var(--red)}
.tag--concept::before{background:linear-gradient(135deg,#E9ECEF,#8C939B)}
.tag--op-beeld{position:absolute;z-index:3;top:10px;left:10px;background:rgba(14,15,18,.72);color:#F3F1EC;border-color:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- 2. kader-motief ----------
   Vier rode hoekjes rond een element. Geen extra DOM: één ::before met acht
   gradient-strepen. --kader-afstand bepaalt hoe ver de hoekjes buiten het
   element staan. Met .reveal schuiven de hoekjes in. */
.kader{position:relative;--kader-afstand:clamp(8px,1.2vw,16px)}
.kader::before{
  content:"";position:absolute;pointer-events:none;z-index:2;
  inset:calc(var(--kader-afstand) * -1);
  --k:var(--kader-kleur);--l:var(--kader-lengte);--d:var(--kader-dikte);
  background:
    linear-gradient(var(--k),var(--k)) top left/var(--l) var(--d),
    linear-gradient(var(--k),var(--k)) top left/var(--d) var(--l),
    linear-gradient(var(--k),var(--k)) top right/var(--l) var(--d),
    linear-gradient(var(--k),var(--k)) top right/var(--d) var(--l),
    linear-gradient(var(--k),var(--k)) bottom left/var(--l) var(--d),
    linear-gradient(var(--k),var(--k)) bottom left/var(--d) var(--l),
    linear-gradient(var(--k),var(--k)) bottom right/var(--l) var(--d),
    linear-gradient(var(--k),var(--k)) bottom right/var(--d) var(--l);
  background-repeat:no-repeat;
  transition:inset .7s var(--ease-out),opacity .5s var(--ease-out);
}
html.js .kader.reveal:not(.is-in)::before{inset:calc(var(--kader-afstand) * -2.4);opacity:0}

/* ---------- 3. devices ----------
   <figure class="device device--tv">
     <div class="device__scherm"> ...scène of live-voorbeeld... </div>
   </figure>
   .device__scherm is een size-container ("scherm"): de inhoud gebruikt
   cqw/cqh en @container scherm (orientation: ...) en past zich dus echt aan
   de verhouding aan in plaats van te schalen. */
.device{position:relative;margin:0;width:100%;--rand:#0B0C0E;--rand-dikte:clamp(4px,1.1%,12px)}
.device__scherm{
  position:relative;overflow:hidden;isolation:isolate;
  container-type:size;container-name:scherm;
  aspect-ratio:16/9;width:100%;
  background:var(--bg-donker);color:var(--bg-licht);
  border-radius:calc(var(--radius-device) * .4);
}
.device__kast{
  position:relative;background:var(--rand);padding:var(--rand-dikte);border-radius:var(--radius-device);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(0,0,0,.55),0 12px 24px -16px rgba(0,0,0,.4);
}
/* op donker: een haarlijntje zodat de zwarte rand niet wegvalt */
.thema-donker .device__kast,.site-footer .device__kast{box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -30px rgba(0,0,0,.7)}
/* voet/sokkel hangt direct onder de kast; .device reserveert de ruimte */
.device__kast::after{content:none;position:absolute;top:100%;left:50%;transform:translateX(-50%)}
/* tv: liggend 16:9 met smalle rand en voet */
.device--tv{--voet:clamp(8px,1.6vw,20px)}
.device--tv .device__kast,.device--staand .device__kast,.device--balie .device__kast{margin-bottom:var(--voet)}
.device--tv .device__scherm{aspect-ratio:16/9}
.device--tv .device__kast::after{
  content:"";width:22%;height:var(--voet);
  background:linear-gradient(#2A2D33,#0B0C0E);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
}
/* staand scherm / zuil: 9:16 met sokkel */
.device--staand{--rand-dikte:clamp(6px,2.4%,16px);--voet:clamp(10px,2.4vw,22px)}
.device--staand .device__scherm{aspect-ratio:9/16}
.device--staand .device__kast::after{content:"";width:62%;height:var(--voet);background:linear-gradient(#2A2D33,#0B0C0E);border-radius:0 0 6px 6px}
/* baliedisplay: klein 16:10 op een voetje */
.device--balie{--rand-dikte:clamp(4px,2.2%,10px);--voet:clamp(16px,3.6vw,32px)}
.device--balie .device__scherm{aspect-ratio:16/10}
.device--balie .device__kast::after{content:"";width:12%;height:var(--voet);background:linear-gradient(90deg,#16181B,#3A3E46,#16181B);box-shadow:0 6px 0 -1px #2A2D33}
/* spiegels: conceptuele verhoudingen, geen productspecificaties */
.device--spiegel-groot,.device--spiegel-klein{--rand:linear-gradient(135deg,#F4F5F6 0%,#B9BEC4 22%,#E7E9EB 46%,#8E949B 70%,#D9DCDF 100%);--rand-dikte:clamp(3px,1.6%,7px)}
.device--spiegel-groot .device__kast,.device--spiegel-klein .device__kast{border-radius:calc(var(--radius-device) * .5);box-shadow:0 40px 70px -40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.25)}
.device--spiegel-groot .device__scherm{aspect-ratio:1/2.4}
.device--spiegel-klein .device__scherm{aspect-ratio:3/4}
.device--spiegel-groot .device__scherm,.device--spiegel-klein .device__scherm{
  background:
    radial-gradient(120% 60% at 30% 10%,rgba(255,255,255,.10),transparent 60%),
    linear-gradient(160deg,#2B3036 0%,#15181C 45%,#0D0F12 100%);
  border-radius:2px;
}
/* de presentatie in een spiegel: iets minder helder dan een scherm, reflectie erover */
.device--spiegel-groot .scene,.device--spiegel-klein .scene,
.device--spiegel-groot .live,.device--spiegel-klein .live{filter:brightness(.9) saturate(.95)}
.device__reflectie{
  position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;
  background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,.0) 34%,rgba(255,255,255,.16) 40%,rgba(255,255,255,.04) 47%,transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 30%,transparent 75%,rgba(255,255,255,.05) 100%);
  background-size:260% 100%,100% 100%;
  background-position:100% 0,0 0;
}
.device__reflectie.is-bewegend{animation:glans 9s var(--ease-soft) infinite}
@keyframes glans{0%,20%{background-position:100% 0,0 0}70%,100%{background-position:0% 0,0 0}}
/* oud: een bestaand scherm (dikkere rand, lichte glans), ook voor de 'stilstaande tv' */
.device--oud{--rand:linear-gradient(160deg,#2E3036 0%,#151619 40%,#0B0C0E 100%);--rand-dikte:clamp(6px,2.6%,18px)}
.device--oud .device__kast{border-radius:calc(var(--radius-device) * .6)}
.device--oud .device__kast::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.10) 0%,transparent 30%)}
.device--oud.device--balie .device__kast,.device--oud.device--staand .device__kast{border-radius:calc(var(--radius-device) * .5)}
/* wand: aan de muur, geen voet of sokkel */
.device--wand .device__kast::after{content:none}
.device--wand .device__kast{margin-bottom:0}
/* compact: klein staand scherm */
.device--compact{--rand-dikte:clamp(4px,3%,10px)}
/* de reflectielaag hoort alleen bij spiegels (blijft staan als een apparaat van type wisselt) */
.device:not(.device--spiegel-groot):not(.device--spiegel-klein) .device__reflectie{display:none}

/* uit: stilstaand scherm (beginstand van voor/na-demo's) */
.device--uit .device__scherm{background:radial-gradient(90% 70% at 35% 25%,#2A2D33 0%,#141619 55%,#0B0C0E 100%)}
.device--uit .device__scherm>*:not(.device__reflectie):not(.tag){opacity:0;visibility:hidden}
.device__scherm>*{transition:opacity .6s var(--ease-out),visibility 0s}

/* ---------- 4. scène ----------
   Dezelfde inhoud, andere indeling per verhouding:
   staand -> beeld boven, tekst eronder (grote kop, smal)
   liggend -> tekst links, beeld rechts (kop iets kleiner, meer tekst) */
.scene{position:absolute;inset:0;z-index:1;font-family:var(--f-body)}
.scene__slide{
  position:absolute;inset:0;display:grid;
  grid-template-columns:1fr;grid-template-rows:46% auto auto 1fr auto;
  grid-template-areas:"beeld" "merk" "kop" "tekst" "voet";
  padding:0 7cqw 6cqw;row-gap:2.2cqh;
  background:var(--scene-bg,var(--bg-donker));color:var(--scene-ink,var(--bg-licht));
  opacity:0;visibility:hidden;transition:opacity .9s var(--ease-soft),visibility 0s .9s;
}
.scene__slide.is-actief{opacity:1;visibility:visible;transition-delay:0s}
.scene:not([data-scene-gestart]) .scene__slide:first-child{opacity:1;visibility:visible}
.scene__beeld{grid-area:beeld;margin:0 -7cqw;position:relative;overflow:hidden;background:#1B1E23}
.scene__beeld img{width:100%;height:100%;object-fit:cover}
.scene__merk{grid-area:merk;align-self:end;display:flex;align-items:center;gap:1.6cqw;font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:3.2cqw;color:var(--scene-muted,#9A9EA6)}
.scene__merk::before{content:"";width:2.2cqw;height:2.2cqw;min-width:4px;min-height:4px;border-radius:50%;background:var(--scene-accent,var(--red))}
.scene__kop{grid-area:kop;font-family:var(--f-display);text-transform:uppercase;line-height:.95;font-size:11.5cqw;letter-spacing:.005em}
.scene__kop em{font-style:normal;color:var(--scene-accent,var(--red))}
.scene__tekst{grid-area:tekst;font-size:3.9cqw;line-height:1.35;color:var(--scene-soft,#CFCDC8);max-width:34ch}
.scene__voet{grid-area:voet;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-label);font-weight:600;font-size:2.8cqw;color:var(--scene-muted,#9A9EA6);border-top:max(1px,.25cqw) solid rgba(255,255,255,.14);padding-top:2.2cqh}
@container scherm (orientation: landscape){
  .scene__slide{
    grid-template-columns:52% 1fr;grid-template-rows:1fr auto auto auto 1fr auto;
    grid-template-areas:"tekstboven beeld" "merk beeld" "kop beeld" "tekst beeld" "rest beeld" "voet beeld";
    padding:0 0 0 5.5cqw;column-gap:4.5cqw;row-gap:2.4cqh;
  }
  .scene__beeld{margin:0;grid-row:1 / -1}
  .scene__merk{font-size:2.6cqh;gap:1.2cqh}
  .scene__merk::before{width:1.8cqh;height:1.8cqh}
  .scene__kop{font-size:11cqh}
  .scene__tekst{font-size:3.6cqh}
  .scene__voet{font-size:2.6cqh;padding-bottom:4.5cqh}
}
/* zeer smal staand (grote spiegel): beeld kleiner, kop iets kleiner */
@container scherm (aspect-ratio < 0.5){
  .scene__slide{grid-template-rows:38% auto auto 1fr auto;padding-bottom:9cqw}
  .scene__kop{font-size:13cqw}
  .scene__tekst{font-size:4.6cqw}
  .scene__merk{font-size:3.8cqw}
}
/* CSS-beeld (geen stockfoto's): abstracte compositie in merkkleuren */
.beeld-vorm{position:absolute;inset:0;background:
  radial-gradient(60% 80% at 75% 30%,rgba(255,0,44,.85) 0 34%,transparent 35%),
  radial-gradient(45% 60% at 25% 80%,#F3F1EC 0 30%,transparent 31%),
  linear-gradient(135deg,#23262C,#0E0F12)}
.beeld-vorm--b{background:
  linear-gradient(90deg,transparent 0 58%,rgba(243,241,236,.9) 58% 62%,transparent 62%),
  radial-gradient(70% 70% at 30% 40%,rgba(255,0,44,.9) 0 30%,transparent 31%),
  linear-gradient(200deg,#3A3E46,#0E0F12)}
.beeld-vorm--c{background:
  repeating-linear-gradient(90deg,rgba(243,241,236,.10) 0 2px,transparent 2px 9%),
  radial-gradient(50% 50% at 60% 60%,#F3F1EC 0 22%,transparent 23%),
  linear-gradient(160deg,#ED0028,#7A0016)}

/* beeldvlak met pictogram (SVG-sprite pictogrammen.svg), kleur uit het scène-thema */
.scene__beeld--pictogram{display:grid;place-items:center;
  background:radial-gradient(70% 70% at 70% 30%,var(--scene-accent,var(--red)) 0 38%,transparent 39%),
             radial-gradient(60% 60% at 20% 90%,var(--scene-vlak,#23262C) 0 45%,transparent 46%),
             var(--scene-beeld,#1B1E23)}
.scene__beeld--pictogram svg{width:38%;height:auto;aspect-ratio:1;color:var(--scene-ink,#F3F1EC);filter:drop-shadow(0 .6cqw 1.6cqw rgba(0,0,0,.25))}
@container scherm (orientation: landscape){ .scene__beeld--pictogram svg{width:44%} }

/* scène-thema's: één set kleuren per soort zaak (inspiratie, geen echte huisstijlen) */
.scene--thema-winkel{--scene-bg:#F3F1EC;--scene-ink:#16181B;--scene-soft:#3A3E46;--scene-muted:#5E626A;--scene-accent:#ED0028;--scene-beeld:#E4DED2;--scene-vlak:#16181B}
.scene--thema-entree{--scene-bg:#0E0F12;--scene-ink:#F3F1EC;--scene-soft:#CFCDC8;--scene-muted:#9A9EA6;--scene-accent:#FF002C;--scene-beeld:#1B1E23;--scene-vlak:#3A3E46}
.scene--thema-showroom{--scene-bg:#0B1220;--scene-ink:#EEF2F7;--scene-soft:#C5CEDA;--scene-muted:#8E9AAB;--scene-accent:#7FA7D9;--scene-beeld:#14203A;--scene-vlak:#C5CEDA}
.scene--thema-horeca{--scene-bg:#2A1D15;--scene-ink:#F6EBDD;--scene-soft:#E3D2BE;--scene-muted:#BFA88F;--scene-accent:#E8833A;--scene-beeld:#3A291D;--scene-vlak:#F6EBDD}
.scene--thema-praktijk{--scene-bg:#F2F7F7;--scene-ink:#10302F;--scene-soft:#2D4F4D;--scene-muted:#4C6B69;--scene-accent:#2E9C94;--scene-beeld:#D9ECEA;--scene-vlak:#10302F}
.scene--thema-kantoor{--scene-bg:#12233D;--scene-ink:#F2F5FA;--scene-soft:#CBD5E4;--scene-muted:#93A3BA;--scene-accent:#F2B33D;--scene-beeld:#1B3153;--scene-vlak:#F2F5FA}
.scene--thema-sport{--scene-bg:#0C0D0E;--scene-ink:#F5F7F0;--scene-soft:#D3D8CC;--scene-muted:#9CA392;--scene-accent:#C6F432;--scene-beeld:#17191B;--scene-vlak:#3A3E46}
.scene--thema-evenement{--scene-bg:#1D1430;--scene-ink:#F6F1FF;--scene-soft:#D9CCF2;--scene-muted:#A897C8;--scene-accent:#FF5A7A;--scene-beeld:#2B1F47;--scene-vlak:#F6F1FF}
.scene[class*="scene--thema-"] .scene__voet{border-top-color:color-mix(in srgb,var(--scene-ink) 18%,transparent)}

/* ---------- 5. live-voorbeeld ---------- */
.live{position:absolute;inset:0;z-index:1;background:#0B0C0E;overflow:hidden}
.live__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease-out)}
/* max-width:none: de basisregel iframe{max-width:100%} zou de stage van 1920px vóór het schalen
   inkrimpen, waardoor de presentatie een te klein venster ziet en dubbel verkleind wordt */
.live__stage{position:absolute;left:0;top:0;max-width:none;max-height:none;transform-origin:0 0;border:0;background:#000;opacity:0;transition:opacity .5s var(--ease-out)}
.live.is-live .live__stage{opacity:1}
.live.is-live .live__poster{opacity:0}
.live__bediening{
  position:absolute;inset:auto 0 0 0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;
  padding:clamp(6px,3cqw,14px);
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.live__start,.live__stop{
  display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:.5em 1em;border-radius:100px;
  font-family:var(--f-label);font-weight:700;font-size:clamp(.72rem,3.4cqw,.92rem);background:var(--red-vlak);color:#fff;
}
.live__start svg,.live__stop svg{width:.9em;height:.9em;flex:none}
.live__stop{background:rgba(14,15,18,.82);border:1px solid rgba(255,255,255,.3)}
.live__link{font-family:var(--f-label);font-weight:600;font-size:clamp(.7rem,3cqw,.86rem);color:#F3F1EC;text-decoration:underline;text-underline-offset:.2em;min-height:40px;display:inline-flex;align-items:center}
.live__link:hover{color:#fff}
.live__melding{
  position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,-50%);width:min(86%,420px);
  background:rgba(14,15,18,.9);color:#F3F1EC;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:clamp(10px,3cqw,16px);font-size:clamp(.74rem,3.2cqw,.92rem);line-height:1.4;text-align:center;
}
html:not(.js) .live__start,.live__stop,.live.is-live .live__start{display:none}
.live.is-live .live__stop{display:inline-flex}
.live__melding:empty{display:none}
.live__laden{display:none}
.live.is-laden .live__laden{display:inline}
.live.is-laden .live__start-tekst{display:none}

/* ---------- 6. beweging ---------- */
html.js .reveal{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.js .reveal:not(.is-in){opacity:0;transform:translateY(24px)}
html.js .kader.reveal:not(.is-in){opacity:1;transform:none}
.motion-pauze{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:40px;min-width:40px;padding:0 .9em;border-radius:100px;
  font-family:var(--f-label);font-weight:700;font-size:.78rem;
  color:var(--c-ink);border:1px solid var(--c-line-strong);background:color-mix(in srgb,var(--c-bg) 80%,transparent);
}
.motion-pauze svg{width:12px;height:12px}
.motion-pauze .ic-play,.motion-pauze[data-gepauzeerd] .ic-pauze{display:none}
.motion-pauze[data-gepauzeerd] .ic-play{display:inline}
html:not(.js) .motion-pauze{display:none}
.motion-pauze:hover{border-color:currentColor}

/* ---------- 7. reduced motion: statische eindstand ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js .reveal:not(.is-in){opacity:1;transform:none}
  html.js .kader.reveal:not(.is-in)::before{inset:calc(var(--kader-afstand) * -1);opacity:1}
  .device__reflectie.is-bewegend{animation:none}
}

/* ---------- keuzeknop (voorbeelden, boodschappen, stappen): gedeeld sinds SP-002 ---------- */
.voorbeeld{
  width:100%;min-height:52px;text-align:left;padding:.75em 1em;border-radius:10px;
  border:1px solid var(--c-line);background:var(--c-bg-2);color:var(--c-soft);
  font-family:var(--f-label);font-weight:600;font-size:.9rem;line-height:1.3;
  transition:border-color .15s var(--ease-out),color .15s var(--ease-out);
}
.voorbeeld:hover{border-color:var(--c-line-strong);color:var(--c-ink)}
.voorbeeld[aria-pressed="true"]{border-color:var(--red);color:var(--c-ink);box-shadow:inset 3px 0 0 var(--red)}

/* ---------- chips: native radio's als keuzepil (kijkomgeving, kijker, contact) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{
  display:inline-flex;align-items:center;min-height:44px;padding:.5em 1.05em;border-radius:100px;
  border:1px solid var(--c-line-strong);font-family:var(--f-label);font-weight:600;font-size:.88rem;line-height:1.1;
  color:var(--c-soft);background:transparent;transition:background-color .15s var(--ease-out),color .15s var(--ease-out),border-color .15s var(--ease-out);
  white-space:nowrap;
}
.chip:hover span{border-color:var(--c-ink);color:var(--c-ink)}
.chip input:checked + span{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink)}
.chip input:focus-visible + span{outline:3px solid var(--red);outline-offset:2px}
.chip input:disabled{cursor:not-allowed}
.chip input:disabled + span{opacity:.4;border-style:dashed}
.chip:has(input:disabled):hover span{border-color:var(--c-line-strong);color:var(--c-soft)}

/* ---------- filtergroep (fieldset + legend) rond chips ---------- */
.filter{border:0;margin:0;padding:0;min-width:0}
.filter legend{margin-bottom:10px;font-family:var(--f-label);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}