/* Eridian Flow — atmosphere, glass grounds and the bottom reveal veil.
   Loaded last on both pages (js/flow.js builds the layers).
   Section grounds become transparent so one animated atmosphere runs behind
   the whole page; former solid panels become glass over it. */

/* ---------- Ground & atmosphere ---------- */
html{background:var(--flow-ground,var(--ink))}
html.flow-smooth{scroll-behavior:auto!important}
:root body,:root body.dev-page{background:transparent}
.flow-atmosphere{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;overflow:hidden;background:var(--flow-ground,var(--ink));contain:strict}
.flow-atmosphere canvas{display:block;width:100%;height:100%}
.flow-atmosphere.is-fallback canvas{display:none}
.flow-atmosphere:after{content:'';position:absolute;inset:0;background:var(--flow-grain) 0 0/128px 128px;mix-blend-mode:overlay;opacity:.045}
[data-theme=light] .flow-atmosphere:after{mix-blend-mode:soft-light;opacity:.07}

:root .final-code,:root .services-v3,:root .portfolio-v2,:root .contact-section,:root .site-footer,
:root .fc-scene,:root .final-dev,:root .dev-page .site-footer{background:transparent}

/* Superseded by the shared atmosphere: no boxed, per-block glows. */
.fc-chapter:before,.ascii-scene:after{display:none}

/* ---------- Live ASCII: glyphs float on the atmosphere ---------- */
:root .ascii-scene,:root .ascii-glitter-layer{background:transparent}
:root .hero-field{background:url('assets/clips/posters/hero.webp') center/cover no-repeat}
:root .hero-field.ascii-glitter-ready{background:transparent}
/* White mode keeps the studies as dark film panels, tinted by the scene. */
[data-theme=light] .ascii-scene,[data-theme=light] .hero-field.ascii-glitter-ready,[data-theme=light] .fc-scene.fc-execution{background:radial-gradient(70% 90% at 16% 28%,rgb(var(--flow-1,40 40 48)/.95),transparent 72%),radial-gradient(64% 80% at 86% 74%,rgb(var(--flow-2,30 34 48)/.9),transparent 72%),radial-gradient(80% 60% at 50% 115%,rgb(var(--flow-3,48 40 30)/.85),transparent 70%),rgb(var(--flow-0,9 9 11))}
[data-theme=light] .hero-field{background:url('assets/clips/posters/hero.webp') center/cover no-repeat,radial-gradient(70% 90% at 16% 28%,rgb(var(--flow-1,40 40 48)/.95),transparent 72%),rgb(var(--flow-0,9 9 11))}

/* ---------- Glass ----------
   One recipe for every former solid panel: a faint lit fill, a hairline edge,
   a top highlight, and a saturating blur that pulls the section's colour through. */
:root{--glass-fill:linear-gradient(140deg,rgb(255 255 255/.085),rgb(255 255 255/.022) 58%,rgb(255 255 255/.045));--glass-deep:linear-gradient(140deg,rgb(14 14 18/.52),rgb(14 14 18/.3));--glass-edge:rgb(255 255 255/.1);--glass-shine:inset 0 1px 0 rgb(255 255 255/.1),inset 0 -1px 0 rgb(0 0 0/.22)}
[data-theme=light]{--glass-fill:linear-gradient(140deg,rgb(255 255 255/.66),rgb(255 255 255/.36) 58%,rgb(255 255 255/.5));--glass-edge:rgb(0 0 0/.07);--glass-shine:inset 0 1px 0 rgb(255 255 255/.85),0 10px 30px rgb(40 30 60/.06)}
.pv-category,.contact-mark,.contact-section .field,.fc-execution .fc-card,.logo-button,.fc-caption{background:var(--glass-fill)!important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-color:var(--glass-edge)!important;box-shadow:var(--glass-shine)}
.logo-button{border:1px solid var(--glass-edge)}
/* Text-bearing glass over busy glyph fields stays a shade deeper in black mode. */
:root:not([data-theme=light]) .fc-caption,:root:not([data-theme=light]) .contact-section .field{background:var(--glass-deep)!important}
.fc-index{background:color-mix(in srgb,var(--flow-ground,var(--ink)) 52%,transparent)!important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 -1px 0 var(--glass-edge)}

