/* wf-cinema: Live Site Cinema (world 1). Source of truth: products/_wf-nav/wf-cinema.css, copied into world1/css
   by _wf-nav/inject-cinema.py. Behaviour and motion: wf-cinema.js.

   Layers, bottom to top: the dimmed case (.lsc-dim), a soft shadow under the viewer (.lsc-shade), the viewer
   (.lsc-view: the demo, its loading panel or its fallback) and the bar with the one way back, a dark pill
   "Terug naar de case" (desktop: the band above the viewer; phones: its own bar under the viewer). The bar never
   lies on the site, so it never covers the site's own controls and the site never covers it.
   No gradients, no glow, no serif. Meaning never rides on colour alone: the pill has a word and an icon. */

/* the button in the case: rendered hidden, shown once the script runs (no dead control without JS) */
html.lsc-on .cs-cinema[hidden]{display:block}
.cs-cinema{margin:32px 0 0}
.cs-cinema-btn{border:0;cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none}
.cs-cinema-btn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cs-cinema-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

.lsc{position:fixed;left:0;right:0;top:var(--lsc-vvt,0px);height:100vh;height:var(--lsc-vvh,100dvh);z-index:10050;
  font-family:var(--font,"Inter",system-ui,sans-serif);-webkit-font-smoothing:antialiased;color:#F2F1EC;
  --lsc-gap:clamp(16px,2.5vw,36px);--lsc-top:68px;--lsc-r:22px}
.lsc[hidden]{display:none!important}
html.lsc-lock{overscroll-behavior:none}
.lsc-guard{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.lsc-dim{position:absolute;inset:0;background:#0c0c0d;opacity:0}

/* the viewer: always at its final size; the script only clips it (centre-out) while it grows and shrinks */
.lsc-view{position:absolute;left:var(--lsc-gap);right:var(--lsc-gap);top:var(--lsc-top);bottom:var(--lsc-gap);
  border-radius:var(--lsc-r);overflow:hidden;background:#141416;opacity:0;will-change:clip-path;isolation:isolate}
.lsc-view::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.12);pointer-events:none;z-index:3}
.lsc-shade{position:absolute;left:var(--lsc-gap);right:var(--lsc-gap);top:var(--lsc-top);bottom:var(--lsc-gap);border-radius:var(--lsc-r);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.35);opacity:0;pointer-events:none}
.lsc-stage{position:absolute;inset:0;z-index:1}
.lsc-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#141416;opacity:0;transition:opacity .32s ease}
.lsc.is-live .lsc-frame{opacity:1}

/* loading: the project, one line, a line that travels most of the way and settles; never an empty screen */
.lsc-load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  transition:visibility 0s linear .32s}
.lsc-load>*{transition:opacity .28s ease}
.lsc.is-live .lsc-load{visibility:hidden;pointer-events:none}
.lsc.is-live .lsc-load>*{opacity:0}
.lsc-load[hidden],.lsc-fail[hidden]{display:none}
.lsc-k{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:#C9C7C1}
.lsc-h{margin:0;font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:#F2F1EC}
.lsc-bar{position:relative;display:block;width:148px;height:2px;margin:10px 0 4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.lsc-bar i{position:absolute;inset:0;background:#F2F1EC;transform:scaleX(0);transform-origin:0 50%;transition:transform 2.8s cubic-bezier(.16,1,.3,1)}
.lsc-note{margin:0;max-width:34em;font-size:13px;line-height:1.5;color:#A8A6A0}
.lsc-slow{margin:6px 0 0;font-size:13px;line-height:1.5;color:#C9C7C1}
.lsc-slow[hidden]{display:none}
.lsc-slow a{display:inline-flex;align-items:center;min-height:44px;color:#F2F1EC;text-decoration:underline;text-underline-offset:3px}
.lsc .lsc-slow a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}

/* fallback: the controlled way out */
.lsc-fail{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.lsc-p{margin:0;max-width:30em;font-size:15px;line-height:1.5;color:#C9C7C1}
.lsc-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.lsc-go{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--font,"Inter",system-ui,sans-serif);
  text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.lsc-go{background:#F2F1EC;color:#181818;border:0}
.lsc-go:hover{background:#fff}
.lsc-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the one way back: a dark pill in the band above the viewer (it never sits on the demo's own menu) */
.lsc-bar-ui{position:absolute;z-index:5;top:12px;left:var(--lsc-gap);right:var(--lsc-gap);height:44px;display:flex;align-items:center;justify-content:flex-end;gap:16px;opacity:0;pointer-events:none}
.lsc-bar-ui>*{pointer-events:auto}
.lsc-hint{margin:0 auto 0 0;min-width:0;font-size:13px;line-height:1.35;color:#C9C7C1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lsc-hint[hidden]{display:none}
.lsc-pill{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 18px 0 14px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;background:#111214;color:#fff;
  font:600 14px/1 var(--font,"Inter",system-ui,sans-serif);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .2s ease}
.lsc-pill:hover{background:#26282c}
.lsc-pill svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lsc .lsc-pill:focus-visible,.lsc .lsc-go:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #1E7BE6}
.lsc .lsc-frame:focus-visible{outline:3px solid #1E7BE6;outline-offset:-3px}
.lsc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* phones (and short landscape touch screens): the site fills the screen above a 64px bar with the way back, by the
   thumb. The bar is not on the site: the site's own bottom controls (Solara's Skip, chat buttons) stay free. */
@media (max-width:809px),(pointer:coarse) and (max-height:520px){
  .lsc{--lsc-r:0px;--lsc-ui:64px}
  .lsc-view,.lsc-shade{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);top:env(safe-area-inset-top,0px);
    bottom:calc(var(--lsc-ui) + env(safe-area-inset-bottom,0px))}
  .lsc-dim{background:#0a0a0b}
  .lsc-shade{display:none}
  .lsc-view::after{display:none}
  .lsc-bar-ui{top:auto;height:var(--lsc-ui);bottom:env(safe-area-inset-bottom,0px);left:max(16px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));gap:12px}
  .lsc-hint{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .lsc-frame,.lsc-load>*,.lsc-pill,.lsc-bar i{transition:none}
}