/* AELX — onelastfix.lol */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cascadia Mono"; src: url("../fonts/CascadiaMono.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }

:root {
  --bg: #050608;
  --bg-2: #0a0c10;
  --ink: #e8ebef;
  --ink-dim: #8b929c;
  --ink-faint: #555b65;
  --line: rgba(232, 235, 239, .14);
  --cobalt: #2f6bff;
  --pad: clamp(18px, 4.6vw, 72px);
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--sans); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video, iframe { display: block; max-width: 100%; }
::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.dim { color: var(--ink-dim); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; text-decoration: none; }
.skip:focus { top: 12px; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: var(--bg); }
main, .foot { position: relative; z-index: 1; }

/* ───────── header ───────── */
.top { position: fixed; z-index: 20; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: clamp(14px, 2.4vw, 26px) var(--pad); pointer-events: none; mix-blend-mode: difference; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; }
.brand-mark { width: 22px; display: block; }
.brand-mark svg { display: block; width: 100%; height: auto; }
.top nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.top nav a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 6px 0; position: relative; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top nav a:hover::after, .top nav a:focus-visible::after { transform: scaleX(1); }

/* ───────── stage (hero + work, pinned) ───────── */
.stage { height: 430vh; position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero, .work { position: absolute; inset: 0; }

.hero { pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero-still { display: none; }
.hero-copy { position: absolute; left: var(--pad); bottom: clamp(28px, 7vh, 72px); }
.hero-copy h1 { font-weight: 500; font-size: clamp(22px, 2.5vw, 38px); letter-spacing: -.02em; line-height: 1.08; }
.hero-copy .role { margin-top: 12px; color: var(--ink-dim); }
.hero-side { position: absolute; right: var(--pad); bottom: clamp(28px, 7vh, 72px); }
.hint { position: absolute; left: 50%; bottom: clamp(28px, 7vh, 72px); transform: translateX(-50%); color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hint i { width: 1px; height: 34px; background: linear-gradient(var(--ink-faint), transparent); display: block; animation: hint 2.6s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px 13px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; background: rgba(5, 6, 8, .35); backdrop-filter: blur(8px);
  transition: border-color .3s, background .3s, color .3s; }
.btn:hover, .btn:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.btn-ico { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.btn-lg { padding: 18px 28px 18px 22px; font-size: 12.5px; }

/* work / carousel */
.work { opacity: 0; visibility: hidden; }
.work.on { visibility: visible; }
.track { position: absolute; inset: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.track.dragging { cursor: grabbing; }
.slide { position: absolute; left: 0; top: 0; overflow: hidden; background: var(--bg-2); will-change: transform; contain: layout paint; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 6, 8, .82), rgba(5, 6, 8, 0) 46%); pointer-events: none; }
.slide-info { position: absolute; z-index: 2; left: clamp(16px, 3vw, 44px); right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3.2vw, 40px); display: grid; gap: 8px; pointer-events: none; }
.slide-info h2 { font-weight: 500; font-size: clamp(26px, 4.4vw, 68px); letter-spacing: -.03em; line-height: 1; }
.slide-info .mono { color: rgba(232, 235, 239, .72); }
.slide-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; cursor: inherit; text-align: right; }
.slide-open span { position: absolute; right: clamp(16px, 3vw, 44px); bottom: clamp(18px, 3.2vw, 42px); display: inline-flex; gap: 10px; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.slide-open span::after { content: "→"; font-size: 14px; }
.slide.active .slide-open { cursor: pointer; }
.slide.active .slide-open:hover span, .slide.active .slide-open:focus-visible span { opacity: 1; transform: none; }
.slide:not(.active) img { filter: brightness(.55) saturate(.8); transition: filter .5s; }
.slide.active img { transition: filter .5s; }
.work-label { position: absolute; left: var(--pad); color: var(--ink-dim); }
.work-ui { position: absolute; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; }
.counter { color: var(--ink-dim); }
.counter b { color: var(--ink); font-weight: 400; }
.arrows { display: flex; gap: 10px; }
.arrow { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color .3s, background .3s, color .3s, opacity .3s; }
.arrow svg, .close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.arrow:hover:not(:disabled), .arrow:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.arrow:disabled { opacity: .3; cursor: default; }

/* ───────── panels ───────── */
.panel { background: var(--bg); padding: clamp(80px, 14vh, 160px) var(--pad); position: relative; }
.kicker { color: var(--ink-dim); margin-bottom: clamp(24px, 4vh, 44px); }
.reel-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 1280px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel-idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 16px;
  background: radial-gradient(60% 80% at 70% 20%, rgba(47, 107, 255, .13), transparent 60%), linear-gradient(120deg, #0b0d12, #06070a); }
.reel-links { margin-top: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ext { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.ext::after { content: "↗"; font-size: 13px; color: var(--ink-dim); transition: transform .3s var(--ease), color .3s; }
.ext:hover, .ext:focus-visible { border-color: var(--ink); }
.ext:hover::after { transform: translate(2px, -2px); color: var(--ink); }

.about { border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.bio { font-size: clamp(21px, 2.35vw, 36px); line-height: 1.28; letter-spacing: -.018em; font-weight: 400; max-width: 24em; text-wrap: pretty; }
.tools { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tools summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; }
.tools summary::-webkit-details-marker { display: none; }
.plus { width: 13px; height: 13px; position: relative; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: currentColor; transition: transform .35s var(--ease); }
.plus::after { transform: rotate(90deg); }
.tools[open] .plus::after { transform: rotate(0); }
.tools dl { padding: 4px 0 22px; display: grid; gap: 8px; }
.tools dt { color: var(--ink-dim); margin-top: 10px; }
.tools dd { color: var(--ink); font-size: 15px; line-height: 1.55; max-width: 38em; }
.links { margin-top: 28px; display: grid; gap: 12px; justify-items: start; }

/* ───────── the lab ───────── */
.lab { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; border-top: 1px solid var(--line); }
.lab-label { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); text-align: left; }
.lab-title { font-family: var(--mono); font-weight: 300; font-size: clamp(30px, 5.2vw, 76px); letter-spacing: .02em; line-height: 1; color: var(--ink); text-shadow: 0 0 28px rgba(5, 6, 8, .9); }
.lab-caption { margin-top: clamp(10px, 1.4vw, 18px); color: rgba(232, 235, 239, .56); font-size: clamp(11px, 1vw, 13.5px); letter-spacing: .14em; text-transform: none; text-shadow: 0 0 14px rgba(5, 6, 8, 1); min-height: 1.5em; }

.foot { background: var(--bg); border-top: 1px solid var(--line); padding: 22px var(--pad); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ───────── case view ───────── */
.case, .modal { position: fixed; inset: 0; z-index: 50; background: var(--bg); }
.case[hidden], .modal[hidden] { display: none; }
.case { opacity: 0; transition: opacity .35s; }
.case.in { opacity: 1; }
.case-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.case-hero { height: 64vh; height: 64svh; background: var(--bg-2); overflow: hidden; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: clamp(28px, 5vw, 72px) var(--pad) clamp(60px, 10vh, 120px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px);
  opacity: 0; transform: translateY(14px); transition: opacity .5s .1s, transform .7s .1s var(--ease); }
.case.in .case-body { opacity: 1; transform: none; }
.case-body h2 { font-weight: 500; font-size: clamp(34px, 6vw, 92px); letter-spacing: -.035em; line-height: .98; }
.case-body .lede { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.42; max-width: 30em; color: var(--ink); text-wrap: pretty; }
.case-body .note { margin-top: 12px; color: var(--ink-dim); font-size: 14px; max-width: 34em; }
.meta { display: grid; gap: 0; align-content: start; }
.meta div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.meta div:last-of-type { border-bottom: 1px solid var(--line); }
.meta dt { color: var(--ink-dim); }
.meta dd { font-size: 14.5px; }
.case-actions { margin-top: 24px; display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: center; }
.case-media { grid-column: 1 / -1; display: grid; gap: clamp(14px, 2vw, 28px); }
.case-media figure { margin: 0; background: var(--bg-2); border: 1px solid var(--line); }
.case-media video, .case-media img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; background: #000; }
.case-media figure.vertical { max-width: min(100%, 440px); }
.close { position: fixed; z-index: 60; right: var(--pad); top: clamp(14px, 2.4vw, 26px); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(232, 235, 239, .3);
  background: rgba(5, 6, 8, .55); backdrop-filter: blur(8px); display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; }
.close:hover, .close:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ghost { position: fixed; z-index: 55; left: 0; top: 0; object-fit: cover; pointer-events: none; transform-origin: 0 0; will-change: transform, width, height; }

.modal { background: rgba(5, 6, 8, .94); display: grid; place-items: center; padding: 70px var(--pad) 30px; }
.modal-inner { width: min(100%, 1280px, calc((100vh - 170px) * 16 / 9)); }

/* ───────── still mode: reduced motion / no WebGL ───────── */
html.still #gl { display: none; }
html.still .stage { height: auto; }
html.still .pin { position: static; height: auto; overflow: visible; }
html.still .hero, html.still .work { position: relative; inset: auto; height: 100vh; height: 100svh; min-height: 520px; }
html.still .work { opacity: 1; visibility: visible; overflow: hidden; }
html.still .hero-still { display: grid; place-items: center; position: absolute; inset: 0;
  background: radial-gradient(42% 46% at 58% 38%, rgba(47, 107, 255, .16), transparent 70%), radial-gradient(50% 60% at 40% 60%, rgba(255, 255, 255, .05), transparent 70%); }
html.still .hero-still svg { width: min(52vw, 46vh, 420px); height: auto; color: #cfd6e0; filter: drop-shadow(0 0 1px #fff) drop-shadow(10px 14px 30px rgba(47, 107, 255, .35)); }
html.still .hint { display: none; }
html.still .lab { background-color: #07090c;
  background-image: radial-gradient(40% 55% at 72% 46%, rgba(47, 107, 255, .2), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1l27 15.6v31.2L28 63.4 1 47.8V16.6zM28 98V63.4M1 16.6V0M55 16.6V0' fill='none' stroke='%23222a36' stroke-width='2'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ───────── small screens ───────── */
@media (max-width: 760px) {
  .top nav a:nth-child(1) { display: none; }
  .hero-copy { bottom: 112px; }
  .hero-side { left: var(--pad); right: auto; bottom: 34px; }
  .hint { left: auto; right: var(--pad); transform: none; bottom: 34px; }
  .about-grid, .case-body { grid-template-columns: minmax(0, 1fr); }
  .case-hero { height: 44vh; height: 44svh; }
  .meta div { grid-template-columns: 8em 1fr; }
  .arrow { width: 44px; height: 44px; }
  .slide-open span { display: none; }
}

/* Scene navigation and the Lab's optical centre. */
.top { mix-blend-mode:normal; }
.top .brand { color:#9dabab; }
.top nav { align-items:center; gap:0; border:1px solid #435759; border-radius:40px; background:#0c1113ee; box-shadow:0 5px 17px #538f9640; padding:3px 17px; }
.top nav a { display:flex; align-items:center; gap:15px; padding:9px 7px; font-weight:400; }
.top nav a:first-child:after { position:static; width:35px; height:1px; transform:none; background:#91aaaa; }
.hero-copy h1 { font:400 clamp(12px,1.2vw,18px)/1.2 var(--mono); }
.hero-copy .role { margin-top:5px; }
.hint { top:29%; bottom:auto; left:50%; right:auto; color:#99b9c1; font-size:11px; }
.reel-idle { background:linear-gradient(90deg,#060b0de0,#070a0c33),url('../media/vox/cover.jpg') center/cover; }
.lab-label { left:clamp(20px,21vw,460px); }
.lab-title { font-size:clamp(26px,3.6vw,60px); text-transform:uppercase; }
.lab-reel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:clamp(68px,10vw,148px); aspect-ratio:1; border:2px solid #ccd7d5b0; border-radius:50%; color:#d3dadadd; text-decoration:none; font:300 clamp(46px,7vw,90px)/1 var(--sans); text-shadow:0 1px 9px #101517; }
.lab-side { position:absolute; top:50%; left:61%; transform:translateY(-50%); line-height:1.7; text-shadow:0 1px 8px black; }
@media(max-width:760px) {
 .top nav a:nth-child(1){display:flex;}
 .lab-label{left:6%;}
 .lab-reel{left:73%;}
 .lab-side{left:6%;top:67%;}
 .hint{bottom:auto;right:auto;left:50%;transform:translateX(-50%);}
}
html:not(.still) .stage{height:1050vh}
.track{perspective:1000px}
.slide{border-radius:12px;box-shadow:inset 0 0 0 2px #dde7ee44,0 18px 45px #03050c88}
.slide::after{background:linear-gradient(0deg,#03040b9c,transparent 28%);pointer-events:none}
.slide-info{bottom:12px;left:18px;gap:2px}
.slide-info h2{font:400 clamp(15px,2vw,25px)/1.1 var(--mono)}
.slide-info .mono{display:none}
.work-label,.work-ui{z-index:4}
.work-label{padding:8px 0;text-decoration:none}
.project-index{background:#101416;padding:8vh var(--pad)}
.project-index h2{font:400 15px var(--mono);margin:0 0 22px}
#index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.1vw,20px)}
.index-card{position:relative;aspect-ratio:411/322;overflow:hidden;border-radius:4px;display:block}
.index-card img,.card-film{width:100%;height:100%;object-fit:cover}
.card-film{position:absolute;inset:0;pointer-events:none;opacity:0}
.card-film.playing{opacity:1}
.index-card span{position:absolute;inset:auto 0 0;text-align:left;font:12px var(--mono);background:#101416c9;padding:9px;opacity:0}
.index-card:is(:hover,:focus-visible) span{opacity:1}
.foot{position:relative;z-index:1;min-height:85svh;align-items:flex-end;background:transparent}
.foot .ext{margin-right:auto}
@media(max-width:760px){#index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-index{padding:56px 16px}.slide-info h2{font-size:15px}}
.case-hero{position:relative}
.touch-case-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050608}

/* ───────── v3: loader, statement, glass cards, quick list ───────── */
html:not(.still) .stage{height:1320vh}
.loader{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#030506;transition:opacity 1s ease .1s,visibility 0s 1.1s}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader>*{grid-area:1/1}
.loader .mono{color:#bfe9ee;font-size:12px;letter-spacing:.12em}
.loader-ring{width:112px;aspect-ratio:1;border-radius:50%;border:1px solid #2f8fa3;
  background:repeating-linear-gradient(115deg,#2f8fa355 0 2px,transparent 2px 7px);
  -webkit-mask:radial-gradient(circle,#000 0 54%,transparent 55% 96%,#000 97%);mask:radial-gradient(circle,#000 0 54%,transparent 55% 96%,#000 97%);
  box-shadow:0 0 40px #2f8fa355;animation:loader-turn 6s linear infinite}
@keyframes loader-turn{to{transform:rotate(360deg)}}

.statement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.still .statement{position:static;width:auto;height:auto;clip-path:none;white-space:normal;padding:12vh var(--pad);display:grid;gap:10px}
html.still .statement h2{font:300 clamp(34px,7vw,110px)/1 var(--mono);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:18px}
html.still .statement p{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}

.track{perspective:1100px}
.slide{border-radius:26px;background:#0b1c20;
  box-shadow:inset 0 0 0 1px #b9fff566,inset 0 0 0 9px #0f3338d9,inset 0 0 0 10px #7fe9e033,0 0 70px #29d3c626,0 40px 90px #000c}
.slide img,.slide .card-film{inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);border-radius:18px}
.slide::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(118deg,#ffffff2e 0%,#ffffff05 24%,transparent 46%,transparent 72%,#74f0ff1f 100%)}
.slide::after{inset:9px;border-radius:18px;background:linear-gradient(0deg,#03040bb8,transparent 34%)}
.slide:not(.active){opacity:.82}
.slide:not(.active) img{filter:brightness(.5) saturate(.75) blur(1.5px)}
.slide:nth-child(3n+2){box-shadow:inset 0 0 0 1px #ffb7a866,inset 0 0 0 9px #3a1512d9,inset 0 0 0 10px #ff7a6633,0 0 70px #ff5a4426,0 40px 90px #000c}
.slide:nth-child(3n){box-shadow:inset 0 0 0 1px #d6c2ff66,inset 0 0 0 9px #22173dd9,inset 0 0 0 10px #a98bff33,0 0 70px #8a5cff26,0 40px 90px #000c}
.slide-info{bottom:26px;left:30px;z-index:3}
.slide-info h2{font:300 clamp(17px,2.3vw,34px)/1.05 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 2px 18px #000}
.slide-open{z-index:4}

.quick{position:absolute;z-index:5;left:var(--pad);bottom:clamp(90px,17vh,170px);display:grid;gap:9px;justify-items:start;max-width:23vw}
.quick p{color:#f1f5f6;margin-bottom:6px;font-size:11.5px}
.quick-item{color:#a78bff;font-size:11.5px;text-align:left;transition:color .25s,transform .35s cubic-bezier(.2,.7,.1,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.quick-item:hover,.quick-item:focus-visible{color:#fff;transform:translateX(6px)}
.quick-item.on{color:#7ff3ea}
@media(max-width:1180px),(max-height:680px){.quick{display:none}}
html.still .quick{display:none}
.hero-copy h1{text-transform:uppercase;letter-spacing:.1em}
.work-ui{justify-content:flex-end;gap:26px}
.quick{bottom:clamp(40px,7vh,90px);padding:18px 60px 18px 0;background:radial-gradient(120% 100% at 0% 60%,#04070ae6 0%,#04070a99 55%,transparent 100%)}
.quick::before{content:"";position:absolute;inset:-30px -40px -30px calc(-1 * var(--pad));z-index:-1;background:radial-gradient(90% 80% at 20% 55%,#04070ad9,transparent 75%)}
html:not(.still) .statement{position:absolute;inset:0;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;pointer-events:none;opacity:0}
html:not(.still) .statement h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.statement-notes{position:absolute;left:62%;top:52%;display:grid;gap:22px;font-size:clamp(10.5px,.95vw,14px);line-height:1.75;letter-spacing:.12em;color:#f2f6f7;text-shadow:0 1px 14px #000}
html.still .statement-notes{position:static;color:var(--ink-dim)}
@media(max-width:760px){.statement-notes{left:var(--pad);top:auto;bottom:11vh;gap:12px}}
/* shorter journey: ~360vh for the opening, ~26vh of scroll per project */
html:not(.still) .stage{height:780vh}
.skip-work{margin-right:auto;margin-left:min(26vw,360px);padding:10px 16px;border:1px solid #43575999;border-radius:40px;background:#0c1113cc;color:#cfe3e6;text-decoration:none;transition:border-color .25s,color .25s}
.skip-work:hover,.skip-work:focus-visible{border-color:#7ff3ea;color:#fff}
@media(max-width:1180px){.skip-work{margin-left:0}}
html.still .skip-work{display:none}
/* ───────── sound toggle ───────── */
.sound{position:fixed;z-index:25;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:11px;padding:9px 16px 9px 13px;border:1px solid #43575999;border-radius:40px;background:#0c1113cc;color:#9fb3b6;backdrop-filter:blur(8px);transition:color .3s,border-color .3s,box-shadow .3s}
.sound:hover,.sound:focus-visible{color:#fff;border-color:#7ff3ea}
.sound.on{color:#e9fbfa;border-color:#7ff3ea99;box-shadow:0 4px 22px #2bd4c838}
.sound .mono{font-size:10.5px}
.bars{display:flex;align-items:flex-end;gap:2.5px;height:13px}
.bars i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;transform-origin:bottom}
.sound.on .bars i{height:13px;animation:bar 1s ease-in-out infinite}
.sound.on .bars i:nth-child(2){animation-duration:.72s;animation-delay:-.3s}
.sound.on .bars i:nth-child(3){animation-duration:1.24s;animation-delay:-.6s}
.sound.on .bars i:nth-child(4){animation-duration:.86s;animation-delay:-.15s}
.sound.on .bars i:nth-child(5){animation-duration:1.1s;animation-delay:-.45s}
@keyframes bar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@media(max-width:760px){.sound{left:auto;right:var(--pad);transform:none;bottom:12px;padding:8px 12px}.sound .mono{display:none}}
/* ───────── cards drawn in WebGL: the HTML slides remain as hit-targets and titles ───────── */
html.gl-cards .slide{background:none;box-shadow:none;opacity:1}
html.gl-cards .slide img,html.gl-cards .slide .card-film{opacity:0}
html.gl-cards .slide::before,html.gl-cards .slide::after{display:none}
html.gl-cards .slide:not(.active) .slide-info{opacity:0}
html.gl-cards .slide .slide-info{transition:opacity .35s}
/* ───────── entry gate ───────── */
.loader.gate #loader-n{opacity:0}
.enter{grid-area:1/1;width:112px;aspect-ratio:1;border-radius:50%;color:#e9fbfa;font-size:12px;letter-spacing:.22em;text-indent:.22em;transition:color .3s,text-shadow .3s,transform .5s cubic-bezier(.2,.7,.1,1)}
.enter:hover,.enter:focus-visible{color:#fff;text-shadow:0 0 18px #7ff3ea;transform:scale(1.08);outline:none}
.loader.gate .loader-ring{border-color:#7ff3ea;box-shadow:0 0 54px #2bd4c866;transition:border-color .5s,box-shadow .5s}
.enter-mute{grid-area:1/1;transform:translateY(104px);color:#6f8589;font-size:10.5px;padding:8px 12px;transition:color .3s}
.enter-mute:hover,.enter-mute:focus-visible{color:#cfe3e6}
.drive-fallback{padding:14px 18px}
.enter[hidden],.enter-mute[hidden]{display:none}
/* titles sit inside the picture of the glass slab, not on its dark rim */
html.gl-cards .slide .slide-info{left:calc(30px + 3.2%);bottom:calc(26px + 3.4%)}
html.gl-cards .slide-open span{right:calc(clamp(16px,3vw,44px) + 3%);bottom:calc(clamp(18px,3.2vw,42px) + 3.4%)}