/* FILAMENT // IMMERSIVE EDITION — 2026 */
:root{--signal:#d3e89c;--signal-glow:rgba(167,214,103,.38);--gold:#d6b486;--cream:#f6f0df}
html{scroll-behavior:smooth}
body{background:#070c0d;color:var(--cream)}
.site-header{position:fixed;z-index:110;height:82px;background:rgba(5,10,12,.83);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:#e3c99a27;transition:height .4s,background .4s}
.site-header.condensed{height:68px;background:rgba(4,8,9,.94)}
.wordmark{text-shadow:0 2px 20px #0009;letter-spacing:.18em}
.brand-mark{filter:drop-shadow(0 0 10px #edb968a8)}
.nav-link{transition:color .3s,text-shadow .3s}
.nav-link:hover{color:#ffdfad;text-shadow:0 0 22px #e8b76b88}
.mobile-nav{position:fixed;top:82px}
.site-header.condensed~.mobile-nav{top:68px}
.hero-main{min-height:730px;height:100svh;max-height:none;overflow:hidden;background:radial-gradient(ellipse at 73% 35%,#284037 0%,#070d0d 77%);isolation:isolate}
.hero-main .hero-scene{z-index:-3;filter:saturate(.73) brightness(.7) contrast(1.18);transform:scale(1.09);transition:filter .8s}
.hero-main .hero-glow{z-index:-2;background:radial-gradient(ellipse at 70% 35%,#ffe0a840,transparent 49%);mix-blend-mode:screen}
.hero-main .hero-vignette{z-index:1;background:linear-gradient(90deg,#030808ed 0%,#030808b0 40%,transparent 90%),linear-gradient(0deg,#050b0b,transparent 41%,#0008)}
.hero-main .hero-content{z-index:8;pointer-events:none}
.hero-main .hero-content a,.hero-main .hero-content button{pointer-events:auto}
.hero-main h1{font-size:clamp(70px,9.7vw,170px);letter-spacing:-.068em;line-height:.79;text-shadow:0 13px 60px #000c}
.hero-main h1 em{background:linear-gradient(115deg,#ffebbe 0%,#c89a60 45%,#fff2d9 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-main .hero-desc{color:#ecebe1;max-width:490px;text-shadow:0 3px 18px #000}
.hero-main .hero-topline .eyebrow{color:#edddc3}
.hero-main .hero-bottom{border-top-color:#ebd1ac4b}
.filament-depth{position:absolute;inset:-7%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 70% 30%,#93af5940,transparent 30%),linear-gradient(0deg,#09181277,transparent 50%);filter:blur(30px);animation:filamentBreath 9s ease-in-out infinite alternate}
@keyframes filamentBreath{to{transform:translate3d(0,2%,0) scale(1.12)}}
.filament-storm{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.filament-storm canvas{width:100%;height:100%;position:absolute;inset:0;display:block}
.filament-lightning{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(ellipse at 71% 35%,#d7ffa877,transparent 60%);mix-blend-mode:screen}
.filament-lightning.flash{animation:filamentFlash .58s linear}
@keyframes filamentFlash{0%,12%,22%,100%{opacity:0}14%{opacity:.66}24%{opacity:.9}32%{opacity:.07}}
.filament-weather{position:absolute;right:5.5vw;top:25%;width:208px;z-index:12;padding:19px;border:1px solid #c1d9b04c;background:#071411c2;backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);box-shadow:0 30px 80px #0008,inset 0 1px #ffffff12}
.filament-weather small{font:9px/1.7 var(--font-mono);letter-spacing:.15em;color:#c1cdb6;display:block}
.filament-weather strong{font:500 29px/.9 var(--font-display);color:#e6f3c8;display:block;margin:15px 0}
.filament-weather .weather-status{font:9px/1.9 var(--font-mono);letter-spacing:.06em;color:#b7c8b2}
.filament-weather .weather-control{display:flex;gap:5px;margin-top:15px}
.filament-weather button{flex:1;min-width:0;padding:10px 3px;color:#c9d6c5;font:8px var(--font-mono);border:1px solid #deefcc44;background:#ffffff08;cursor:pointer}
.filament-weather button[aria-pressed=true]{background:#d3e7a5;border-color:#d3e7a5;color:#172213}
.filament-weather .weather-bar{display:block;height:22px;margin-top:10px;background:repeating-linear-gradient(90deg,transparent 0 4px,#d4efc744 5px 6px,transparent 7px 11px);mask-image:linear-gradient(90deg,transparent,#000,transparent)}
.filament-caption{position:absolute;right:35px;bottom:35px;color:#d7e7c3bd;font:9px var(--font-mono);letter-spacing:.17em;z-index:7;pointer-events:none}
.filament-caption b{color:#c9eb91}
.filament-artfix{object-fit:cover}
.filament-film-strip{height:16px;opacity:.7;background:repeating-linear-gradient(90deg,#0e1313 0 16px,#c7b18440 17px 18px,#0e1313 19px 34px)}
.filament-cinema{position:relative;min-height:750px;background:radial-gradient(ellipse at 60% 33%,#364c2d,#0a150d 73%);display:flex;align-items:end;isolation:isolate;overflow:hidden}
.filament-cinema .filament-cinema-bg{position:absolute;inset:-2%;z-index:-2;background:linear-gradient(90deg,#030b08c9,transparent 85%),url('assets/world-furnace.webp') center/cover;filter:brightness(.75) saturate(.85);transform:scale(1.04)}
.filament-cinema .filament-cinema-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#030c08ed 0%,#041108b5 46%,#07150a09 95%),linear-gradient(0deg,#041208f0 0%,transparent 45%);pointer-events:none}
.filament-cinema .filament-storm{z-index:1}
.filament-cinema .cinematic-copy{position:relative;z-index:7;width:min(1390px,calc(100% - 112px));margin:0 auto;padding:110px 0;pointer-events:none}
.filament-cinema .cinematic-copy a{pointer-events:auto}
.filament-cinema .cinematic-tag{font:10px var(--font-mono);letter-spacing:.23em;color:#d3eca2}
.filament-cinema h2{font:500 clamp(110px,13vw,190px)/.72 var(--font-display);letter-spacing:-.075em;margin:42px 0 46px;text-shadow:0 12px 45px #0009}
.filament-cinema h2 em{font-weight:400;color:#cdeba0}
.filament-cinema p{max-width:470px;color:#e7f1dfd9;font-size:17px;line-height:2;margin-bottom:30px}
.filament-cinema .design-note{margin-top:31px;color:#c1c9b7}
.filament-cinema .btn-outline{border-color:#d2eac299;backdrop-filter:blur(8px)}
.filament-diorama{background:radial-gradient(ellipse at 50% 36%,#1f342b,#070d0c 75%);padding:120px 0 70px;position:relative;overflow:hidden}
.diorama-container{width:min(1390px,calc(100% - 112px));margin:0 auto;position:relative;z-index:3}
.filament-diorama h2{font:500 clamp(77px,8vw,140px)/.87 var(--font-display);letter-spacing:-.06em;margin:23px 0}
.filament-diorama h2 em{color:#d8bd8c}
.filament-diorama p{color:#c8d3ca;max-width:490px;line-height:2}
.diorama-scene{height:500px;perspective:1100px;position:relative;isolation:isolate;overflow:hidden;margin:0 -12vw 0;mask-image:linear-gradient(0deg,transparent 0,#000 15%,#000 92%,transparent)}
.diorama-world{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(10deg);will-change:transform}
.diorama-world:before{content:'';position:absolute;inset:15%;background:radial-gradient(ellipse at 65% 34%,#bbca7c40,transparent 48%);filter:blur(20px);transform:translateZ(-180px)}
.diorama-sil{position:absolute;left:-12%;bottom:-5%;width:124%;height:75%;clip-path:polygon(0 100%,0 60%,5% 60%,5% 35%,9% 35%,9% 69%,12% 69%,12% 39%,15% 39%,15% 58%,21% 58%,21% 13%,23% 13%,23% 4%,25% 13%,25% 49%,31% 49%,31% 34%,34% 34%,34% 61%,38% 61%,38% 27%,42% 27%,42% 62%,47% 62%,47% 21%,49% 21%,49% 5%,51% 21%,51% 44%,57% 44%,57% 62%,61% 62%,61% 29%,65% 29%,65% 47%,69% 47%,69% 12%,71% 12%,71% 0,73% 12%,73% 43%,78% 43%,78% 69%,83% 69%,83% 36%,89% 36%,89% 67%,93% 67%,93% 41%,100% 41%,100% 100%);background:#0e201b;filter:drop-shadow(0 0 24px #d9e9c233)}
.diorama-sil.far{transform:translateZ(-160px) scale(1.3);background:#63857a;opacity:.21;bottom:12%}
.diorama-sil.mid{transform:translateZ(15px) scale(1.12);background:#1d3e34;opacity:.65}
.diorama-sil.near{transform:translateZ(140px) scale(1.13);background:#0a1713;bottom:-16%}
.diorama-spire{position:absolute;left:50%;bottom:0;transform:translateZ(110px);height:93%;width:74px;background:linear-gradient(90deg,#0b1613,#5e6147 43%,#0c1712);clip-path:polygon(45% 0,55% 0,63% 12%,82% 22%,86% 94%,100% 100%,0 100%,14% 94%,18% 22%,37% 12%)}
.diorama-spire:after{content:'';position:absolute;inset:10% 32%;background:repeating-linear-gradient(0deg,transparent 0 12px,#f8d18867 13px 15px,transparent 17px 36px)}
.diorama-bridge{position:absolute;left:20%;right:18%;top:60%;height:2px;background:linear-gradient(90deg,transparent,#ffe5a5ac,transparent);box-shadow:0 0 16px #e8cc97;transform:rotate(-5deg) translateZ(100px)}
.diorama-orb{position:absolute;top:30%;left:27%;width:9px;height:9px;transform:translateZ(200px);border-radius:50%;background:#ebeca5;box-shadow:0 0 0 11px #f7eb9f14,0 0 65px 14px #f7eaa47a;animation:filamentFloat 5s ease-in-out infinite}
@keyframes filamentFloat{50%{transform:translate3d(0,-15px,200px)}}
.diorama-hotspot{position:absolute;z-index:5;display:inline-block;padding:12px 14px;border:1px solid #e6d4ac80;background:#101b19c7;color:#f0e5c9;font:10px var(--font-mono);letter-spacing:.12em;backdrop-filter:blur(11px);transition:.3s}
.diorama-hotspot:hover{transform:translateY(-5px);background:#ecd4a1;color:#171b15}
.diorama-hotspot.a{left:54%;top:18%}.diorama-hotspot.b{left:14%;top:56%}.diorama-hotspot.c{right:14%;top:73%}
.diorama-note{text-align:center;color:#adbea9;font:9px var(--font-mono);letter-spacing:.17em;margin:18px 0}
.filament-tower-storm{position:absolute;inset:0;pointer-events:none;z-index:3}
.tower-detail-art{position:relative;isolation:isolate}
.tower-detail-art .filament-storm{z-index:3}
.filament-environment-label{position:absolute;top:18px;left:18px;z-index:6;padding:9px 12px;border:1px solid #d1eab974;background:#081711b0;color:#d1edb8;font:9px var(--font-mono);letter-spacing:.12em}
.page-world .world-hero{overflow:hidden;isolation:isolate}
.page-world .world-hero .filament-storm{z-index:2}
.page-world .inner-hero-content{z-index:5}
.feature-tile,.system-card,.archive-item{transform-style:preserve-3d;will-change:transform}
.feature-tile img,.archive-item img,.feature-photo img{transition:transform 1s cubic-bezier(.18,.76,.24,1),filter .7s}
.feature-tile:hover img,.archive-item:hover img,.feature-photo:hover img{transform:scale(1.07);filter:saturate(1.08) contrast(1.08)}
.system-card{background:linear-gradient(120deg,#182322,#0c1515);border-color:#d6be9252;box-shadow:inset 0 1px #ffffff17;transition:transform .3s,box-shadow .3s,border-color .3s}
.system-card:hover{box-shadow:0 35px 75px #000a,inset 0 1px #ffffff20;border-color:#d2c49b99}
.section-header .display-heading{letter-spacing:-.06em}
@media(max-width:1100px){.filament-weather{right:25px;top:23%;width:175px}.filament-cinema .cinematic-copy,.diorama-container{width:calc(100% - 70px)}}
@media(max-width:860px){.filament-weather{display:none}.filament-cinema{min-height:660px}.filament-cinema h2{font-size:clamp(96px,14vw,146px)}.diorama-scene{height:400px}.filament-diorama{padding:90px 0 50px}}
@media(max-width:600px){.hero-main{min-height:650px;max-height:none}.hero-main h1{font-size:clamp(51px,11.4vw,80px)}.hero-main .hero-scene{background-position:60% center}.filament-caption{display:none}.filament-cinema{min-height:600px}.filament-cinema .cinematic-copy,.diorama-container{width:calc(100% - 36px)}.filament-cinema .cinematic-copy{padding:100px 0 80px}.filament-cinema h2{font-size:clamp(86px,17vw,129px);margin:32px 0}.filament-cinema p{font-size:14px}.filament-diorama h2{font-size:clamp(56px,13vw,88px)}.diorama-scene{height:310px;margin:30px -20vw 0}.diorama-hotspot{font-size:8px;padding:8px}.diorama-hotspot.a{left:48%;top:17%}.diorama-hotspot.b{left:12%;top:57%}.diorama-hotspot.c{right:8%;top:75%}}
@media(prefers-reduced-motion:reduce){.filament-storm canvas{display:none}.filament-depth,.diorama-orb{animation:none}.filament-lightning.flash{animation:none}.feature-tile,.system-card{will-change:auto}}