/* Continuous viewport canvas. All sections share the same black ground. */
html{scroll-padding-top:0}
main{position:relative;z-index:1;background:transparent}footer{position:relative;z-index:2}
.cosmic-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:clip;background:#000}
.cosmic-layer{position:absolute;inset:0;opacity:var(--scene-opacity,0);transition:opacity .65s ease;overflow:clip;mask-image:linear-gradient(0deg,transparent 0%,#000a 15%,#000 34%,#000 73%,#0006 91%,transparent 100%)}
/* Feather only a chapter boundary that is moving through the viewport.
   The full scene keeps its original rendering; no blur or lower resolution. */
.cosmic-layer::before,.cosmic-layer::after{content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.cosmic-layer::before{top:var(--scene-clip-top,0px);height:var(--scene-feather-top,0px);background:linear-gradient(180deg,#000 0%,#000f 14%,#000d 30%,#0009 48%,#0004 68%,#0001 85%,transparent 100%)}
.cosmic-layer::after{bottom:var(--scene-clip-bottom,0px);height:var(--scene-feather-bottom,0px);background:linear-gradient(0deg,#000 0%,#000f 14%,#000d 30%,#0009 48%,#0004 68%,#0001 85%,transparent 100%)}
.cosmic-layer:not(.is-ready){visibility:hidden;transition:none}
.cosmic-renderer{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000}
.layer-vesper .cosmic-renderer{width:115%;left:4%}
.layer-auralis .cosmic-renderer{width:112%;left:5%}
.cosmic-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000f 0%,#000d 24%,#0005 50%,transparent 76%)}
.cosmic-chapter{position:relative;width:100%;height:210svh;background:transparent;isolation:auto}
.cosmic-new-era{height:420svh}.cosmic-auralis{height:300svh}
.cosmic-pin{position:sticky;top:0;height:100svh;min-height:0;overflow:clip;background:transparent}
.cosmic-scrim{display:none}
.cosmic-label{position:absolute;top:105px;left:clamp(28px,5vw,100px);right:clamp(28px,5vw,100px);display:flex;align-items:center;justify-content:space-between;color:#a79bb6;font-size:9px;font-weight:600;letter-spacing:.18em;z-index:2}
.cosmic-coordinate{font-variant-numeric:tabular-nums;color:#726983;font-size:10px;letter-spacing:.1em}
.cosmic-story{position:absolute;inset:0;left:clamp(28px,5vw,100px);right:clamp(28px,5vw,100px);display:grid;align-content:center;padding:140px 0 125px;z-index:2;pointer-events:none}
.cosmic-beat{grid-column:1;grid-row:1;width:min(510px,46%);opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s;visibility:hidden}
.cosmic-beat.is-current{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.cosmic-beat .eyebrow{margin-bottom:25px;font-size:9px;color:#bdaacf;letter-spacing:.15em}
.cosmic-beat h2{font-size:clamp(42px,4.8vw,72px);line-height:1.08;letter-spacing:-.055em;font-weight:500;margin:0 0 28px;color:#f2eef6}
.cosmic-beat em{font-style:normal;color:#c4a6ea}
.cosmic-beat p:last-child{max-width:365px;line-height:1.75;font-size:14px;color:#b5aebd;margin:0}
.cosmic-beat[data-mode=chat] em,.cosmic-beat[data-mode=chat] .eyebrow{color:var(--mode-chat)}
.cosmic-beat[data-mode=room] em,.cosmic-beat[data-mode=room] .eyebrow{color:var(--mode-room)}
.cosmic-bottom{position:absolute;bottom:38px;left:clamp(28px,5vw,100px);right:clamp(28px,5vw,100px);display:flex;align-items:center;gap:26px;z-index:2;font-size:9px;letter-spacing:.13em;color:#84788f}
.cosmic-bottom a{margin-left:auto;letter-spacing:0;font-size:11px;min-height:40px;display:flex;align-items:center;color:#c3b8cf}
.cosmic-track{display:block;width:85px;height:1px;background:#ffffff26;overflow:hidden}
.cosmic-track b{display:block;height:1px;width:100%;background:#c4a6ea;transform:scaleX(var(--chapter-progress,0));transform-origin:left}
.cinema-section{border-top:0;background:transparent;padding-top:95px;padding-bottom:95px}
.mode-stage{padding-top:0}.flow-canvas{display:none}
.mode-tile{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(140deg,#191a21f5,#0d0d12f5);border-color:#ffffff1a;box-shadow:inset 0 1px 0 #ffffff0b}
.mode-tile[data-mode=room]{background:linear-gradient(140deg,#241b17ed,#0d0d12f5)}
.mode-tile[data-mode=council]{background:linear-gradient(140deg,#211a2ced,#0d0d12f5)}
.hero::after{opacity:var(--orb-shade,1);bottom:auto;height:100svh}.auralis-lights{display:none}
.orb-entry-handoff-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#000b,transparent 67%),linear-gradient(0deg,#000 0%,#0004 24%,transparent 60%);opacity:var(--orb-shade,0)}
.orb-entry-vignette{opacity:calc(.22*(1 - var(--orb-shade,0)))}
.hero-bottom{border-top:0}
@media(max-width:760px){
 .cosmic-chapter{height:205svh}.cosmic-new-era{height:420svh}.cosmic-auralis{height:300svh}
 .cosmic-pin{min-height:0}
 .layer-vesper .cosmic-renderer,.layer-auralis .cosmic-renderer{width:100%;left:0}
 .cosmic-layer{mask-image:linear-gradient(0deg,transparent 0%,#0005 24%,#000 49%,#000 77%,transparent 100%)}
 .cosmic-stage::after{background:linear-gradient(0deg,#000 0%,#000e 24%,#0008 46%,#0001 72%,#0006 100%)}
 .cosmic-label{top:90px;left:24px;right:24px;font-size:8px;letter-spacing:.1em}
 .cosmic-story{left:24px;right:24px;align-content:end;padding:125px 0 132px}
 .layer-new-era .cosmic-renderer{top:-14%}
 .layer-auralis .cosmic-renderer{top:-12%}
 .cosmic-beat{width:100%;max-width:480px}
 .cosmic-beat h2{font-size:clamp(35px,8.5vw,52px);margin-bottom:18px}
 .cosmic-beat .eyebrow{font-size:8px;margin-bottom:18px}
 .cosmic-beat p:last-child{font-size:12px;max-width:350px;line-height:1.7}
 .cosmic-bottom{left:24px;right:24px;bottom:27px;gap:13px}
 .cosmic-bottom>span{font-size:7px;letter-spacing:.07em;max-width:135px}
 .cosmic-bottom a{font-size:10px;white-space:nowrap}.cosmic-track{width:35px;flex-shrink:0}
 .cinema-section{padding-top:70px;padding-bottom:70px}
 .orb-entry-handoff-shade{background:linear-gradient(0deg,#000 8%,#000c 36%,transparent 72%)}
}
@media(max-width:350px){.cosmic-label,.cosmic-story,.cosmic-bottom{left:20px;right:20px}.cosmic-label{font-size:7px}.cosmic-bottom>span{max-width:100px}.cosmic-beat h2{font-size:33px}.cosmic-track{width:20px}}
@media(prefers-reduced-motion:reduce){.cosmic-chapter{height:100svh;min-height:0}.cosmic-beat,.cosmic-layer{transition:none}.cosmic-beat:not(:first-child){display:none}}

@media(max-height:640px){
 .cosmic-label{top:32px}.cosmic-story{padding-top:80px;padding-bottom:95px}
 .cosmic-beat h2{font-size:36px;margin-bottom:18px}.cosmic-beat .eyebrow{margin-bottom:14px}
 .cosmic-beat p:last-child{font-size:12px}.cosmic-bottom{bottom:18px}
}

/* A translucent paint avoids sampling the moving WebGL surface behind the header. */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(135deg,#17141bbd,#09090dc7)}

/* Keep sticky copy in a stable paint layer above the independent GPU scenes. */
.cosmic-story,.cosmic-bottom{transform:translateZ(0)}

/* Keep the complete demo label readable in a narrow mobile header. */
@media(max-width:400px){
 .site-header{gap:10px;padding-inline:10px}
 .wordmark{font-size:19px;gap:5px}
 .wordmark img{width:25px;height:25px}
 .site-header .header-cta{flex-shrink:0;font-size:10px;padding-inline:8px}
 .header-cta span{margin-left:5px}
}