/* Sazvara Experience Layer v1 — progressive enhancement, no framework */
:root{
  --svx-ink:#080a0d; --svx-paper:#f4f2ea; --svx-muted:#a9adb4;
  --svx-lime:#e8ff8a; --svx-mint:#a6f6db; --svx-violet:#aeb8ff;
  --svx-line:rgba(244,242,234,.13); --svx-panel:rgba(255,255,255,.045);
  --svx-radius:28px; --svx-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body.svx{
  background:
    radial-gradient(70vw 60vw at 87% -8%,rgba(174,184,255,.085),transparent 60%),
    radial-gradient(58vw 55vw at -5% 42%,rgba(166,246,219,.055),transparent 62%),
    var(--svx-ink);
  color:var(--svx-paper);
  overflow-x:hidden;
}
body.svx::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
body.svx a{transition:opacity .25s ease,color .25s ease,transform .25s ease}
body.svx a:hover{opacity:.82}
.svx-brand{display:inline-flex!important;align-items:center;gap:.72rem;text-decoration:none!important}
.svx-brand img{width:34px;height:34px;display:block;filter:drop-shadow(0 6px 20px rgba(166,246,219,.12))}
.svx-brand-word{font:650 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.2em;color:var(--svx-paper)}
.svx-hero-shell{position:relative;isolation:isolate;min-height:min(92svh,980px);display:grid;align-items:end;overflow:hidden;border-bottom:1px solid var(--svx-line)}
.svx-hero-shell>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.svx-hero-shell::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,rgba(8,10,13,.05) 0%,rgba(8,10,13,.24) 50%,rgba(8,10,13,.95) 100%);
}
.svx-hero-shell h1{
 max-width:13ch;font-size:clamp(3.3rem,8.3vw,9.2rem)!important;
 line-height:.88!important;letter-spacing:-.06em!important;text-wrap:balance;
 position:relative;z-index:2;
}
.svx-hero-shell h1 em,.svx-hero-shell h1 strong{font-style:normal;color:var(--svx-lime)}
.svx-kicker{
 display:inline-flex;align-items:center;gap:.65rem;margin:0 0 1rem;
 font:600 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--svx-muted)
}
.svx-kicker::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--svx-lime),transparent)}
.svx-hero-index{
 position:absolute;right:clamp(1rem,4vw,4.5rem);top:48%;transform:translateY(-50%);z-index:2;
 display:grid;gap:.65rem;text-align:right;pointer-events:none
}
.svx-hero-index b{font:600 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;color:var(--svx-muted);transition:color .35s ease,transform .35s ease}
.svx-hero-index b.is-active{color:var(--svx-paper);transform:translateX(-10px)}
.svx-scroll-meter{position:fixed;top:0;left:0;width:100%;height:2px;z-index:99999;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--svx-lime),var(--svx-mint),var(--svx-violet));pointer-events:none}
.svx-reveal{opacity:0;transform:translateY(42px);transition:opacity .85s var(--svx-ease),transform .85s var(--svx-ease)}
.svx-reveal.svx-in{opacity:1;transform:none}
.svx-project-art{
 position:relative;display:block;overflow:hidden;border:1px solid var(--svx-line);border-radius:var(--svx-radius);
 background:#0c0f13;aspect-ratio:1.58/1;margin:1.5rem 0 2.1rem;box-shadow:0 28px 80px rgba(0,0,0,.28)
}
.svx-project-art img{width:100%;height:116%;object-fit:cover;display:block;transform:translate3d(0,var(--svx-shift,0px),0) scale(1.03);will-change:transform}
.svx-project-art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);pointer-events:none}
.svx-section-number{
 display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border:1px solid var(--svx-line);border-radius:50%;
 font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--svx-muted)
}
body.svx section,body.svx article{scroll-margin-top:110px}
body.svx h2{letter-spacing:-.035em;text-wrap:balance}
body.svx p{max-width:72ch}
@media(min-width:980px){
 body.svx main>section{padding-top:clamp(6rem,11vw,10rem);padding-bottom:clamp(6rem,11vw,10rem)}
 .svx-project-art{margin-left:auto;max-width:min(68vw,980px)}
}
@media(max-width:760px){
 .svx-hero-shell{min-height:78svh}
 .svx-hero-index{right:1rem;top:25%;gap:.5rem}
 .svx-hero-shell h1{font-size:clamp(3rem,15vw,5.8rem)!important}
 body.svx::before{background-size:36px 36px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .svx-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .svx-project-art img{transform:none!important}
 .svx-scroll-meter{display:none}
}