/* ===== round-3: perf cursor, codex stage, richer bg, chips, mats, playful v2 ===== */
:root{--grainbg2:none;--washA:rgba(23,67,242,.05);--washB:rgba(255,140,60,.04)}
html:not([data-theme="light"]){--washA:rgba(107,132,255,.085);--washB:rgba(96,72,168,.07)}
body{background:
  radial-gradient(1100px 600px at 82% -8%,var(--washA),transparent 60%),
  radial-gradient(950px 720px at -12% 108%,var(--washB),transparent 55%),
  var(--paper)}
#cursor{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:transform}
/* codex hero stage, static light (no pointer spill) */
.hero{position:relative}
.hero-inner{position:relative;z-index:1}
.la-stage{position:absolute;pointer-events:none;z-index:0;
  inset:clamp(6.2rem,8vw,7.6rem) clamp(1.25rem,3vw,2.25rem) clamp(2.2rem,3.4vw,3.4rem);
  border-radius:clamp(24px,3.2vw,40px)}
.la-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(138,158,255,.30);
  background:linear-gradient(140deg,rgba(255,255,255,.055),transparent 34%),rgba(24,22,19,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 90px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(19px) saturate(1.08);backdrop-filter:blur(19px) saturate(1.08)}
html[data-theme="light"] .la-stage::before{
  border-color:rgba(78,105,245,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.60) 58%,rgba(237,241,255,.62));
  box-shadow:inset 0 1px 0 #fff,0 28px 90px rgba(52,66,127,.16)}
.la-stage::after{content:"";position:absolute;inset:10px;border-radius:calc(clamp(24px,3.2vw,40px) - 10px);
  border:1px solid rgba(255,255,255,.025);pointer-events:none}
html[data-theme="light"] .la-stage::after{border-color:rgba(78,105,245,.045)}
.hero-mark{filter:drop-shadow(0 40px 65px rgba(0,0,0,.20))}
html[data-theme="light"] .hero-mark{filter:drop-shadow(0 36px 55px rgba(52,66,127,.15))}
@media(max-width:680px){.la-stage{inset:5.5rem .75rem 1rem;border-radius:24px}}
/* work grid: dark captions become glass chips, wide scrim off */
html:not([data-theme="light"]) .wi::after{opacity:0}
html:not([data-theme="light"]) .wi .cap{left:14px;bottom:14px;padding:.5rem .85rem;border-radius:12px;
  background:rgba(12,11,9,.6);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
/* logo wall dark: invert with preserved internal contrast, no solid blobs */
html:not([data-theme="light"]) .marq-track img,
html:not([data-theme="light"]) .marq-track img[alt="GetJacked"],
html:not([data-theme="light"]) .marq-track img[alt="Gamer Supps"],
html:not([data-theme="light"]) .marq-track img[alt="Sanctum"],
html:not([data-theme="light"]) .f-logos img{filter:invert(1) grayscale(1) contrast(1.06) brightness(1.1);opacity:.82}
html:not([data-theme="light"]) .marq-track img:hover,
html:not([data-theme="light"]) .f-logos img:hover{opacity:1}
/* liquid glass mats around case videos + rims on deck and orbit */
.glassmat{position:relative;border-radius:28px;padding:14px;background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 1px var(--spec2),var(--card-sh)}
.glassmat>*{margin:0!important;width:100%;max-width:100%}
.glassmat.gm-pj{max-width:min(768px,100%);margin:2.2rem auto 0}
.glassmat.gm-reel{max-width:min(1108px,100%);margin:0 auto clamp(3rem,6.5vw,5rem)}
.glassmat.gm-case{max-width:100%;margin:1.4rem 0}
.case-frame::before,.pj-video::before,.reel-frame::before{content:none}
.card::after,.oc-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 1px var(--spec2);
  pointer-events:none;z-index:6}
.oc-frame{position:relative}
/* case titles as logos: white base, brand blue fades in like the text did */
.pj-lw{position:relative;display:inline-block;line-height:0}
.pj-h1-logo{height:clamp(46px,7.2vw,86px);width:auto;display:block}
.pj-lw .lgb{position:absolute;inset:0;height:100%;opacity:0;transition:opacity 1.9s var(--ease) .45s}
h1[data-stag].in .pj-lw .lgb{opacity:1}
html:not([data-theme="light"]) .pj-h1-logo.base{filter:invert(1)}
/* playful v2: morph scale on nav, toggle, buttons */
@media (prefers-reduced-motion: no-preference){
  .btn:hover{transform:translateY(-2px) scale(1.03)}
  .nav-links a.link:hover{transform:translateY(-1px) scale(1.06)}
  .nav-pill{transform:translateY(-50%);transition:left .55s var(--spr),width .55s var(--spr),transform .5s var(--spr),opacity .28s ease}
  .nav-links.pill-hov .nav-pill{transform:translateY(-50%) scale(1.07)}
  .theme-tg{transition:transform .45s var(--spr),border-color .3s ease}
  .theme-tg:hover{transform:scale(1.07)}
  .theme-tg svg{transition:transform .45s var(--spr),color .35s,opacity .35s}
  .theme-tg:hover svg{transform:translateY(-50%) scale(1.18)}
  .theme-tg:active .kn{transform:scale(.9)}
  html[data-theme="light"] .theme-tg:active .kn{transform:translateX(36px) scale(.9)}
  .dd-btn{transition:transform .4s var(--spr),border-color .3s ease,background-color .3s ease}
  .dd-btn:hover{transform:scale(1.015)}
}
/* orbit pages: glass mat behind every floating card; deck depth on index */
.orbit-card::before{content:"";position:absolute;inset:-12px;border-radius:24px;z-index:-1;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(15px) saturate(1.35);backdrop-filter:blur(15px) saturate(1.35);
  box-shadow:inset 0 1px 1px var(--spec2),0 22px 55px rgba(0,0,0,.32)}
html[data-theme="light"] .orbit-card::before{box-shadow:inset 0 1px 1px #fff,0 22px 55px rgba(36,45,82,.14)}
html:not([data-theme="light"]) .card{box-shadow:0 26px 60px rgba(0,0,0,.32)}
html:not([data-theme="light"]) .card::after,html:not([data-theme="light"]) .oc-frame::after{border-color:rgba(255,255,255,.14)}