/* ═══════════════════════════════════════════════
   LOOM — style.css
   Visual system: infrastructure under observation
   ═══════════════════════════════════════════════ */

:root{
    /* Palette */
    --black:#000000;
    --obsidian:#0a0a0a;
    --teal:#4dd4a8;
    --teal-deep:#0e7a5e;
    --teal-dark:#043828;
    --teal-glow:rgba(77,212,168,.12);
    --teal-ghost:rgba(77,212,168,.04);
    --text-1:rgba(245,245,247,.88);
    --text-2:rgba(245,245,247,.45);
    --text-3:rgba(245,245,247,.18);
    --text-4:rgba(245,245,247,.08);

    /* Typography */
    --font-display:"Syne",system-ui,sans-serif;
    --font-body:"DM Sans",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",monospace;

    /* Easing */
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);

    /* Spacing */
    --section-pad:clamp(80px,12vh,140px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
    height:100%;
    scroll-behavior:smooth;
}
body{
    min-height:100%;
    background:var(--black);
    color:var(--text-1);
    font-family:var(--font-body);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
body.is-booting{overflow:hidden}
body.is-booting .content{pointer-events:none}

::selection{background:rgba(77,212,168,.2);color:#fff}


/* ═══ NAV MARK (fixed top-left) ══════════════ */

.nav-mark{
    position:fixed;
    top:clamp(20px,3vh,36px);
    /* Spine is at clamp(24px,4vw,56px) — center the mark just right of it */
    left:clamp(28px,4.3vw,62px);
    width:clamp(52px,6vw,76px);
    height:clamp(52px,6vw,76px);
    z-index:80;
    display:block;
    text-decoration:none;
    opacity:0;
    transition:opacity 1.2s var(--ease-out),transform .4s var(--ease-out);
    filter:drop-shadow(0 0 8px rgba(77,212,168,.15));
    animation:breathe-nav 8s ease-in-out infinite;
}
body:not(.is-booting) .nav-mark{opacity:1}
.nav-mark svg{width:100%;height:100%;display:block;overflow:visible}
.nav-mark:hover{transform:scale(1.08)}

@keyframes breathe-nav{
    0%,100%{filter:drop-shadow(0 0 4px rgba(77,212,168,.15))}
    50%{filter:drop-shadow(0 0 10px rgba(77,212,168,.3))}
}


/* ═══ CANVAS ══════════════════════════════════ */

#bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}


/* ═══ NOISE OVERLAY ═══════════════════════════ */

.noise{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:256px 256px;
}


/* ═══ VERTICAL SPINE ══════════════════════════ */

.spine{
    position:fixed;
    left:clamp(24px,4vw,56px);
    top:0;bottom:0;
    width:1px;
    z-index:50;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.2s var(--ease-out);
}
body:not(.is-booting) .spine{opacity:1}

.spine-line{
    position:absolute;
    inset:0;
    width:1px;
    background:var(--text-4);
}

.spine-fill{
    position:absolute;
    top:0;left:0;
    width:1px;
    height:0%;
    background:linear-gradient(to bottom,var(--teal),var(--teal-deep));
    transition:height .1s linear;
    box-shadow:0 0 8px var(--teal-glow);
}


/* ═══ SECTION MARKERS ═════════════════════════ */

.section-markers{
    position:fixed;
    right:clamp(20px,3vw,48px);
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:24px;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.2s var(--ease-out);
}
body:not(.is-booting) .section-markers{opacity:1}

.marker{
    display:flex;
    align-items:center;
    gap:8px;
    opacity:.15;
    transition:opacity .5s;
}
.marker.is-active{opacity:1}

.marker::before{
    content:'';
    width:16px;height:1px;
    background:var(--text-3);
    transition:background .5s,width .5s;
}
.marker.is-active::before{
    width:28px;
    background:var(--teal);
}

.marker-num{
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:300;
    letter-spacing:.1em;
    color:var(--text-3);
    transition:color .5s;
}
.marker.is-active .marker-num{color:var(--teal)}


/* ═══ BOOT ════════════════════════════════════ */

.boot{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:var(--black);
    transition:opacity 1.6s var(--ease-out),visibility 1.6s;
}
.boot.is-done{opacity:0;pointer-events:none;visibility:hidden}

.boot-mark{width:clamp(180px,28vw,320px);height:clamp(180px,28vw,320px)}
.boot-mark svg{width:100%;height:100%;overflow:visible}

.m-stroke{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-dasharray:1800;stroke-dashoffset:1800;filter:url(#glow);opacity:0}
.m-stroke-i{stroke-dasharray:1000;stroke-dashoffset:1000}
.m-glow{fill:none;stroke:var(--teal);stroke-width:6;stroke-dasharray:1800;stroke-dashoffset:1800;opacity:0;filter:blur(8px)}
.m-glow-i{stroke-dasharray:1000;stroke-dashoffset:1000}
.m-fill{opacity:0}

.draw-outer .m-stroke:not(.m-stroke-i),
.draw-outer .m-glow:not(.m-glow-i){
    opacity:1;stroke-dashoffset:0;
    transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1),opacity .3s;
}
.draw-inner .m-stroke-i,
.draw-inner .m-glow-i{
    opacity:1;stroke-dashoffset:0;
    transition:stroke-dashoffset 1.4s .1s cubic-bezier(.4,0,.2,1),opacity .3s;
}
.fill-in .m-fill{opacity:1;transition:opacity 1.2s var(--ease-out)}
.fill-in .m-stroke,.fill-in .m-glow{opacity:0;transition:opacity .8s .4s}
.mark-pulse .boot-mark{animation:pulse 2s ease-in-out}

.boot-text{
    margin-top:28px;
    font-family:var(--font-display);
    font-size:clamp(13px,1.5vw,16px);
    font-weight:400;
    letter-spacing:.5em;
    color:var(--text-2);
    opacity:0;transform:translateY(10px);
}
.boot-text.is-on{
    opacity:1;transform:translateY(0);
    transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}

.boot-skip{
    position:absolute;bottom:clamp(20px,3vh,40px);left:50%;transform:translateX(-50%);
    background:none;border:none;cursor:pointer;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--text-3);opacity:0;
    transition:opacity .5s,color .3s;
}
.boot-skip.is-on{opacity:1}
.boot-skip:hover{color:var(--text-2)}


/* ═══ CONTENT ═════════════════════════════════ */

.content{
    position:relative;
    z-index:2;
    opacity:0;
    transition:opacity 2s var(--ease-out);
}
.content.is-visible{opacity:1}


/* ═══ SECTIONS (shared) ══════════════════════ */

.s{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--section-pad) clamp(32px,8vw,120px);
    overflow:hidden;
}

.s-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1100px;
}

