/* ═══════════════════════════════════════════════════════════
   gilliam.poto — MAIN MENU
   a game-style menu: pick a discipline, its projects drop in.
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

@font-face{font-family:'Helvetica Neue';src:url('../fonts/HelveticaNeueUltraLight.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('../fonts/HelveticaNeueThin.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('../fonts/HelveticaNeueLight.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('../fonts/HelveticaNeueRoman.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('../fonts/HelveticaNeueMedium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --teal:#72C4B4;
  --lime:#C4D400;
  --amber:#E0A24E;
  --ink:#0a0c0b;
  --hv:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Space Mono',monospace;
  --pop:cubic-bezier(0.34,1.56,0.64,1);
  --snap:cubic-bezier(0.22,1,0.36,1);
  --ease:cubic-bezier(0.4,0,0.1,1);
  --acc:var(--teal);            /* active accent, swapped by JS */
  --pad:clamp(28px,5vw,72px);
  --menu-w:clamp(280px,30vw,400px);
}

html{background:var(--ink);color:#fff}
body{font-family:var(--hv);font-weight:300;min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-y:auto;position:relative}
@media (pointer:fine){body{cursor:none} a,button{cursor:none}}
::selection{background:var(--acc);color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:none;text-align:left}
a{color:inherit;text-decoration:none}

/* ═══ CINEMATIC BACKDROP ═══ */
#stage{position:fixed;inset:0;overflow:hidden;z-index:0}
/* graded film base — deep teal-green folding to warm amber, heavy vignette */
.bg-grade{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(120,170,158,.30), transparent 55%),
    radial-gradient(90% 80% at 92% 88%, rgba(224,162,78,.22), transparent 60%),
    radial-gradient(140% 120% at 12% 62%, rgba(8,16,14,.0), rgba(6,9,8,.86) 78%),
    linear-gradient(150deg,#0c1512 0%,#11211c 30%,#1c3a31 52%,#365b4d 72%,#5d6b4f 100%);
}
/* user-droppable reel frame sits here; nearly transparent when empty */
#reel{position:absolute!important;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity .5s var(--ease)}
#reel[data-filled]{opacity:.9}
#reel::part(frame){background:transparent;border-radius:0}
#reel::part(ring){display:none}
/* legibility scrim — heavy on the left under the menu */
.bg-scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(6,9,8,.92) 0%,rgba(6,9,8,.74) 34%,rgba(6,9,8,.30) 62%,rgba(6,9,8,.12) 100%),
             linear-gradient(0deg,rgba(6,9,8,.65) 0%,transparent 26%,transparent 78%,rgba(6,9,8,.45) 100%)}
