.lab-page{background:#15131a}.lab-journey{height:150svh;min-height:1000px}.lab-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:100px 8vw 70px;gap:5vw;perspective:1200px}.lab-stage .storm-video{filter:grayscale(.55) brightness(.6);z-index:-3;transform:scale(calc(1 + var(--lab-progress,0) * .2));will-change:transform}.lab-atmosphere{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 73% 60%,#8d25313b,transparent 60%),linear-gradient(110deg,#14121ace,#1c172454);pointer-events:none}.lab-title{position:relative;z-index:2;transform:translateY(calc(var(--lab-progress,0) * -30px));transform-origin:left center}.lab-title h1{font:400 clamp(85px,12vw,190px)/1 var(--display);letter-spacing:-.02em;margin:18px 0 26px;text-shadow:none;white-space:nowrap}.lab-title h1 span{display:inline;font:inherit;letter-spacing:inherit;margin:0;color:#e33851}.lab-title .eyebrow{font-size:11px;letter-spacing:4px}.lab-soon{font-size:clamp(14px,1.7vw,24px);letter-spacing:.3em;margin:0}.real-flask{position:relative;width:min(100%,490px);height:75svh;max-height:750px;justify-self:center;transform:translateY(calc(var(--lab-progress,0) * -15px)) scale(calc(1 + var(--lab-progress,0) * .35));filter:drop-shadow(0 15px 35px #d4324730);will-change:transform;transform-origin:center 65%}.real-flask>img{display:block;width:100%;height:100%;object-fit:contain}.lab-liquid-bubbles{position:absolute;left:29%;width:43%;top:59%;height:22%;overflow:hidden;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);mix-blend-mode:screen}.lab-liquid-bubbles i{position:absolute;bottom:-12px;left:var(--x);width:7px;height:7px;border:1px solid #ffd5db9c;background:#ffd5db22;border-radius:50%;animation:lab-bubble var(--duration) var(--delay) linear infinite}.lab-liquid-bubbles i:nth-child(even){width:4px;height:4px}@keyframes lab-bubble{0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:.8}90%{opacity:.5}100%{transform:translate(7px,-130px) scale(1.1);opacity:0}}.lab-back{position:absolute;bottom:35px;left:8vw;font-size:10px;letter-spacing:1px;border-bottom:1px solid #eee6d950;padding:8px 0}.lab-page #lab-motion{background:none;border:1px solid #eee6d950;color:var(--bone);padding:8px 12px;border-radius:25px;font-size:9px}.lab-page .topbar{z-index:5}.lab-page .topbar nav{align-items:center}
@media(max-width:700px){.lab-journey{height:145svh;min-height:1050px}.lab-stage{grid-template-columns:1fr;gap:0;padding:105px 8vw 65px;min-height:730px;align-content:center}.lab-title h1{font-size:23vw;margin:15px 0}.lab-title .eyebrow{font-size:9px}.lab-soon{font-size:15px}.real-flask{height:48svh;max-height:470px;width:85%;margin-top:10px}.lab-back{bottom:20px}.lab-page .topbar nav{gap:16px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.lab-journey{height:auto;min-height:100svh}.lab-stage{position:relative}.real-flask,.lab-title{transform:none}.lab-stage .storm-video{display:none}.lab-stage{background:#17151d url('assets/storm.png') center/cover}.lab-liquid-bubbles{display:none}}
.lab-journey{height:240svh;min-height:1450px}.lab-interior{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--inside,0);background:radial-gradient(ellipse at 65% 38%,#c1374b66,transparent 45%),radial-gradient(ellipse at 50% 80%,#7d0925,#200d17 85%);overflow:hidden}.interior-bubbles{width:100%;height:100%;display:block}.real-flask{z-index:2;opacity:var(--flask-alpha,1);transform:translate(calc(var(--lab-progress,0) * -4vw),calc(var(--lab-progress,0) * 10vh)) scale(calc(1 + var(--lab-progress,0) * 2));transform-origin:55% 70%}.lab-title{z-index:3;text-shadow:0 2px 25px #17091466}.lab-back{z-index:4}
@media(prefers-reduced-motion:reduce){.lab-journey{height:auto;min-height:100svh}.lab-interior{display:none}.real-flask{opacity:1;transform:none}}
/* The title arrives in the centre as the visitor enters the flask. */
.lab-title{position:absolute;left:calc(8% + var(--title-center,0)*42%);top:50%;transform:translate(calc(var(--title-center,0)*-50%),-50%);text-align:center;white-space:nowrap}.real-flask{grid-column:2}.lab-soon{opacity:.9}.is-inside .lab-soon{animation:soon-pulse 3s ease-in-out infinite}.lab-interior{background:radial-gradient(ellipse at 65% 38%,#ad344966,transparent 45%),radial-gradient(ellipse at 50% 80%,#53172d,#15131a 85%)}@keyframes soon-pulse{50%{opacity:.45;letter-spacing:.34em}}@media(prefers-reduced-motion:reduce){.lab-title{position:relative;left:auto;top:auto;transform:none}.lab-soon{animation:none!important}}

/* Compact mobile composition; short screens can scroll naturally. */
.lab-arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;display:inline-block;vertical-align:middle}
@media(max-width:700px){
.lab-page .topbar{position:absolute;padding:22px 6vw;display:flex;align-items:center;justify-content:space-between}
.lab-page .topbar nav{display:flex;font-size:10px}
.lab-journey{height:auto;min-height:100svh}
.lab-stage{position:relative;height:auto;min-height:max(600px,100svh);padding:130px 6vw 110px;display:flex;align-items:center;justify-content:center;gap:10px;background:#17151d url('assets/storm.png') center/cover}
.lab-title{position:relative;left:auto;top:auto;transform:none!important;white-space:normal;text-align:center;flex:0 1 auto}
.lab-title h1{font-size:clamp(64px,21vw,145px);margin:18px 0}
.lab-title .eyebrow{font-size:9px;letter-spacing:3px;text-align:center}
.lab-soon{font-size:clamp(11px,3.2vw,16px);letter-spacing:.24em;text-align:center}
.real-flask{flex:0 0 21%;height:220px;width:21%;max-height:35svh;margin:0;transform:none!important;opacity:1!important}
.lab-interior{display:none}
.lab-back{left:50%;transform:translateX(-50%);bottom:75px;white-space:nowrap;text-align:center}
.lab-stage .storm-video{display:block;transform:none}
}