.s-centered{text-align:center}

.s-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(48px,6vw,96px);
    align-items:center;
}

.s-label{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:400;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:24px;
    padding-left:2px;
}

h2{
    font-family:var(--font-display);
    font-size:clamp(32px,5vw,64px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
    color:var(--text-1);
}
h2 + h2{margin-top:4px}

.accent{color:var(--teal)}

.s-body{
    margin-top:28px;
    font-size:clamp(15px,1.1vw,18px);
    line-height:1.7;
    color:var(--text-2);
    max-width:520px;
}
.s-centered .s-body{margin-left:auto;margin-right:auto}


/* ═══ HERO ════════════════════════════════════ */

.s-hero{min-height:100vh;padding-bottom:0}

.hero-mark{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:clamp(340px,50vw,680px);
    pointer-events:none;
    opacity:.06;
    filter:drop-shadow(0 0 80px rgba(77,212,168,.04));
    animation:breathe 10s ease-in-out infinite;
}
.hero-mark-svg{width:100%;height:auto;display:block}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.hero-wordmark{
    font-family:var(--font-display);
    font-size:clamp(56px,9vw,120px);
    font-weight:800;
    letter-spacing:.08em;
    line-height:1;
    margin-bottom:clamp(20px,3vh,40px);
    background:linear-gradient(180deg,rgba(245,245,247,.95) 0%,rgba(77,212,168,.5) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 40px rgba(77,212,168,.08));
}

.hero-headline{
    font-family:var(--font-display);
    font-size:clamp(28px,4.5vw,62px);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.035em;
    color:var(--text-1);
}

.hero-sub{
    margin-top:20px;
    font-family:var(--font-mono);
    font-size:clamp(11px,.8vw,13px);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--text-3);
}

.scroll-cue{
    position:fixed;
    bottom:clamp(24px,3vh,48px);
    right:clamp(24px,3vw,56px);
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    opacity:0;
    animation:cue-in 1s 1.2s var(--ease-out) forwards;
    pointer-events:none;
    transition:opacity .5s var(--ease-out);
}
.scroll-cue.is-hidden{opacity:0 !important}