/* per-section colour wash — crossfades on select */
.bg-wash{position:absolute;inset:0;z-index:3;mix-blend-mode:soft-light;opacity:.55;transition:background .6s var(--ease)}
body[data-acc="teal"] .bg-wash{background:radial-gradient(80% 70% at 70% 40%,rgba(114,196,180,.5),transparent 70%)}
body[data-acc="lime"] .bg-wash{background:radial-gradient(80% 70% at 70% 40%,rgba(196,212,0,.42),transparent 70%)}
body[data-acc="amber"] .bg-wash{background:radial-gradient(80% 70% at 70% 40%,rgba(224,162,78,.5),transparent 70%)}
/* faint scanlines + grain — kept light per art direction */
.bg-lines{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 3px)}
.bg-grain{position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-3%,4%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
/* cinema letterbox */
.bar{position:fixed;left:0;right:0;height:0;background:#000;z-index:40;pointer-events:none;transition:height .5s var(--snap)}
.bar.top{top:0}.bar.bot{bottom:0}
body[data-cinema="1"] .bar{height:clamp(20px,4.5vh,54px)}

/* ═══ HUD CORNER TICKS ═══ */
.tick{position:fixed;width:16px;height:16px;z-index:30;pointer-events:none;opacity:.7}
.tick::before,.tick::after{content:'';position:absolute;background:rgba(255,255,255,.4)}
.tick::before{width:100%;height:1px;top:0;left:0}
.tick::after{height:100%;width:1px;top:0;left:0}
.tick.tl{top:18px;left:18px}
.tick.tr{top:18px;right:18px;transform:scaleX(-1)}
.tick.bl{bottom:18px;left:18px;transform:scaleY(-1)}
.tick.br{bottom:18px;right:18px;transform:scale(-1)}

/* ═══ TOP BAR ═══ */
/* replaced by shared nav */

/* ═══ SHARED NAV ═══ */
body > nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 28px;pointer-events:none;
}
body > nav *{pointer-events:auto}
.nav-r{display:flex;align-items:center;gap:18px}
.nav-r a{
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:lowercase;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;
}
.nav-r a:hover,.nav-r a.cur{color:rgba(255,255,255,.95)}
.nav-avail{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.42)}
.nav-dot{width:5px;height:5px;border-radius:50%;background:#72C4B4;flex:none;box-shadow:0 0 0 0 rgba(114,196,180,.6);animation:nav-pulse 2.2s ease infinite}
@keyframes nav-pulse{0%{box-shadow:0 0 0 0 rgba(114,196,180,.5)}70%{box-shadow:0 0 0 7px rgba(114,196,180,0)}100%{box-shadow:0 0 0 0 rgba(114,196,180,0)}}
.nav-tc{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.28)}
.night-toggle{background:none;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.5);border-radius:2px;cursor:pointer;padding:4px 9px;font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.night-toggle:hover{border-color:rgba(255,255,255,.55);color:#fff}
.night-toggle .nt-icon{font-size:11px;line-height:1}
.brand b{color:var(--acc)}
.tb-r{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.avail{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.avail .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(196,212,0,.6);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(196,212,0,.5)}70%{box-shadow:0 0 0 8px rgba(196,212,0,0)}100%{box-shadow:0 0 0 0 rgba(196,212,0,0)}}
.tc{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.tc .l{color:var(--acc)}
.coord{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.32)}

/* ═══ MENU ═══ */
.wrap{position:relative;z-index:20;min-height:100vh;min-height:100dvh;display:flex;align-items:center;gap:clamp(28px,5vw,86px);padding:clamp(110px,14vh,170px) var(--pad) clamp(120px,15vh,170px)}
.menu{width:var(--menu-w);flex:none}

.list{display:flex;flex-direction:column}

/* ── section row ── */
.sec{border-top:1px solid rgba(255,255,255,.1)}
.sec:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sec-head{position:relative;width:100%;display:flex;align-items:baseline;gap:14px;padding:clamp(8px,1.1vh,12px) 6px;cursor:pointer;transition:padding-left .28s var(--pop),background .25s}
.sec-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--row-acc,var(--teal));transition:width .26s var(--snap)}
.sec.sel .sec-head{padding-left:20px;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 70%)}
.sec.sel .sec-head::before{width:2px}
.sh-num{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.34);width:26px;flex:none}
.sh-name{flex:1;font-weight:300;font-size:clamp(16px,1.8vw,23px);letter-spacing:-.01em;line-height:1;text-transform:lowercase;color:rgba(255,255,255,.8);transition:color .22s,transform .28s var(--pop)}
.sec.sel .sh-name{color:#fff}
.sec.sel[data-accent="teal"] .sh-name{color:var(--teal)}
.sec.sel[data-accent="lime"] .sh-name{color:var(--lime)}
.sec.sel[data-accent="amber"] .sh-name{color:var(--amber)}
.sh-meta{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32);white-space:nowrap}
.sh-chev{position:relative;width:11px;height:11px;flex:none;align-self:center;transition:transform .3s var(--snap)}
.sh-chev::before,.sh-chev::after{content:'';position:absolute;top:50%;width:7px;height:1.4px;background:rgba(255,255,255,.55)}
.sh-chev::before{left:0;transform:rotate(45deg)}
.sh-chev::after{right:0;transform:rotate(-45deg)}
.sec.open .sh-chev{transform:rotate(180deg)}
.sec.open .sh-chev::before,.sec.open .sh-chev::after{background:var(--acc)}