/* ---------- Bottom reveal veil ---------- */
.flow-veil{position:fixed;left:0;right:0;bottom:0;height:clamp(110px,19vh,210px);z-index:40;pointer-events:none}
.flow-veil.is-clear{visibility:hidden}
.flow-veil>i{position:absolute;inset:0;-webkit-mask-image:var(--m);mask-image:var(--m)}
.flow-veil>i:nth-child(1){--m:linear-gradient(to bottom,transparent 0%,#000 14.3%,#000 28.6%,transparent 42.9%)}
.flow-veil>i:nth-child(2){--m:linear-gradient(to bottom,transparent 14.3%,#000 28.6%,#000 42.9%,transparent 57.1%)}
.flow-veil>i:nth-child(3){--m:linear-gradient(to bottom,transparent 28.6%,#000 42.9%,#000 57.1%,transparent 71.4%)}
.flow-veil>i:nth-child(4){--m:linear-gradient(to bottom,transparent 42.9%,#000 57.1%,#000 71.4%,transparent 85.7%)}
.flow-veil>i:nth-child(5){--m:linear-gradient(to bottom,transparent 57.1%,#000 71.4%,#000 85.7%,transparent 100%)}
.flow-veil>i:nth-child(6){--m:linear-gradient(to bottom,transparent 71.4%,#000 85.7%)}
.flow-veil>i:nth-child(7){--m:linear-gradient(to bottom,transparent 85.7%,#000 100%)}
.flow-veil:after{content:'';position:absolute;inset:0;opacity:var(--veil,0);background:linear-gradient(to top,color-mix(in srgb,var(--flow-ground,var(--ink)) 78%,transparent),color-mix(in srgb,var(--flow-ground,var(--ink)) 34%,transparent) 42%,transparent)}
@media(max-width:700px){
 .flow-veil{height:clamp(82px,13vh,124px)}
 .flow-veil>i:nth-child(-n+2){display:none}
}
@media(prefers-reduced-transparency:reduce){.flow-veil>i{display:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.flow-veil>i{display:none}}

/* Identity tiles: glass in black mode, dark in white mode (their wordmarks are light). */
.pv-wordmark,.pv-type-art{background:var(--glass-fill)!important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-shine)}
/* Our Code band: the metal gradient, now translucent over the atmosphere. */
.fc-band{background:linear-gradient(90deg,rgb(255 255 255/.05),rgb(255 255 255/.18) 55%,rgb(255 255 255/.42))!important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-block:1px solid var(--glass-edge);box-shadow:var(--glass-shine)}
[data-theme=light] .fc-band{background:linear-gradient(90deg,rgb(30 30 34/.82),rgb(70 72 78/.62) 55%,rgb(140 142 148/.45))!important}
/* White mode: identity tiles stay dark (light wordmarks); hero descriptors read dark on the pastel ground. */
[data-theme=light] .pv-wordmark,[data-theme=light] .pv-type-art{background:linear-gradient(140deg,rgb(22 22 26/.9),rgb(14 14 16/.82))!important}
[data-theme=light] .hero-descriptors img{filter:brightness(.16)}
/* Dev page: the sphere film sits in a soft halo instead of a full-width band. */
.fd-orb{-webkit-mask-image:radial-gradient(ellipse 30% 46% at 50% 50%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 30% 46% at 50% 50%,#000 38%,transparent 100%)}
@media(max-width:700px){.fd-orb{-webkit-mask-image:radial-gradient(ellipse 48% 44% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 48% 44% at 50% 50%,#000 40%,transparent 100%)}}
@media(prefers-contrast:more){.flow-veil{display:none}}
@media print{.flow-atmosphere,.flow-veil{display:none}html,body{background:#fff}}

/* ---------- Lens menu (js/lens-menu.js) ---------- */
#navigation.lens-menu,#navigation.lens-menu::backdrop{background:transparent}
#navigation.lens-menu .menu-shell{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 72%,transparent),color-mix(in srgb,var(--ink) 86%,transparent));-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6)}
#navigation.lens-menu .menu-links a{background:color-mix(in srgb,var(--paper) 5%,transparent);border-color:color-mix(in srgb,var(--paper) 10%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 8%,transparent)}
#navigation.lens-menu .menu-links a:is(:hover,:focus-visible){background:color-mix(in srgb,var(--paper) 10%,transparent)}
.lens-rim{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;display:none}
#navigation.lens-active .lens-rim{display:block}
#navigation.lens-active :is(.dialog-top>*,.menu-centre,.menu-links a,.menu-contact,.menu-tools){will-change:transform,filter,opacity}
@media(max-width:700px){#navigation.lens-menu .menu-shell{-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}}
.lens-ring{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;display:none;-webkit-backdrop-filter:blur(1.5px) brightness(1.35) saturate(1.9) contrast(1.05);backdrop-filter:blur(1.5px) brightness(1.35) saturate(1.9) contrast(1.05)}
#navigation.lens-active .lens-ring{display:block}

/* ---------- Phones: same look, lighter GPU work ---------- */
@media(max-width:700px){
 .pv-category,.contact-mark,.contact-section .field,.fc-execution .fc-card,.logo-button,.fc-caption,.fc-index,.fc-band,.pv-wordmark,.pv-type-art,.sv-plan,.sv-cap-panel,.services-v3 .fs-ai-study,.sv-why{-webkit-backdrop-filter:blur(14px) saturate(1.4)!important;backdrop-filter:blur(14px) saturate(1.4)!important}
 .flow-veil>i:nth-child(-n+3){display:none}
}

/* ---------- White mode: the hero keeps its dark colouring ----------
   The intro (hero → about) and the header while it sits over the intro take the
   dark tokens, so white mode opens exactly like dark mode. After the hero,
   everything follows white mode; the atmosphere cross-fades the ground. */
:root[data-theme=light] .intro-track,:root[data-theme=light].in-hero .site-header{--ink:#090909;--paper:#f2f1ed;--muted:#aaa9a5;--quiet:#777773;--surface:#202020;--panel:#141414;--line:#ffffff18;--glass-fill:linear-gradient(140deg,rgb(255 255 255/.085),rgb(255 255 255/.022) 58%,rgb(255 255 255/.045));--glass-deep:linear-gradient(140deg,rgb(14 14 18/.52),rgb(14 14 18/.3));--glass-edge:rgb(255 255 255/.1);--glass-shine:inset 0 1px 0 rgb(255 255 255/.1),inset 0 -1px 0 rgb(0 0 0/.22);color-scheme:dark}
:root[data-theme=light] .intro-track,:root[data-theme=light].in-hero .site-header{color:var(--paper)}
:root[data-theme=light] .intro-stage .hero-heading img,:root[data-theme=light] .hero-descriptors img,:root[data-theme=light] .intro-track .logo-button img,:root[data-theme=light].in-hero .header-brand img{filter:none}
:root[data-theme=light] .intro-track .pm-vector-title:after{background-image:linear-gradient(110deg,#b8bfca 5%,#fff 38%,#a5abb6 53%,#fff 82%,#b8bfca 96%)}
:root[data-theme=light] .intro-track .pm-title{background-image:linear-gradient(110deg,#d5d9df 5%,#f4f5f3 25%,#fff 38%,#c5cbd3 53%,#f6f5f1 68%,#fff 82%,#d5d9df 96%)}
:root[data-theme=light] .hero-field{background:url('assets/clips/posters/hero.webp') center/cover no-repeat}
:root[data-theme=light] .hero-field.ascii-glitter-ready{background:transparent}
:root[data-theme=light].in-hero .flow-atmosphere:after{mix-blend-mode:overlay;opacity:.045}
.site-header .header-brand img,.site-header .theme-toggle{transition:filter .45s var(--ease,ease),background-color .45s,border-color .45s,color .45s}
/* Langits is retired: nothing on the site asks for it any more. */
.hero-descriptors{font-family:var(--mono)}

/* ---------- Featured works: identity tiles ----------
   Both tiles share one dark glass surface; every mark is a clean transparent
   cut (assets/works) sized to the same optical weight, centred in its tile. */
.portfolio-v2 .pv-panel :is(.pv-wordmark,.pv-symbol){container-type:size;background:linear-gradient(150deg,rgb(30 30 34/.78),rgb(14 14 17/.86))!important;border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 18px 40px -26px rgb(0 0 0/.7);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
.portfolio-v2 .pv-panel :is(.pv-wordmark,.pv-symbol)>img{position:static;inset:auto;transform:none;mask:none;-webkit-mask:none;mix-blend-mode:normal;object-fit:contain;display:block;width:auto;max-width:78cqw;max-height:none;height:calc(var(--mh,30) * 1cqh)}
.portfolio-v2 .pv-panel .pv-symbol>img{height:calc(var(--sh,56) * 1cqh);max-width:76cqw}
.pv-panel[data-project-id=ryta]{--mh:29;--sh:58}
.pv-panel[data-project-id=triiq]{--mh:30;--sh:56}
.pv-panel[data-project-id=arctriq]{--mh:19;--sh:62}
.pv-panel[data-project-id=prime-directive]{--mh:33;--sh:60}
.pv-panel[data-project-id=script-house]{--mh:16;--sh:38}
[data-theme=light] .portfolio-v2 .pv-panel :is(.pv-wordmark,.pv-symbol){background:linear-gradient(150deg,rgb(28 28 32/.94),rgb(14 14 17/.92))!important;border-color:rgb(0 0 0/.06);box-shadow:0 18px 40px -28px rgb(30 24 18/.45)}
/* Typography studies: the type sits on the same dark glass as the identity tiles (no grey card), never stretched. */
.portfolio-v2 .pv-type-art{background:linear-gradient(150deg,rgb(30 30 34/.8),rgb(14 14 17/.88))!important;box-shadow:inset 0 0 0 1px var(--glass-edge),inset 0 1px 0 rgb(255 255 255/.07),0 18px 40px -26px rgb(0 0 0/.7)}
.portfolio-v2 .pv-type-art:not(.pv-type-live){aspect-ratio:16/9}
.portfolio-v2 .pv-type-art>img{object-fit:contain;opacity:1}
[data-theme=light] .portfolio-v2 .pv-type-art{background:linear-gradient(150deg,rgb(28 28 32/.95),rgb(14 14 17/.93))!important;box-shadow:inset 0 0 0 1px rgb(255 255 255/.05),0 18px 40px -28px rgb(30 24 18/.45)}
.pv-dialog[data-preview=type] .pv-dialog-image{background:linear-gradient(150deg,#1e1e22,#0e0e11)!important;box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
.pv-dialog[data-preview=type] .pv-dialog-image img{aspect-ratio:16/9;width:100%;height:auto;object-fit:contain}
/* Palettes as live LED matrices (js/led-palette.js). The still stays underneath as the fallback. */
.pv-palette .pv-led{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;contain:strict}
.pv-palette>img{transition:opacity .5s ease}
.pv-palette.is-led>img{opacity:0}
.pv-palette::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgb(255 255 255/.06),inset 0 0 0 1px rgb(255 255 255/.04)}
/* Project indicator (js/pv-indicator.js): a glass rail of numbered projects with a liquid thumb. Replaces the dash + name tabs. */
.portfolio-v2 .pv-pagination{gap:24px;align-items:center;margin-top:26px;margin-bottom:22px}
.portfolio-v2 .pv-tabs{position:relative;display:flex;align-items:stretch;gap:2px;width:auto;max-width:100%;min-width:0;padding:5px;border-radius:999px;background:var(--glass-fill);border:1px solid var(--glass-edge);box-shadow:var(--glass-shine);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;isolation:isolate}
.portfolio-v2 .pv-tabs::-webkit-scrollbar{display:none}
.portfolio-v2 .pv-thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:linear-gradient(180deg,#f6f5f1,#dcdbd5 62%,#cfcec8);box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 -1px 0 rgb(0 0 0/.08),0 8px 22px -10px rgb(0 0 0/.7);pointer-events:none;will-change:transform,width}
.portfolio-v2 .pv-tab{position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 18px;border-radius:999px;color:var(--muted,#a4aaa6);white-space:nowrap;transition:color .35s ease,background-color .3s ease}
.portfolio-v2 .pv-tab>span:first-child{width:auto;height:auto;background:none;transform:none;transition:none}
.portfolio-v2 .pv-tab-num{font-size:9.5px;letter-spacing:.14em;opacity:.62;font-variant-numeric:tabular-nums}
.portfolio-v2 .pv-tab-label{display:inline-block;font-size:11px;letter-spacing:.08em;color:inherit;transition:color .35s ease}
.portfolio-v2 .pv-tab:not([aria-selected=true]):hover{color:var(--paper,#ecebe6);background:rgb(255 255 255/.05)}
.portfolio-v2 .pv-tab[aria-selected=true],.portfolio-v2 .pv-tab[aria-selected=true] .pv-tab-label{color:#0c0c0e}
.portfolio-v2 .pv-tab[aria-selected=true] .pv-tab-num{opacity:.5}
.portfolio-v2 .pv-tab:focus-visible{outline:1px solid var(--paper,#ecebe6);outline-offset:-3px}.portfolio-v2 .pv-tab[aria-selected=true]:focus-visible{outline-color:rgb(12 12 14/.5)}
/* The counter becomes a meter: 01 ——— / 05 */
.portfolio-v2 .pv-counter{position:relative;display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.portfolio-v2 .pv-counter::before{content:"";width:clamp(60px,7vw,110px);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--paper,#ecebe6) 0 0) left/calc(var(--pv-progress,.2) * 100%) 100% no-repeat,rgb(255 255 255/.14);transition:background-size .7s cubic-bezier(.65,0,.25,1)}
[data-theme=light] .portfolio-v2 .pv-tabs{background:rgb(255 255 255/.55);border-color:rgb(0 0 0/.07);box-shadow:inset 0 1px 0 rgb(255 255 255/.9),0 10px 30px -18px rgb(40 30 20/.35)}
[data-theme=light] .portfolio-v2 .pv-thumb{background:linear-gradient(180deg,#26262b,#121215);box-shadow:inset 0 1px 0 rgb(255 255 255/.14),0 8px 20px -10px rgb(20 16 12/.55)}
[data-theme=light] .portfolio-v2 .pv-tab{color:#5d5d5a}
[data-theme=light] .portfolio-v2 .pv-tab:not([aria-selected=true]):hover{color:#111;background:rgb(0 0 0/.04)}
[data-theme=light] .portfolio-v2 .pv-tab[aria-selected=true],[data-theme=light] .portfolio-v2 .pv-tab[aria-selected=true] .pv-tab-label{color:#f4f3ef}
[data-theme=light] .portfolio-v2 .pv-tab:focus-visible{outline-color:#111}[data-theme=light] .portfolio-v2 .pv-tab[aria-selected=true]:focus-visible{outline-color:rgb(244 243 239/.6)}
[data-theme=light] .portfolio-v2 .pv-counter::before{background:linear-gradient(90deg,#111 0 0) left/calc(var(--pv-progress,.2) * 100%) 100% no-repeat,rgb(0 0 0/.12)}
@media (max-width:700px){
 .portfolio-v2 .pv-pagination{gap:0;margin-top:18px;margin-bottom:16px}
 .portfolio-v2 .pv-counter{display:none}
 .portfolio-v2 .pv-tabs{display:flex;flex:1 1 auto;width:100%;grid-template-columns:none;gap:0;justify-content:space-between}
 .portfolio-v2 .pv-tab{min-height:38px;padding:0 12px;gap:7px;flex:0 0 auto}
 .portfolio-v2 .pv-tab-label{font-size:9.5px;letter-spacing:.06em;max-width:0;opacity:0;overflow:hidden;transition:max-width .45s cubic-bezier(.65,0,.25,1),opacity .3s ease,color .35s ease}
 .portfolio-v2 .pv-tab[aria-selected=true] .pv-tab-label{max-width:130px;opacity:1}
 .portfolio-v2 .pv-tab:not([aria-selected=true]){gap:0}
}
@media (prefers-reduced-motion:reduce){.portfolio-v2 .pv-tab-label,.portfolio-v2 .pv-counter::before{transition:none}}