.scroll-cue-text{
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--text-3);
}

.scroll-cue-line{
    width:1px;
    height:40px;
    background:linear-gradient(to bottom,var(--teal),transparent);
    animation:cue-pulse 2.5s ease-in-out infinite;
}


/* ═══ CHAOS-TO-LOGO OVERLAY ══════════════════ */

.viz-chaos-wrap{
    position:absolute;
    left:0;right:0;
    z-index:3;
    pointer-events:none;
    /* top and height set by JS to span pages 2 & 3 */
}

.viz-chaos{
    position:absolute;
    inset:0;
}


/* ═══ FLOATING MARKS (root level) ════════════ */

.float-field{
    position:fixed;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}

.float-mark{
    position:absolute;
    color:var(--teal);
    animation:rise linear infinite;
    will-change:transform;
}
.float-mark svg{width:100%;height:100%;display:block}

/* Stagger positions, sizes, opacity, speed — each mark unique */
.fm-1 {width:18px;left:8%;--fm-o:.06;animation-duration:18s;animation-delay:-2s}
.fm-2 {width:24px;left:18%;--fm-o:.08;animation-duration:22s;animation-delay:-8s}
.fm-3 {width:14px;left:28%;--fm-o:.05;animation-duration:16s;animation-delay:-12s}
.fm-4 {width:30px;left:38%;--fm-o:.10;animation-duration:24s;animation-delay:-4s}
.fm-5 {width:16px;left:48%;--fm-o:.06;animation-duration:19s;animation-delay:-15s}
.fm-6 {width:22px;left:56%;--fm-o:.07;animation-duration:21s;animation-delay:-7s}
.fm-7 {width:12px;left:65%;--fm-o:.04;animation-duration:17s;animation-delay:-10s}
.fm-8 {width:26px;left:74%;--fm-o:.09;animation-duration:23s;animation-delay:-1s}
.fm-9 {width:15px;left:82%;--fm-o:.05;animation-duration:18s;animation-delay:-14s}
.fm-10{width:20px;left:90%;--fm-o:.07;animation-duration:20s;animation-delay:-6s}
.fm-11{width:10px;left:14%;--fm-o:.04;animation-duration:15s;animation-delay:-11s}
.fm-12{width:28px;left:43%;--fm-o:.08;animation-duration:25s;animation-delay:-3s}
.fm-13{width:13px;left:70%;--fm-o:.05;animation-duration:17s;animation-delay:-9s}

/* Additional distribution marks */
.fm-s1 {width:36px;left:5%;--fm-o:.10;animation-duration:26s;animation-delay:-5s}
.fm-s2 {width:14px;left:15%;--fm-o:.04;animation-duration:16s;animation-delay:-13s}
.fm-s3 {width:22px;left:25%;--fm-o:.07;animation-duration:20s;animation-delay:-2s}
.fm-s4 {width:10px;left:35%;--fm-o:.03;animation-duration:14s;animation-delay:-9s}
.fm-s5 {width:32px;left:45%;--fm-o:.09;animation-duration:24s;animation-delay:-7s}
.fm-s6 {width:16px;left:55%;--fm-o:.05;animation-duration:18s;animation-delay:-15s}

@keyframes rise{
    0%{transform:translateY(110vh) rotate(0deg);opacity:0}
    5%{opacity:var(--fm-o,.06)}
    90%{opacity:var(--fm-o,.06)}
    100%{transform:translateY(-20vh) rotate(12deg);opacity:0}
}


/* ═══ PROTOCOL CARDS ═════════════════════════ */

.protocol-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(16px,2vw,32px);
    margin-top:clamp(40px,5vh,72px);
    text-align:left;
}