/* ── dropdown panel ── */
.sec-panel{max-height:0;overflow:hidden}
.sec.open .sec-panel{max-height:none}
.sec-panel-inner{padding-bottom:6px}
/* ── ShiftCard: proj row → card with drawer ── */
.proj{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-top:1px solid rgba(255,255,255,.06);transition:background .2s;overflow:hidden}
.proj:hover,.proj:focus-within{background:rgba(255,255,255,.05)}
.proj-top{display:flex;align-items:center;gap:12px;padding:7px 6px 7px 26px;position:relative}
/* swatch: gradient thumbnail that "shifts" into the top-right on hover */
.proj-swatch{
  flex:none;width:36px;height:22px;border-radius:3px;overflow:hidden;
  opacity:0;transform:translateX(10px) scale(0.8);
  transition:opacity .32s var(--snap), transform .38s var(--pop);
  flex-shrink:0;
}
.proj:hover .proj-swatch,.proj:focus-within .proj-swatch{opacity:1;transform:none}
/* arrow moves left to make room for swatch */
.proj-top .p-arrow{margin-left:auto}
/* drawer: slides open below the row */
.proj-drawer{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--snap), opacity .35s;
  opacity:0;
}
.proj:hover .proj-drawer,.proj:focus-within .proj-drawer{grid-template-rows:1fr;opacity:1}
.proj-drawer-inner{
  overflow:hidden;display:flex;align-items:center;gap:10px;
  padding:0 6px 0 26px;
  min-height:0; /* needed for 0fr collapse */
}
.proj:hover .proj-drawer-inner{padding-bottom:9px}
.pd-bar{flex:none;width:2px;height:20px;border-radius:1px;background:var(--row-acc,var(--teal));opacity:.7}
.pd-text{font-family:var(--mono);font-size:9px;letter-spacing:.07em;line-height:1.55;color:rgba(255,255,255,.45);text-wrap:pretty}
.p-num{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.3);width:22px;flex:none}
.p-name{font-weight:300;font-size:clamp(13px,1.1vw,15px);letter-spacing:-.01em;text-transform:lowercase;color:rgba(255,255,255,.92);min-width:0;transition:transform .22s var(--pop)}
.proj:hover .p-name{transform:translateX(3px)}
.p-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.p-tag.teal{color:var(--teal)}.p-tag.lime{color:#aab800}.p-tag.amber{color:var(--amber)}
.p-kind{flex:1;font-weight:300;font-size:11px;letter-spacing:.04em;text-transform:lowercase;color:rgba(255,255,255,.4)}
.p-year{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.4);flex:none}
.p-arrow{flex:none;font-size:13px;color:var(--acc);opacity:0;transform:translate(-5px,2px);transition:opacity .2s,transform .24s var(--pop)}
.proj:hover .p-arrow{opacity:1;transform:none}
@media (max-width:620px){.p-kind{display:none}}

