/* Liquid Glass + wallpaper + Appearance switch, shared by every main page.
   Include in <head>, after the other stylesheets:
     <link rel="stylesheet" href="/css/glass.css">
     <script src="/js/theme.js"></script>
   theme.js adds the wallpaper and the Appearance button; this file styles them and
   upgrades every .glass element (nav, cards, panels, pills) to the Studio page's glass. */
:root{
  --lg-fill:rgba(255,255,255,.30); --lg-menu:rgba(255,255,255,.74); --lg-glow:rgba(255,255,255,.5);
  --lg-rim-t:rgba(255,255,255,.85); --lg-rim-s:rgba(255,255,255,.4); --lg-rim-b:rgba(255,255,255,.2);
  --lg-shadow:0 8px 28px rgba(60,40,10,.10),0 1px 2px rgba(60,40,10,.06),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 1px rgba(255,255,255,.22),inset 0 0 22px rgba(255,255,255,.14);
  --fw0:#efe4d2; --fw1:rgba(222,176,96,.95); --fw2:rgba(240,160,150,.9); --fw3:rgba(150,152,232,.9); --fw4:rgba(110,168,200,.8);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --lg-fill:rgba(36,38,44,.42); --lg-menu:rgba(40,42,48,.8); --lg-glow:rgba(255,255,255,.14);
  --lg-rim-t:rgba(255,255,255,.34); --lg-rim-s:rgba(255,255,255,.14); --lg-rim-b:rgba(255,255,255,.08);
  --lg-shadow:0 14px 40px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.2),inset 0 0 22px rgba(255,255,255,.04);
  --fw0:#0f1216; --fw1:rgba(201,169,110,.55); --fw2:rgba(176,92,110,.42); --fw3:rgba(72,78,170,.55); --fw4:rgba(40,110,130,.45)}}
:root[data-theme="dark"]{
  --lg-fill:rgba(36,38,44,.42); --lg-menu:rgba(40,42,48,.8); --lg-glow:rgba(255,255,255,.14);
  --lg-rim-t:rgba(255,255,255,.34); --lg-rim-s:rgba(255,255,255,.14); --lg-rim-b:rgba(255,255,255,.08);
  --lg-shadow:0 14px 40px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.2),inset 0 0 22px rgba(255,255,255,.04);
  --fw0:#0f1216; --fw1:rgba(201,169,110,.55); --fw2:rgba(176,92,110,.42); --fw3:rgba(72,78,170,.55); --fw4:rgba(40,110,130,.45)}

/* wallpaper: soft colour fields drifting behind everything */
.fp-wall{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--fw0);pointer-events:none;transition:background .6s}
.fp-wall i{position:absolute;width:80vmax;height:80vmax;border-radius:50%;animation:fp-drift 34s ease-in-out infinite alternate}
.fp-wall i:nth-child(1){background:radial-gradient(closest-side,var(--fw1),transparent);top:-30vmax;right:-22vmax}
.fp-wall i:nth-child(2){background:radial-gradient(closest-side,var(--fw2),transparent);top:10vh;left:-30vmax;animation-delay:-8s}
.fp-wall i:nth-child(3){background:radial-gradient(closest-side,var(--fw3),transparent);bottom:-36vmax;right:-10vmax;animation-delay:-16s}
.fp-wall i:nth-child(4){background:radial-gradient(closest-side,var(--fw4),transparent);bottom:-30vmax;left:-20vmax;width:60vmax;height:60vmax;animation-delay:-24s}
@keyframes fp-drift{to{transform:translate(6vmax,5vmax) scale(1.08)}}
html.fp-has-wall .orb,html.fp-has-wall .orbs{display:none}

/* Liquid Glass: thinner frosted fill, brighter top rim, inner light, a glow that follows the pointer */
html .glass{
  background:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),var(--lg-glow),transparent 70%),var(--lg-fill);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  border-color:var(--lg-rim-t) var(--lg-rim-s) var(--lg-rim-b);box-shadow:var(--lg-shadow)}
@media (prefers-reduced-transparency:reduce){
  html .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--fw0) 92%,#888 8%)}
  .fp-wall i{display:none}}

/* Appearance switch: one round button, a menu with Automatic / Light / Dark.
   Top left, mirroring the "All projects" pill: pinned beside the nav on wide screens,
   just under the nav (scrolling away) on narrower ones. */
.fp-appear{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 76px);left:max(16px,env(safe-area-inset-left,0px));font-family:Jost,system-ui,sans-serif}
@media (min-width:1080px){.fp-appear{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:max(28px,env(safe-area-inset-left,0px))}}
.fp-ab{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer;border:1px solid;transition:transform .35s cubic-bezier(.2,.9,.25,1.25)}
.fp-ab svg{width:20px;height:20px}
.fp-ab:active{transform:scale(.92)}
.fp-ab:focus-visible,.fp-menu button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
html .fp-menu.glass{--lg-fill:var(--lg-menu);position:absolute;top:calc(100% + 8px);left:0;min-width:224px;padding:6px;border-radius:18px;border-style:solid;border-width:1px;transform-origin:22px 0;animation:fp-pop .28s cubic-bezier(.2,.9,.25,1.15)}
.fp-menu[hidden]{display:none}
@keyframes fp-pop{from{opacity:0;transform:scale(.85)}}
.fp-menu .fp-mh{font:600 12px/1.5 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:8px 12px 4px;margin:0}
.fp-menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;background:none;border-radius:12px;font:500 15px/1.2 Jost,system-ui,sans-serif;color:var(--ink);cursor:pointer;text-align:left}
.fp-menu button:hover,.fp-menu button:focus-visible{background:rgba(127,127,127,.16)}
.fp-menu button svg{width:18px;height:18px;flex:none;color:var(--mute)}
.fp-menu button .ck{margin-left:auto;color:var(--gold);visibility:hidden}
.fp-menu button[aria-checked="true"] .ck{visibility:visible}
.fp-menu button small{display:block;font-size:12.5px;color:var(--mute);font-weight:400;margin-top:2px}
@media (prefers-reduced-motion:reduce){.fp-wall i{animation:none}.fp-ab,html .fp-menu.glass{transition:none;animation:none}.fp-ab:active{transform:none}}
@media print{.fp-appear,.fp-wall{display:none}}