.proto-card{
    position:relative;
    padding:clamp(24px,2.5vw,40px);
    border:1px solid var(--text-4);
    border-radius:12px;
    background:rgba(10,10,10,.6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:border-color .5s,transform .5s var(--ease-out),box-shadow .5s;
}
.proto-card:hover{
    border-color:rgba(77,212,168,.2);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 0 1px rgba(77,212,168,.08);
}

.proto-icon{
    width:48px;height:48px;
    color:var(--teal);
    margin-bottom:20px;
}
.proto-icon svg{width:100%;height:100%}

.proto-card h3{
    font-family:var(--font-display);
    font-size:clamp(20px,1.6vw,26px);
    font-weight:600;
    letter-spacing:-.02em;
    color:var(--text-1);
    margin-bottom:12px;
}

.proto-card p{
    font-size:clamp(13px,.95vw,15px);
    line-height:1.65;
    color:var(--text-2);
}


/* ═══ CTA SECTION ════════════════════════════ */

.cta-mark{
    width:clamp(60px,8vw,100px);
    margin:0 auto clamp(28px,3vh,48px);
    opacity:.3;
    animation:breathe 10s ease-in-out infinite;
}
.cta-mark-svg{width:100%;height:auto;display:block}

.cta-links{
    display:flex;
    gap:16px;
    justify-content:center;
    margin-top:clamp(32px,4vh,56px);
    flex-wrap:wrap;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    border:1px solid var(--text-4);
    border-radius:8px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:400;
    color:var(--text-2);
    text-decoration:none;
    letter-spacing:.02em;
    transition:all .4s var(--ease-out);
}
.cta-btn svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.cta-btn:hover{
    color:var(--text-1);
    border-color:var(--text-3);
    transform:translateY(-2px);
}
.cta-btn:hover svg{transform:translate(2px,-2px)}

.cta-btn-primary{
    background:var(--teal-deep);
    border-color:var(--teal-deep);
    color:rgba(245,245,247,.95);
}
.cta-btn-primary:hover{
    background:var(--teal);
    border-color:var(--teal);
    color:var(--black);
    box-shadow:0 0 32px var(--teal-glow);
}

.cta-note{
    margin-top:24px;
    font-size:clamp(11px,.8vw,13px);
    color:var(--text-3);
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.6;
}


/* ═══ FOOTER ═════════════════════════════════ */

.foot{
    position:relative;
    z-index:2;
    padding:40px clamp(32px,8vw,120px);
    border-top:1px solid var(--text-4);
}

.foot-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.1em;
    color:var(--text-3);
}

.foot-brand{
    letter-spacing:.3em;
    color:var(--text-2);
}

.foot-sep{opacity:.3}


/* ═══ FLOATING GEOMETRY ══════════════════════ */

.geo{
    position:absolute;
    pointer-events:none;
    will-change:transform;
}

/* Diamond shapes at different sizes */
.geo::before{
    content:'';
    display:block;
    border:1px solid var(--teal);
    opacity:.06;
    transform:rotate(45deg);
    border-radius:2px;
}

.geo-1{top:15%;right:12%;z-index:1}
.geo-1::before{width:120px;height:120px}

.geo-2{bottom:20%;left:8%;z-index:1}
.geo-2::before{width:80px;height:80px;border-color:var(--text-3)}

.geo-3{top:60%;right:25%;z-index:1}
.geo-3::before{width:40px;height:40px}

.geo-4{top:10%;right:8%;z-index:1}
.geo-4::before{width:60px;height:60px}

.geo-5{bottom:15%;left:5%;z-index:1}
.geo-5::before{width:100px;height:100px;border-color:var(--text-3)}

.geo-6{bottom:10%;right:15%;z-index:1}
.geo-6::before{width:50px;height:50px}

.geo-7{top:20%;left:6%;z-index:1}
.geo-7::before{width:70px;height:70px}

.geo-8{bottom:8%;right:6%;z-index:1}
.geo-8::before{width:90px;height:90px;border-color:var(--text-3)}


/* ═══ REVEAL ANIMATIONS ══════════════════════ */

/* Text reveal: word-by-word */
.reveal-line{
    display:block;
    overflow:hidden;
}

.reveal-word{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
    transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);
}

.is-revealed .reveal-word{
    transform:translateY(0);
    opacity:1;
}

