/* dibbi walkthrough-speler - 16:9, LICHT thema. Vullende browser (geen zoom, geen letterbox),
   statisch cover-openingsscherm, ronde highlight-ring, ondertiteling.
   Merkkleuren: oranje #FF6B35, donker #231F20. */
:root{ --dibbi-orange:#FF6B35; --bg:#EDEBE7; --ink:#231F20; --muted:#6f6f69; }
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; background:var(--bg); font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); }
/* De player is ÉÉN zelfstandig 16:9-kader (zoals de clip-player): alles zit ín het podium,
   inclusief de voortgangsbalk. Zo is de embed een strak 16:9-blok zonder losse balk/regel eronder. */
.frame{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:0; }

.stage{ position:relative; width:min(100vw,1000px); aspect-ratio:16/9; border-radius:16px; overflow:hidden; user-select:none; container-type:size;
  background:#fff; box-shadow:0 24px 64px rgba(31,28,26,.18); }
.scenes{ position:absolute; inset:0; }

.wscene{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.wscene.on{ opacity:1; }

/* Vullende browser: beeld tot de rand, hele browser zichtbaar, geen marge, geen letterbox. */
.wframe{ position:absolute; inset:0; overflow:hidden; background:#fff; container-type:size; }
.wshot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Overlays leven in het beeld (cqw = beeldbreedte). */
.wovl{ position:absolute; inset:0; pointer-events:none; }
.wo{ position:absolute; opacity:0; transition:opacity .3s ease; }
.wo.on{ opacity:1; }
.wo-ring{ transform:translate(-50%,-50%); aspect-ratio:1; border-radius:50%; border:0.6cqw solid var(--dibbi-orange);
  box-shadow:0 0 0 0.3cqw rgba(255,107,53,.30); animation:wpulse 1.7s ease-out infinite; }
@keyframes wpulse{ 0%{ box-shadow:0 0 0 0 rgba(255,107,53,.5);} 70%{ box-shadow:0 0 0 2.2cqw rgba(255,107,53,0);} 100%{ box-shadow:0 0 0 0 rgba(255,107,53,0);} }
.wo-spot{ position:absolute; inset:0; }
/* Kader-highlight: omsluit het element (card/knop/veld). Blijft binnen beeld, geen clipping. */
.wo-box{ border:0.5cqw solid var(--dibbi-orange); border-radius:1.2cqw; background:rgba(255,107,53,.06);
  animation:wboxpulse 1.7s ease-out infinite; }
@keyframes wboxpulse{ 0%{ box-shadow:0 0 0 0 rgba(255,107,53,.45);} 70%{ box-shadow:0 0 0 1.8cqw rgba(255,107,53,0);} 100%{ box-shadow:0 0 0 0 rgba(255,107,53,0);} }

/* Cover-openingsscherm: statisch, titel links, dashboard rechts in beeld. */
.wcover{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(135% 135% at 78% 8%, #ffffff 0%, #E9E6E1 72%); }
.wcover-text{ position:absolute; left:7cqw; top:50%; transform:translateY(-50%); width:42cqw; z-index:2; }
.wcover-logo{ height:3.6cqw; width:auto; display:block; margin-bottom:3cqw; }
.wcover-text h1{ margin:0 0 1.8cqw; font-family:"roca","Inter",sans-serif; font-size:4.8cqw; line-height:1.08; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.wcover-text p{ margin:0; font-family:"Inter",sans-serif; font-size:2.1cqw; line-height:1.45; color:var(--muted); }
.wcover-peek{ position:absolute; top:16%; bottom:16%; left:50%; }
.wcover-peek img{ height:100%; width:auto; border-radius:1.2cqw 0 0 1.2cqw; border:1px solid rgba(31,28,26,.16); box-shadow:0 2.2cqw 5cqw rgba(31,28,26,.18); display:block; }

/* Hoofdstuk-tussenkaart: geanimeerde merk-kaart (geen screenshot), titel groot gecentreerd. */
.wsection{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #E9E6E1 75%); overflow:hidden; }
.wsection-inner{ opacity:0; transform:translateY(2.4cqw); }
.wscene.on .wsection-inner{ animation:wsecin .7s cubic-bezier(.2,.7,.2,1) .1s forwards; }
@keyframes wsecin{ to{ opacity:1; transform:none; } }
.wsection-logo{ height:3.2cqw; width:auto; display:block; margin:0 auto 2.4cqw; }
.wsection-eyebrow{ display:inline-block; font-family:"Inter",sans-serif; font-size:1.55cqw; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dibbi-orange); margin-bottom:1.4cqw; }
.wsection h2{ margin:0; font-family:"roca","Inter",sans-serif; font-size:6cqw; line-height:1.05; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }

/* Klikbare hoofdstukbalk, onderaan, zichtbaar bij hover over het podium. */
.wchapters{ position:absolute; left:0; right:0; bottom:1.4cqw; z-index:6; display:flex; gap:.7cqw; justify-content:center; flex-wrap:wrap; padding:0 2cqw;
  opacity:0; transform:translateY(.6cqw); transition:opacity .25s, transform .25s; pointer-events:none; }
.stage:hover .wchapters{ opacity:1; transform:none; pointer-events:auto; }
.wchapters .wch{ font-family:"Inter",sans-serif; font-size:1.5cqw; font-weight:600; color:#5a564f; background:rgba(255,255,255,.92);
  border:1px solid rgba(31,28,26,.12); border-radius:999px; padding:.7cqw 1.4cqw; cursor:pointer;
  box-shadow:0 .4cqw 1.2cqw rgba(31,28,26,.12); transition:background .15s,color .15s; }
.wchapters .wch:hover{ background:#fff; }
.wchapters .wch.active{ color:#fff; background:var(--dibbi-orange); border-color:transparent; }

/* Ondertiteling, in het podium onderaan (cqw = podiumbreedte). Iets boven de balk. */
.subtitle{ position:absolute; left:0; right:0; bottom:4.2cqw; text-align:center; padding:0 6cqw; pointer-events:none; }
.subtitle #subtitleText{ display:inline-block; opacity:0; transition:opacity .2s; background:rgba(35,31,32,.85); color:#fff;
  padding:1.1cqw 2.2cqw; border-radius:1.4cqw; font-size:2.5cqw; line-height:1.3; font-weight:500; max-width:62%; text-wrap:balance; }
.subtitle #subtitleText.show{ opacity:1; }

/* Voortgangsbalk: dunne strook vastgeplakt aan de onderrand BINNEN het podium (clip-stijl). */
.progress{ position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(31,28,26,.12); cursor:pointer; z-index:4; }
.progress-bar{ height:100%; width:0; background:var(--dibbi-orange); transition:width .08s linear; }

.overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(237,235,231,.45); border:0; color:var(--ink); cursor:pointer; }
.overlay[hidden]{ display:none; }  /* [hidden] zou anders door display:flex worden overruled */
.overlay .btn{ width:72px; height:72px; border-radius:50%; background:var(--dibbi-orange); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(31,28,26,.28); }
.overlay .label{ font-weight:800; font-size:18px; } .overlay .sub{ font-size:13px; color:var(--muted); }
.replay{ position:absolute; right:14px; bottom:14px; background:rgba(35,31,32,.72); color:#fff; border:0; border-radius:10px; padding:8px 14px; font-weight:700; cursor:pointer; }

/* Fullscreen-knop (rechtsboven, zichtbaar bij hover). */
.wfs{ position:absolute; top:1.2cqw; right:1.2cqw; z-index:7; padding:0.7cqw; line-height:0; color:#fff;
  background:rgba(35,31,32,.55); border:0; border-radius:0.8cqw; cursor:pointer; opacity:0; transition:opacity .2s, background .15s; }
.stage:hover .wfs{ opacity:1; }
.wfs:hover{ background:rgba(35,31,32,.82); }
.wfs svg{ display:block; width:1.9cqw; height:1.9cqw; }
/* Schermvullend: zwarte achtergrond, 16:9-podium zo groot mogelijk gecentreerd. */
.frame:fullscreen{ background:#000; padding:0; }
.frame:fullscreen .stage{ width:min(100vw, 177.78vh); max-width:none; border-radius:0; box-shadow:none; }
.frame:-webkit-full-screen{ background:#000; padding:0; }
.frame:-webkit-full-screen .stage{ width:min(100vw, 177.78vh); max-width:none; border-radius:0; box-shadow:none; }