/* ═══ BOTTOM BAR ═══ */
.botbar{position:fixed;left:0;right:0;bottom:0;z-index:31;display:flex;justify-content:space-between;align-items:flex-end;padding:24px var(--pad) calc(var(--pad) - 6px);pointer-events:none;gap:24px;background:linear-gradient(0deg,rgba(6,9,8,.82),transparent)}
.bb-l{min-width:0;max-width:60%}
.profile{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:11px}
.profile .pic{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.profile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.profile b{color:#fff;font-weight:700}
.profile .role{color:var(--acc)}
.ticker{position:relative;overflow:hidden;height:14px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 86%,transparent)}
.ticker-run{display:inline-flex;gap:0;white-space:nowrap;animation:ticker 26s linear infinite;will-change:transform}
.ticker span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:0 4px}
.ticker span b{color:var(--acc);font-weight:400}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bb-r{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end;pointer-events:none;opacity:.55}
.prompt{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.prompt .key{display:inline-flex;align-items:center;justify-content:center;min-width:12px;height:12px;padding:0 3px;border:1px solid rgba(255,255,255,.18);border-radius:2px;font-size:6px;color:rgba(255,255,255,.55)}
.prompt em{font-style:normal;color:rgba(255,255,255,.4)}

/* ═══ GAME CURSOR ═══ */
#cur{position:fixed;z-index:9999;pointer-events:none;top:0;left:0;width:7px;height:7px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:width .18s var(--pop),height .18s var(--pop),background .15s;mix-blend-mode:difference}
#cur-ring{position:fixed;z-index:9998;pointer-events:none;top:0;left:0;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28);transform:translate(-50%,-50%);transition:width .25s var(--pop),height .25s var(--pop),border-color .2s,opacity .2s}
body.cur-hover #cur{width:5px;height:5px;background:var(--acc)}
body.cur-hover #cur-ring{width:46px;height:46px;border-color:var(--acc)}
@media (pointer:coarse){#cur,#cur-ring{display:none}}

/* ═══ DROP HINT ═══ */
.drop-hint{position:fixed;z-index:32;right:var(--pad);top:calc(var(--pad) + 96px);transform:translateX(0);font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.34);display:flex;align-items:center;gap:8px;pointer-events:none;transition:opacity .4s}
.drop-hint .sq{width:8px;height:8px;border:1px dashed rgba(255,255,255,.4)}
body.reel-filled .drop-hint{opacity:0}
.drop-hint{display:none}

@media (max-width:760px){
  :root{--menu-w:100%}
  .topbar,.botbar{flex-direction:row}
  .coord,.bb-r .prompt:nth-child(2),.bb-r .prompt:nth-child(3){display:none}
  .drop-hint{display:none}

  /* nav: brand on one line, drop the desktop-only metadata */
  .brand{white-space:nowrap;font-size:13px;padding:12px 0;margin:-12px 0}
  .nav-r{gap:4px}
  .nav-r a{padding:16px 9px;margin:-16px 0}
  .nav-avail,.nav-tc{display:none}
  .night-toggle{padding:14px 13px;margin:-11px 0}

  /* project rows: room for two-line titles, 44px rows */
  .proj-top{gap:10px;padding:12px 6px 12px 20px}
  .p-name{font-size:14px;line-height:1.3}
  .p-num{width:18px}
}
/* keyboard prompts are meaningless without a keyboard */
@media (pointer:coarse){
  .bb-r{display:none}
  .pc-close span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg-grain,.ticker-run,.avail .dot{animation:none}
  .proj{transition:none}
}

/* ═══ FULL-BLEED HOVER GRADE — the whole backdrop becomes the hovered project ═══ */
.bg-thumb{position:absolute;inset:0;z-index:2;opacity:0;background-size:cover;background-position:center;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.3s var(--ease);will-change:opacity,transform}
.bg-thumb.show{opacity:1;transform:none}
/* let the project grade dominate while previewing — soften the base + section wash */
body.previewing .bg-grade{opacity:.4;transition:opacity .6s var(--ease)}
body.previewing .bg-wash{opacity:.25!important;transition:opacity .6s var(--ease)}

/* ═══ PLAYER / GALLERY ═══ */
.player{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:clamp(18px,5vh,56px);opacity:0;pointer-events:none;transition:opacity .35s}
.player.open{opacity:1;pointer-events:auto}
.player-scrim{position:absolute;inset:0;background:rgba(4,7,6,.8);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.player-card{position:relative;z-index:2;width:min(1180px,94vw);max-height:94vh;display:flex;flex-direction:column;background:#0a0d0c;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 120px rgba(0,0,0,.6);transform:scale(.96) translateY(12px);transition:transform .42s var(--snap);overflow:hidden}
.player.open .player-card{transform:none}
.pc-close{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);padding:6px 9px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);transition:color .2s,border-color .2s}
.pc-close span{padding:1px 4px;border:1px solid rgba(255,255,255,.25);border-radius:2px;font-size:8px}
.pc-close:hover{color:#fff;border-color:#fff}
.pc-screen.buffering .pc-play{opacity:.45;animation:pc-wait 1.1s ease-in-out infinite}
/* while the player is open the nav has nothing to offer and only competes
   for taps at the top edge */
body.player-open > nav{opacity:0;pointer-events:none;transition:opacity .2s}
.pc-wait-label{position:absolute;left:0;right:0;bottom:38px;z-index:6;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);opacity:0;transition:opacity .2s;pointer-events:none}
.pc-screen.buffering .pc-wait-label,.pc-screen.failed .pc-wait-label{opacity:1}
.pc-screen.failed .pc-wait-label{color:var(--acc)}
/* the label's words come from JS in one place — no ::before override, which
   zeroed the real text and made 'buffering' and 'tap to play' invisible */
.pc-screen.is-muted .pc-wait-label{opacity:1;color:var(--acc)}
/* a picked still is a way back to the film, so say so */
.pc-thumb.active{position:relative;outline:1px solid var(--acc);outline-offset:-1px}
.pc-gallery.no-film .pc-thumb.active::after{display:none}
.pc-thumb.active::after{content:'\25B6';position:absolute;right:3px;bottom:2px;
  font-size:7px;color:var(--acc);text-shadow:0 0 3px rgba(0,0,0,.8)}
@keyframes pc-wait{0%,100%{opacity:.25}50%{opacity:.7}}
/* the stage is a black matte; the film sits centred in it at its own ratio,
   so 4:3 and 2.39 both read as a framed picture instead of a stretched one */
.pc-main{display:flex;flex-direction:column;min-width:0;background:#000}
.pc-screen iframe,.pc-vimeo{background:#000}
.pc-screen{position:relative;width:min(100%,calc(62vh * var(--pc-arn,1.7778)));margin-inline:auto;aspect-ratio:var(--pc-ar,16/9);max-height:62vh;background-size:contain;background-repeat:no-repeat;background-position:center;overflow:hidden;background-color:#000}
.pc-lines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 3px)}
.pc-play{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.pc-play button{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--pop),background .2s}
.pc-play button:hover{transform:scale(1.08);background:rgba(0,0,0,.45)}
.pc-play .tri{width:0;height:0;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.pc-screen.playing .pc-play{opacity:0;pointer-events:none}
.pc-screen.stills-only .pc-play,.pc-screen.stills-only .pc-bar{display:none}
.pc-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:13px 15px;display:flex;align-items:center;gap:11px;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.pc-track{flex:1;height:3px;background:rgba(255,255,255,.2);position:relative;cursor:pointer}
.pc-track .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);transition:width .2s linear}
.pc-tc{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.pc-gallery{display:flex;gap:6px;flex:none;align-self:flex-start}
.pc-thumb{width:clamp(96px,8vw,128px);aspect-ratio:16/9;padding:0;-webkit-appearance:none;appearance:none;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.12);opacity:.5;transition:opacity .2s,border-color .2s;cursor:pointer}
.pc-thumb:hover{opacity:.85}
.pc-thumb.active{opacity:1;border-color:var(--acc)}
.pc-strip{display:flex;gap:clamp(20px,3vw,44px);align-items:flex-end;justify-content:space-between;padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,34px);border-top:1px solid rgba(255,255,255,.1)}
.pc-strip-text{flex:1;min-width:0;display:flex;flex-direction:column}
.pc-kick{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:11px}
.pc-title{font-weight:100;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:.95;text-transform:lowercase;color:#fff;margin-bottom:13px}
.pc-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pc-meta span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.16);padding:4px 8px}
.pc-desc{font-weight:300;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:52ch}
.pc-foot{margin-top:16px;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:lowercase;color:rgba(255,255,255,.5)}
.pc-foot .pc-ar{color:var(--acc)}
@media (max-width:760px){
  .player-card{max-height:92dvh;overflow:auto}
  .pc-screen{max-height:none;width:100%}
  .pc-strip{flex-direction:column}
  .pc-gallery{flex-direction:row;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pc-gallery::-webkit-scrollbar{display:none}
}

/* new-work flag */
.p-new{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0b;background:var(--row-acc,var(--teal));padding:2px 5px 1px;border-radius:2px;flex:none;align-self:center}
.proj.is-new .proj-top::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--row-acc,var(--teal))}

