/* VESPER showcase — the page around the player. Everything here is page-level (.vs-*); the player keeps
   its own styles. Scroll scenes read --p (0→1), written by site.js; with reduced motion --p is fixed. */
:root{--vs-bg:#060a11;--vs-ink:#e6eef6;--vs-dim:#8fa3b6;--vs-teal:#59f5d3;--vs-ice:#cfe7ff;--vs-blue:#65beff;--vs-violet:#b28bf0;--vs-line:#a9c9e61f;
 --vs-display:'Vesper Display','DM Sans',system-ui,sans-serif;--vs-sans:'DM Sans',system-ui,sans-serif;--vs-ease:cubic-bezier(.2,.7,.1,1)}
html{background:var(--vs-bg);scroll-padding-top:84px;overflow-x:clip}
.vs-player-stage,.vs-player-stage>*{min-width:0}
body.vs{margin:0;background:radial-gradient(1200px 700px at 80% -10%,#122640 0,transparent 60%),radial-gradient(900px 600px at -10% 40%,#1a1236 0,transparent 55%),var(--vs-bg);color:var(--vs-ink);font:16px/1.55 var(--vs-sans);overflow-x:clip}
.vs a{color:inherit}
.vs ::selection{background:#59f5d340}
.vs em{font-style:normal;background:linear-gradient(90deg,var(--vs-ice),var(--vs-teal) 55%,var(--vs-blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.vs .skip-link{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--vs-ice);color:#06101c;font-weight:600;transition:top .2s}
.vs .skip-link:focus{top:12px}
.vs :focus-visible{outline:2px solid var(--vs-ice);outline-offset:3px;border-radius:8px}

/* scroll progress */
.vs-progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none}
.vs-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--page,0));background:linear-gradient(90deg,var(--vs-blue),var(--vs-teal),var(--vs-violet));box-shadow:0 0 12px #59f5d399}

/* nav: a floating glass bar */
.vs-nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:50;display:flex;align-items:center;gap:22px;padding:8px 10px 8px 18px;width:min(1180px,calc(100% - 32px));border-radius:22px;
 background:linear-gradient(176deg,#e6f3ff14,#e6f3ff05 40%,transparent),#0a1524b8;border:1px solid #b9dcff24;box-shadow:inset 0 1px 0 #e8f4ff33,0 10px 30px #02081066;
 backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);transition:background .3s,translate .5s var(--vs-ease)}
.vs-nav .brand{display:flex;align-items:center;gap:10px;color:var(--vs-ice);text-decoration:none;font:500 15px/1 var(--vs-display);letter-spacing:4px}
.vs-nav .brand svg{width:24px;height:auto}
.vs-links{display:flex;gap:4px;margin-left:auto}
.vs-links a{padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--vs-dim);font-size:14px;transition:color .2s,background .2s}
.vs-links a:hover{color:var(--vs-ink);background:#e6f3ff0d}
.vs-modes{display:flex;gap:2px;padding:3px;border-radius:14px;background:#02081059;box-shadow:inset 0 0 0 1px #9ebed91a}
.vs-modes .mode-button{all:unset;cursor:pointer;padding:7px 12px;border-radius:11px;font-size:13px;color:var(--vs-dim);transition:color .2s,background .2s}
.vs-modes .mode-button:hover{color:var(--vs-ink)}
.vs-modes .mode-button.active,.vs-modes .mode-button[aria-pressed=true]{color:#06101c;background:var(--vs-ice)}
.vs-modes .mode-button:focus-visible{outline:2px solid var(--vs-ice);outline-offset:2px}
.vs-cta{padding:10px 16px;border-radius:14px;text-decoration:none;font-weight:600;font-size:14px;color:#05121a;background:linear-gradient(180deg,#a8f9e6,var(--vs-teal));box-shadow:0 0 0 1px #bffff166,0 6px 20px #59f5d340;transition:transform .2s,box-shadow .2s}
.vs-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #bffff1,0 10px 28px #59f5d366}

.vs-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 12px/1 var(--vs-display);letter-spacing:3px;text-transform:uppercase;color:var(--vs-dim)}
.vs-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--vs-teal);box-shadow:0 0 10px var(--vs-teal)}
.vs h2{margin:0;font:500 clamp(40px,6.4vw,92px)/.98 var(--vs-display);letter-spacing:-.5px}
.vs-lede{max-width:46ch;margin:26px 0 0;color:var(--vs-dim);font-size:clamp(16px,1.35vw,19px)}

/* 1 · Opening */
.vs-hero{position:relative;height:100svh;min-height:620px;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.vs-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.62;transform:scale(calc(1.08 + .12 * var(--p,0)));filter:saturate(1.2) blur(calc(var(--p,0) * 8px))}
.vs-hero-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 50%,#060a1133,#060a11cc 70%,var(--vs-bg)),linear-gradient(180deg,#060a1199,transparent 30%,transparent 70%,var(--vs-bg))}
.vs-hero-copy{position:relative;text-align:center;padding:0 20px;transform:translateY(calc(var(--p,0) * -90px));opacity:calc(1 - var(--p,0) * 1.4)}
.vs-hero .vs-eyebrow{justify-content:center}
.vs-wordmark{display:flex;justify-content:center;margin:0;font:500 clamp(84px,19vw,300px)/.9 var(--vs-display);letter-spacing:clamp(4px,1.6vw,26px);color:var(--vs-ice);text-shadow:0 0 60px #65beff40}
.vs-wordmark span{display:inline-block;background:linear-gradient(180deg,#f4faff,#a9cdee 70%,#6f8fb0);-webkit-background-clip:text;background-clip:text;color:transparent;animation:vs-rise 1.4s var(--vs-ease) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
@keyframes vs-rise{from{opacity:0;transform:translateY(60%) rotateX(70deg);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
.vs-hero-pulse{display:block;width:min(1100px,92vw);height:clamp(60px,9vw,120px);margin:-1.5vw auto 0;overflow:visible}
.vs-hero-pulse path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vs-pulse-line{stroke:var(--vs-teal);stroke-width:2.6;stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);animation:vs-draw 2.6s .9s var(--vs-ease) forwards}
.vs-pulse-glow{stroke:#59f5d3;stroke-width:10;opacity:.35;filter:blur(8px);stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);animation:vs-draw 2.6s .9s var(--vs-ease) forwards}
@keyframes vs-draw{to{stroke-dashoffset:0}}
.vs-hero-line{margin:18px 0 0;font:500 clamp(20px,2.4vw,34px)/1.25 var(--vs-display);color:var(--vs-ink);animation:vs-fade 1.2s 1.4s both}
@keyframes vs-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vs-scroll-cue{position:absolute;bottom:28px;left:50%;translate:-50% 0;display:grid;justify-items:center;gap:10px;text-decoration:none;color:var(--vs-dim);font:500 11px/1 var(--vs-display);letter-spacing:3px;text-transform:uppercase;animation:vs-fade 1s 2.2s both}
.vs-scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--vs-teal),transparent);animation:vs-drip 2s 2.4s ease-in-out infinite}
@keyframes vs-drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* pinned scenes */
.vs-pin{position:relative}
.vs-glass{height:320vh}
.vs-listen{height:260vh}
.vs-sticky{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}

/* 2 · Glass: the panel tilts out of the dark and settles flat */
.vs-glass .vs-sticky{grid-template-columns:minmax(300px,.8fr) 1.4fr;gap:clamp(24px,4vw,64px);padding:0 clamp(20px,5vw,80px);max-width:1500px;margin:0 auto}
.vs-glass-copy h2{display:grid;min-height:2em}
.vs-swap{grid-area:1/1;opacity:0;transform:translateY(30px);filter:blur(8px);transition:opacity .6s var(--vs-ease),transform .6s var(--vs-ease),filter .6s}
.vs-swap.on{opacity:1;transform:none;filter:none}
.vs-stage-3d{position:relative;perspective:1600px;--k:clamp(0,calc(var(--p,0) * 1.6),1)}
.vs-device{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;transform-style:preserve-3d;
 transform:rotateX(calc((1 - var(--k)) * 52deg)) rotateZ(calc((1 - var(--k)) * -10deg)) translateY(calc((1 - var(--k)) * 60px)) scale(calc(.78 + var(--k) * .22));
 box-shadow:0 0 0 1px #b9dcff2e,0 40px 120px #020810cc,0 0 90px calc(var(--k) * 10px) #65beff26;background:#0b121b}
.vs-device video{display:block;width:100%;height:100%;object-fit:cover}
.vs-device-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent calc(var(--p,0) * 140% - 40%),#eaf6ff2e calc(var(--p,0) * 140% - 30%),transparent calc(var(--p,0) * 140% - 18%));mix-blend-mode:screen}
.vs-device-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.5px;background:radial-gradient(70% 60% at 0 0,#a9dcff,transparent 60%),radial-gradient(70% 60% at 100% 100%,#c9a2ff,transparent 60%),linear-gradient(#b9dcff30,#b9dcff10);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.vs-device-shadow{position:absolute;left:8%;right:8%;bottom:-60px;height:60px;border-radius:50%;background:radial-gradient(closest-side,#65beff33,transparent);filter:blur(20px);opacity:var(--k)}

/* 3 · Pulse */
.vs-listen .vs-sticky{grid-template-rows:auto auto;align-content:center;gap:clamp(28px,5vh,64px);padding:0 clamp(20px,5vw,80px);max-width:1500px;margin:0 auto}
.vs-listen-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.vs-listen-copy .vs-eyebrow{grid-column:1/-1;margin:0}
.vs-listen-copy .vs-lede{margin:0;justify-self:end}
.vs-wave{margin:0;padding:clamp(18px,2.4vw,30px);border-radius:28px;background:linear-gradient(176deg,#e6f3ff12,#e6f3ff04 30%,transparent 55%),#0a1524a6;border:1px solid #b9dcff24;box-shadow:inset 0 1px 0 #e8f4ff33,inset 0 -3px 8px #020c1ba6,0 30px 80px #02081099;backdrop-filter:blur(10px)}
.vs-wave svg{display:block;width:100%;height:clamp(150px,26vh,260px);overflow:visible}
.vs-wave path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vs-wave-rest{stroke:#59f5d3;stroke-width:1.1;opacity:.16}
.vs-wave-line{stroke:url(#vs-wave-fade);stroke-width:2.6}
.vs-wave-glow{stroke:#59f5d3;stroke-width:9;opacity:.28;filter:blur(7px)}
.vs-wave-head{fill:#d8fff6;filter:drop-shadow(0 0 10px #59f5d3)}
.vs-wave figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;color:var(--vs-dim);font:500 12px/1.2 var(--vs-display);letter-spacing:1.5px;text-transform:uppercase}
.vs-wave-time{color:var(--vs-teal);min-width:4ch}

/* 4 · Tools bento */
.vs-tools,.vs-screening,.vs-film{position:relative;max-width:1500px;margin:0 auto;padding:clamp(80px,14vh,160px) clamp(20px,5vw,80px)}
.vs-tools-head,.vs-screening-head,.vs-film-head{margin-bottom:clamp(36px,6vh,64px)}
.vs-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vs-card{position:relative;display:grid;grid-template-rows:1fr auto;overflow:hidden;border-radius:26px;min-height:420px;isolation:isolate;
 background:linear-gradient(176deg,#e6f3ff10,#e6f3ff03 30%,transparent 55%),#0a1524;border:1px solid #b9dcff1f;box-shadow:inset 0 1px 0 #e8f4ff2e,0 24px 60px #02081080;transition:transform .5s var(--vs-ease),box-shadow .5s,border-color .4s}
.vs-card-wide{grid-column:span 2}
.vs-card-tall{grid-column:span 3;min-height:360px;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr}
.vs-card video{width:100%;height:100%;min-height:0;object-fit:cover;opacity:.92;transition:transform 1.2s var(--vs-ease)}
.vs-card>div{position:relative;padding:22px 24px 24px;background:linear-gradient(180deg,transparent,#060a11e6 30%)}
.vs-card-tall>div{display:flex;flex-direction:column;justify-content:center;background:none}
.vs-card span{font:500 11px/1 var(--vs-display);letter-spacing:3px;text-transform:uppercase;color:var(--vs-teal)}
.vs-card h3{margin:10px 0 6px;font:500 clamp(22px,1.9vw,28px)/1.1 var(--vs-display);color:var(--vs-ink)}
.vs-card p{margin:0;color:var(--vs-dim);font-size:15px}
.vs-card::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px 260px at var(--mx,50%) var(--my,30%),#cfe7ff1f,transparent 70%)}
.vs-card:hover{transform:translateY(-4px);border-color:#b9dcff3d;box-shadow:inset 0 1px 0 #e8f4ff40,0 34px 80px #020810a6,0 0 60px #65beff1a}
.vs-card:hover::after{opacity:1}
.vs-card:hover video{transform:scale(1.035)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(46px) scale(.98);filter:blur(6px);transition:opacity .9s var(--vs-ease),transform .9s var(--vs-ease),filter .9s;transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none;filter:none}

/* 5 · The real player */
.vs-screening::before{content:'';position:absolute;inset:8% -10% auto;height:70%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,#2a5fa033,transparent 70%);filter:blur(40px)}
.vs-player-stage{position:relative;padding:clamp(14px,2vw,26px);border-radius:34px;background:linear-gradient(176deg,#e6f3ff0f,transparent 40%),#08111ccc;border:1px solid #b9dcff1f;box-shadow:inset 0 1px 0 #e8f4ff26,0 40px 120px #020810b3;
 transform:perspective(1600px) rotateX(calc((1 - var(--p,1)) * 14deg)) scale(calc(.94 + var(--p,1) * .06));transform-origin:50% 0}
.vs .screening-label{display:flex;justify-content:space-between;margin:2px 6px 14px;color:var(--vs-dim);font:500 11px/1 var(--vs-display);letter-spacing:2.5px}
.vs .screening-label b{color:var(--vs-ink);margin-left:12px}
.vs .film-credit{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:22px 6px 4px}
.vs .film-credit h2{font:500 26px/1.1 var(--vs-display)}
.vs .film-credit h2 span{display:none}
.vs .film-credit p{margin:6px 0 0;color:var(--vs-dim)}
.vs .film-credit>a{color:var(--vs-dim);text-decoration:none;white-space:nowrap}
.vs .film-credit>a:hover{color:var(--vs-ink)}
.vs .demo-chooser{margin:28px 0 0;padding:0}
.vs .demo-chooser .demo-option{border-radius:18px;background:#0a1524;border:1px solid #b9dcff1f;transition:transform .3s var(--vs-ease),border-color .3s}
.vs .demo-chooser .demo-option:hover{transform:translateY(-3px);border-color:#b9dcff47}
.vs .demo-chooser .demo-option[aria-current=true]{border-color:#59f5d380;box-shadow:0 0 0 1px #59f5d340,0 0 30px #59f5d322}
.vs-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(40px,6vh,70px)}
.vs-notes article{padding:22px;border-radius:20px;border:1px solid var(--vs-line);background:#0a152466}
.vs-notes span{font:500 11px/1 var(--vs-display);letter-spacing:2.5px;color:var(--vs-teal)}
.vs-notes h3{margin:12px 0 8px;font:500 19px/1.2 var(--vs-display)}
.vs-notes p{margin:0;color:var(--vs-dim);font-size:14.5px}

/* 6 · Film */
.vs-film-frame{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:16/9;border:1px solid #b9dcff24;box-shadow:0 40px 120px #020810cc,0 0 80px #65beff14}
.vs-film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.vs-film-sound{position:absolute;right:18px;bottom:18px;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:600;color:var(--vs-ink);background:#0a1524b3;border:1px solid #b9dcff33;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s}
.vs-film-sound:hover{background:#13253bcc}

/* marquee + footer */
.vs-built{padding:40px 0 30px;border-top:1px solid var(--vs-line);border-bottom:1px solid var(--vs-line);overflow:hidden}
.vs-marquee{display:flex;width:max-content;animation:vs-marquee 38s linear infinite}
.vs-marquee>div{display:flex;align-items:center;gap:34px;padding-right:34px}
.vs-marquee span{font:500 clamp(28px,4vw,56px)/1 var(--vs-display);color:#cfe7ff;opacity:.85;white-space:nowrap}
.vs-marquee i{width:10px;height:10px;border-radius:50%;background:var(--vs-teal);box-shadow:0 0 14px var(--vs-teal)}
@keyframes vs-marquee{to{transform:translateX(-50%)}}
.vs-built-note{max-width:1500px;margin:24px auto 0;padding:0 clamp(20px,5vw,80px);color:var(--vs-dim);font-size:14px}
.vs-footer{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;max-width:1500px;margin:0 auto;padding:36px clamp(20px,5vw,80px) 48px;color:var(--vs-dim);font-size:14px}
.vs-footer .footer-brand{margin-right:auto;font:500 16px/1 var(--vs-display);letter-spacing:5px;color:var(--vs-ice);text-decoration:none}

/* the old page's notes area is not used by this layout */
.vs .idea,.vs .intro{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
 .vs-links{display:none}
 .vs-glass .vs-sticky{grid-template-columns:1fr;align-content:center;gap:28px}
 .vs-glass-copy h2{min-height:0}
 .vs-glass .vs-lede{display:none}
 .vs-bento{grid-template-columns:1fr 1fr}
 .vs-card-wide{grid-column:span 2}
 .vs-card-tall{grid-column:span 2;grid-template-columns:1fr;grid-template-rows:1fr auto}
 .vs-notes{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
 .vs-nav{gap:8px;padding:6px 6px 6px 14px;top:10px;justify-content:space-between}
 .vs-modes{display:none}/* the player keeps its own Watch / Explore / Access controls */
 .vs-cta{padding:10px 14px;font-size:14px}
 .vs-glass{height:240vh}.vs-listen{height:200vh}
 .vs-listen-copy{grid-template-columns:1fr;gap:16px}
 .vs-listen-copy .vs-lede{justify-self:start;font-size:15px}
 .vs-wave figcaption span:nth-child(2){display:none}
 .vs-bento{grid-template-columns:1fr}
 .vs-card,.vs-card-wide,.vs-card-tall{grid-column:auto;min-height:360px}
 .vs-notes{grid-template-columns:1fr}
 .vs-screening{padding-left:8px;padding-right:8px}
 .vs-screening-head,.vs-notes{padding:0 12px}
 .vs-player-stage{padding:6px;border-radius:22px;transform:none}
 .vs-wordmark{letter-spacing:2px}
 .vs .film-credit{flex-direction:column;align-items:flex-start}
 .vs .screening-label{flex-direction:column;gap:8px}
 .vs-film-sound{right:10px;bottom:10px;padding:9px 12px;font-size:13px}
}

/* ---------- calm ---------- */
@media (prefers-reduced-motion:reduce){
 .vs *,.vs *::before,.vs *::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .vs-marquee{animation:none}
 [data-reveal]{opacity:1;transform:none;filter:none}
 .vs-swap{transition:none}
 .vs-glass,.vs-listen{height:auto}
 .vs-sticky{position:relative;height:auto;padding-top:120px;padding-bottom:60px}
}
@media (forced-colors:active){.vs em{color:CanvasText;background:none}.vs-nav,.vs-card,.vs-wave,.vs-player-stage{border:1px solid CanvasText}}