/* Stagger words within a line */
.is-revealed .reveal-line:nth-child(1) .reveal-word:nth-child(1){transition-delay:.05s}
.is-revealed .reveal-line:nth-child(1) .reveal-word:nth-child(2){transition-delay:.1s}
.is-revealed .reveal-line:nth-child(1) .reveal-word:nth-child(3){transition-delay:.15s}
.is-revealed .reveal-line:nth-child(2) .reveal-word:nth-child(1){transition-delay:.15s}
.is-revealed .reveal-line:nth-child(2) .reveal-word:nth-child(2){transition-delay:.2s}
.is-revealed .reveal-line:nth-child(2) .reveal-word:nth-child(3){transition-delay:.25s}
.is-revealed .reveal-line:nth-child(3) .reveal-word:nth-child(1){transition-delay:.25s}
.is-revealed .reveal-line:nth-child(3) .reveal-word:nth-child(2){transition-delay:.3s}
.is-revealed .reveal-line:nth-child(3) .reveal-word:nth-child(3){transition-delay:.35s}
.is-revealed .reveal-line:nth-child(4) .reveal-word:nth-child(1){transition-delay:.35s}
.is-revealed .reveal-line:nth-child(4) .reveal-word:nth-child(2){transition-delay:.4s}
.is-revealed .reveal-line:nth-child(4) .reveal-word:nth-child(3){transition-delay:.45s}

/* Second h2 blocks + individual elements use JS-set inline transition-delay */

/* Fade reveal */
.reveal-fade{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.is-revealed .reveal-fade{
    opacity:1;
    transform:translateY(0);
}
.is-revealed .reveal-fade[data-delay="0.5"]{transition-delay:.5s}
.is-revealed .reveal-fade[data-delay="0.6"]{transition-delay:.6s}
.is-revealed .reveal-fade[data-delay="0.7"]{transition-delay:.7s}

/* Card reveal */
.reveal-card{
    opacity:0;
    transform:translateY(40px) scale(.97);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.is-revealed .reveal-card{
    opacity:1;
    transform:translateY(0) scale(1);
}
.is-revealed .reveal-card[data-delay="0"]{transition-delay:.1s}
.is-revealed .reveal-card[data-delay="0.15"]{transition-delay:.25s}
.is-revealed .reveal-card[data-delay="0.3"]{transition-delay:.4s}


/* ═══ KEYFRAMES ═══════════════════════════════ */

@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
}

@keyframes breathe{
    0%,100%{opacity:.06;filter:drop-shadow(0 0 80px rgba(77,212,168,.04))}
    50%{opacity:.09;filter:drop-shadow(0 0 100px rgba(77,212,168,.06))}
}

@keyframes cue-in{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes cue-pulse{
    0%,100%{opacity:.3;height:40px}
    50%{opacity:.7;height:52px}
}

@keyframes float-gentle{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}


/* ═══ SECTION-SPECIFIC TWEAKS ════════════════ */

/* Problem section — body text alignment */
.s-problem .s-body{margin-top:28px}

/* Wedge section — overlay text on orbit */
.s-wedge .s-inner{z-index:3}

/* Surface section — needs more vertical space */
.s-surface{min-height:100vh;padding-top:clamp(100px,14vh,180px);padding-bottom:clamp(100px,14vh,180px)}

/* CTA section */
.s-cta{min-height:90vh}


/* ═══ RESPONSIVE ══════════════════════════════ */

@media(max-width:900px){
    .s-split{
        grid-template-columns:1fr;
        gap:40px;
    }
    .protocol-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .spine{display:none}
    .section-markers{display:none}
}

@media(max-width:600px){
    .s{padding:clamp(60px,10vh,100px) 24px}
    .hero-mark{width:90vw}
    .hero-headline br{display:none}
    .cta-links{flex-direction:column;align-items:center}
    .cta-btn{width:100%;max-width:280px;justify-content:center}
    .geo{display:none}

    .fm-3,.fm-7,.fm-11,.fm-13,.fm-s2,.fm-s4{display:none}

    /* Scroll cue clear of mobile browser chrome */
    .scroll-cue{bottom:max(20px,env(safe-area-inset-bottom,12px));right:20px}

    /* Protocol cards tighter */
    .proto-card{padding:20px}

    /* Ensure viz overlay doesn't interfere with touch */
    .viz-chaos-wrap{z-index:1}
}

/* iOS viewport height fix */
@supports(height:100dvh){
    .s-hero{min-height:100dvh}
    .boot{height:100dvh}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition-duration:0s!important}
    .boot{display:none}
    body.is-booting .content{pointer-events:auto}
    .content{opacity:1!important}
    .reveal-word{transform:none!important;opacity:1!important}
    .reveal-fade{transform:none!important;opacity:1!important}
    .reveal-card{transform:none!important;opacity:1!important}
    .hero-mark{animation:none;opacity:.06}
    #bg{display:none}
    body{background:var(--obsidian)}
    .scroll-cue{animation:none;opacity:1}
}