/* gaussian splat viewer */
.pc-screen.splat-mode .pc-play,.pc-screen.splat-mode .pc-bar{display:none;}
.pc-screen.splat-mode .pc-lines{opacity:.2;pointer-events:none;}
.pc-screen.splat-mode{background:#0b0b0a;cursor:grab;}

/* splat capture picker */
.pc-splat-pick{display:flex;flex-direction:column;gap:6px;width:100%;}
.pc-splat-pick .sp-pick{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:transparent;border:1px solid rgba(138,132,122,.4);border-radius:2px;color:var(--mist,#8a847a);font:400 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .12s cubic-bezier(.2,.8,.2,1),border-color .12s cubic-bezier(.2,.8,.2,1);}
.pc-splat-pick .sp-pick:hover{color:#f2efe8;border-color:rgba(196,212,0,.6);}
.pc-splat-pick .sp-pick.active{color:#f2efe8;border-color:#c4d400;}
.pc-splat-pick .sp-num{color:rgba(138,132,122,.8);}
.pc-splat-pick .sp-pick.active .sp-num{color:#c4d400;}

/* shop placeholder */
.sec-soon{display:flex;align-items:center;gap:14px;padding:18px 4px;font:400 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mist,#8a847a);}
.sec-soon .ss-mark{color:var(--lime,#c4d400);font-size:13px;}
.sec-soon .ss-head{color:inherit;}
.sec-soon .ss-note{letter-spacing:.1em;text-transform:none;opacity:.7;}

/* live proxy peek panel */
.splat-peek{position:fixed;z-index:60;width:264px;background:#12110f;border:1px solid rgba(138,132,122,.45);border-radius:2px;opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .12s cubic-bezier(.2,.8,.2,1),transform .12s cubic-bezier(.2,.8,.2,1);}
.splat-peek.on{opacity:1;transform:none;}
.splat-peek::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--lime,#c4d400);}
.splat-peek .sk-head{display:flex;align-items:center;gap:8px;padding:8px 10px;font:400 9px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--mist,#8a847a);border-bottom:1px solid rgba(138,132,122,.28);}
.splat-peek .sk-dot{color:var(--lime,#c4d400);font-size:7px;}
.splat-peek .sk-stage{position:relative;width:100%;aspect-ratio:4/3;background:#0b0b0a;}