/* Home page scroll story: one signal, followed from a single observation to the
   full infection picture. Without .is-live (no JS, reduced motion, save-data) the
   story is an ordinary stacked section, so every word stays readable. */

/* overflow:hidden on body turns it into a scroll container, which stops sticky working */
html,body{overflow-x:clip;}

.story{padding:0; width:100vw; margin-left:calc(50% - 50vw);}
.story-canvas, .story-plate, .story-shade, .story-rail, .story-skip, .story-outputs, .story-cards{display:none;}
.story-stage{max-width:1180px; margin:0 auto; padding:5.5rem 16px; display:grid; gap:4rem; justify-items:center;}
.story-copy{display:grid; gap:3rem; width:100%;}
.story-ring{order:1;}
/* holds each label in place before its float animation starts, and when animation is off */
.ring-label{transform:var(--base-transform);}
.story-beat h2{font-size:clamp(1.7rem,3.6vw,3.1rem); line-height:1.14; margin-top:0.7rem; max-width:19ch;}
.story-beat h3{font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.2; margin-top:0.7rem; font-weight:600;}
.story-beat p{margin-top:1rem; font-size:clamp(0.95rem,1.25vw,1.08rem); max-width:46ch; text-wrap:pretty; color:#d6d2c9;}
.story-beat .hero-ctas{margin-top:1.6rem;}
.story-beat .ring-chips{gap:1.2rem 2rem; margin-top:1.5rem; padding-top:1.2rem;}

/* hero fades fully into the stage colour, so the two read as one continuous shot */
.hero-media::after{background:linear-gradient(180deg, rgba(4,5,12,.35) 0%, rgba(4,5,12,.2) 40%, rgba(10,10,10,.88) 86%, #0a0a0a 100%);}

/* signal line coming out of the hero's scroll cue */
.scrollcue .bar{position:relative;}
.scrollcue .bar::after{content:""; position:absolute; left:0; top:100%; width:1px; height:2.3rem; background:#a970ff; box-shadow:0 0 8px rgba(169,112,255,.8);}

/* signal line carrying on through the capability list */
.signal-rail{position:absolute; top:0; bottom:5.5rem; left:max(-36px, calc((100% - 100vw) / 4)); width:2px; display:none; pointer-events:none;
  background:linear-gradient(180deg, #a970ff 0%, #ec4899 70%, #f97362 100%); box-shadow:0 0 10px rgba(169,112,255,.6);
  transform:scaleY(0); transform-origin:top;}
.signal-rail::after{content:""; position:absolute; left:50%; bottom:-4px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#f97362; box-shadow:0 0 14px #f97362;}

/* live stage */
.story.is-live{height:920vh;}
.story.is-live ~ main .signal-rail{display:block;}
.story.is-live .story-stage{--ring:min(38vw, 62vh); --ring-x:70%; --ring-y:50%;
  position:sticky; top:0; display:block; height:100vh; height:100svh; max-width:none; padding:0; overflow:hidden; background:var(--bg);}
.story.is-live .story-canvas{display:block; position:absolute; inset:0; width:100%; height:100%; z-index:3;}
.story.is-live .story-shade{display:block; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 34%, rgba(10,10,10,0) 58%);}

/* photo plates sit behind the particles, graded down into the site's dark palette */
.story.is-live .story-plate{display:block; position:absolute; inset:0; z-index:1; overflow:hidden; opacity:0; pointer-events:none;}
.story-plate img{display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.6);}
.story-plate::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(124,58,237,.42), rgba(236,72,153,.2) 60%, rgba(10,10,10,.55)); mix-blend-mode:color;}
.story.is-live .plate-lab{-webkit-mask-image:linear-gradient(90deg, transparent 22%, #000 62%); mask-image:linear-gradient(90deg, transparent 22%, #000 62%);}

/* floating data tags and silo names */
.story-tags{position:absolute; inset:0; z-index:4; overflow:hidden; pointer-events:none;}
.story-tag{position:absolute; left:0; top:0; visibility:hidden; white-space:nowrap; font-family:var(--font-mono); font-size:clamp(0.69rem, 1vw, 0.78rem); font-weight:500; letter-spacing:0.06em; color:#fff;
  padding:0.22rem 0.5rem; border-radius:6px; background:rgba(10,10,10,.8); border:1px solid rgba(246,244,239,.2);}
.story-tag.is-silo{letter-spacing:0.1em; background:none; border-color:transparent; padding:0;}
@media (max-height:460px){ .story-tag:not(.is-silo):not(.is-room):nth-child(3n){display:none;} }
@media (max-height:400px) and (max-width:760px){ .story-tags .story-tag.is-room{font-size:0.5rem; letter-spacing:0.02em;} }
@media (max-height:600px) and (max-aspect-ratio:1/1){ .story-tag:not(.is-silo):not(.is-room):nth-child(7){display:none;} }

.story-tag.is-room{font-size:0.62rem; letter-spacing:0.1em; color:var(--ink-soft); background:none; border-color:transparent; padding:0;}

/* source lines under the stakes */
.story-beat p.story-src, .story.is-live .story-beat p.story-src{margin-top:0.7rem; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; color:var(--ink-soft);}

/* the four everyday signals: illustrative cards, as in the explainer film */
.story.is-live .story-cards{--w:min(340px, 80vw); --h:min(232px, 36svh); display:block; position:absolute; z-index:4; width:var(--w); height:var(--h);
  left:calc(var(--ring-x) - var(--w) / 2); top:calc(var(--ring-y) - var(--h) / 2);}
.story-card{position:absolute; inset:0; overflow:hidden; padding:1.05rem 1.15rem; border-radius:var(--radius); background:#16131a; border:1px solid color-mix(in srgb, var(--c) 42%, transparent); box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--c) 16%, transparent);}
.sc-head{display:flex; justify-content:space-between; gap:0.8rem; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.06em; color:var(--ink-soft);}
.sc-head span:first-child{color:var(--c); text-transform:uppercase;}
.sc-title{margin-top:0.7rem; font-family:var(--font-display); font-size:1.32rem; font-weight:600; letter-spacing:-0.02em; color:var(--ink); line-height:1.15;}
.sc-sub{margin-top:0.2rem; font-size:0.78rem; color:var(--ink-soft);}
.sc-row{display:flex; justify-content:space-between; gap:0.8rem; margin-top:0.55rem; padding-top:0.5rem; border-top:1px solid var(--line); font-size:0.78rem; color:var(--ink-soft);}
.sc-row b{font-weight:600; color:var(--ink); text-align:right;}
.sc-row b.sc-flag{color:var(--c);}
.story-card svg{display:block; width:100%; height:54px; margin-top:0.55rem; fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
@media (max-height:640px){ .story-card{padding:0.7rem 0.9rem;} .sc-title{margin-top:0.4rem; font-size:1.05rem;} .sc-sub{display:none;} .sc-row{margin-top:0.35rem; padding-top:0.3rem; font-size:0.7rem;} .story-card svg{height:30px; margin-top:0.3rem;} .sc-row:nth-of-type(n+6){display:none;} }

/* the platform ring */
.story.is-live .story-ring{position:absolute; z-index:4; margin:0; width:var(--ring); height:var(--ring);
  left:calc(var(--ring-x) - var(--ring) / 2); top:calc(var(--ring-y) - var(--ring) / 2);}
.story.is-live .story-ring .ring-svg{filter:none;}
.story.is-live .story-ring .ring-label{font-size:clamp(0.66rem, 1.05vw, 0.84rem);}
.story.is-live .ring-svg circle{opacity:0;}

/* what comes out of the ring */
.story.is-live .story-outputs{display:block; position:absolute; inset:0; z-index:3;}
.story-output{position:absolute; width:clamp(150px, 15vw, 196px); padding:0.75rem 0.85rem; border-radius:14px;
  background:rgba(22,19,25,.82); border:1px solid rgba(246,244,239,.14); box-shadow:0 14px 36px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.story-output svg{display:block; width:100%; height:24px; fill:none; stroke:#ff7fb0; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.story-output:nth-child(2) svg circle{fill:#f97362; stroke:none;}
.story-output:nth-child(2) svg .halo{fill:none; stroke:#f97362; stroke-width:1; opacity:.5;}
.story-output:nth-child(2) svg path{stroke:rgba(246,244,239,.32);}
.story-output span{display:block; margin-top:0.5rem; font-family:var(--font-display); font-size:0.78rem; font-weight:500; color:var(--ink); line-height:1.25;}
.story-output:nth-child(1){left:62%; top:-7%;}
.story-output:nth-child(2){left:78%; top:39%;}
.story-output:nth-child(3){left:58%; top:82%;}

/* copy: every beat shares one grid cell, so each can hold the same spot */
.story.is-live .story-copy{position:absolute; inset:0; z-index:5; pointer-events:none; display:grid; align-items:center; gap:0;
  max-width:1180px; margin:0 auto; padding:0 4.5rem 0 clamp(16px, 4vw, 40px);}
.story.is-live .story-beat{grid-area:1 / 1; width:min(44vw, 520px);}
.story.is-live .story-beat a{pointer-events:auto;}
.story-beat .w{display:inline-block;}
.story.is-live .story-beat .grad-text{display:inline-block;}

/* chapter rail + skip */
.story.is-live .story-rail{position:absolute; z-index:6; right:clamp(14px, 2.4vw, 32px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem;}
.story-rail button{position:relative; display:block; width:28px; height:26px; padding:0; background:none; border:0; cursor:pointer;}
.story-rail button::after{content:""; position:absolute; right:0; top:50%; width:14px; height:2px; margin-top:-1px; border-radius:2px; background:rgba(246,244,239,.28); transition:width .25s ease, background .25s ease;}
.story-rail button.on::after{width:26px; background:var(--grad);}
.story-rail button span{position:absolute; right:38px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); opacity:0; transition:opacity .25s ease;}
.story-rail button:hover span{opacity:1;}
.story.is-live .story-skip{position:absolute; z-index:6; right:clamp(14px, 2.4vw, 32px); bottom:clamp(14px, 3vh, 28px); display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); padding:0.4rem 0.2rem; transition:color .2s ease;}
.story-skip:hover{color:var(--ink);}
.story-skip svg{width:14px; height:14px;}

/* portrait: graphic on top, copy underneath */
@media (max-aspect-ratio:1/1){
  .story.is-live{height:770vh;}
  .story.is-live .story-stage{--ring:min(57vw, 30svh); --ring-x:50%; --ring-y:31%;}
  .story.is-live .story-shade{background:linear-gradient(0deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.82) 36%, rgba(10,10,10,0) 58%);}
  .story.is-live .plate-lab{-webkit-mask-image:linear-gradient(180deg, #000 30%, transparent 62%); mask-image:linear-gradient(180deg, #000 30%, transparent 62%);}
  .story.is-live .story-copy{align-items:end; padding:0 20px clamp(52px, 8svh, 76px);}
  .story.is-live .story-beat{width:100%; max-width:600px; margin:0 auto; text-align:center;}
  .story.is-live .story-beat h2, .story.is-live .story-beat p{margin-left:auto; margin-right:auto;}
  .story.is-live .story-beat .hero-ctas{justify-content:center;}
  .story.is-live .story-beat .ring-chips{display:none;}
  .story.is-live .story-beat h2{font-size:clamp(1.5rem,6.4vw,2.2rem);}
  .story.is-live .story-beat h3{font-size:clamp(1.25rem,5.4vw,1.7rem);}
  .story.is-live .story-beat p{font-size:0.93rem; line-height:1.5;}
  .story.is-live .story-rail{display:none;}
  .story.is-live .story-skip{right:50%; transform:translateX(50%); white-space:nowrap;}
  .story-output{width:auto; padding:0.5rem 0.6rem;}
  .story-output svg{height:16px;}
  .story-output span{font-size:0.68rem; margin-top:0.3rem;}
  .story-output:nth-child(1){left:-14%; right:auto; width:44%; top:-4%;}
  .story-output:nth-child(2){left:auto; right:-14%; width:44%; top:30%;}
  .story-output:nth-child(3){left:-8%; width:44%; top:74%;}
}
@media (max-height:700px) and (max-aspect-ratio:1/1){
  .story.is-live .story-stage{--ring:min(52vw, 27svh); --ring-y:33%;}
  .story.is-live .story-copy{padding-bottom:54px;}
  .story.is-live .story-beat h2{font-size:clamp(1.25rem,5.6vw,1.7rem);}
  .story.is-live .story-beat[data-beat="final"] p{display:none;}
}
/* short landscape, such as a phone held sideways: keep it side by side, scaled down */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  .story.is-live .story-stage{--ring:min(33vw, 56svh); --ring-y:57%;}
  .story.is-live .story-copy{padding-top:58px; padding-right:1rem;}
  .story.is-live .story-beat h2{font-size:clamp(1.05rem,3.1vw,1.5rem); margin-top:0.35rem;}
  .story.is-live .story-beat h3{font-size:clamp(1rem,2.8vw,1.35rem); margin-top:0.35rem;}
  .story.is-live .story-beat p{font-size:0.8rem; line-height:1.4; margin-top:0.45rem;}
  .story.is-live .story-beat .hero-ctas{margin-top:0.7rem;}
  .story.is-live .story-beat .ring-chips, .story.is-live .story-beat[data-beat="final"] p, .story.is-live .story-rail{display:none;}
  .story.is-live .story-ring .ring-label{font-size:0.6rem; width:82px;}
  .story.is-live .story-output{width:112px; padding:0.4rem 0.5rem;}
  .story.is-live .story-output svg{display:none;}
  .story.is-live .story-output span{margin-top:0; font-size:0.66rem;}
  .story.is-live .story-skip{bottom:6px;}
  .story.is-live .story-cards{--w:min(250px, 38vw); --h:min(176px, 58svh); top:calc(57% - var(--h) / 2 + 8px);}
  .sc-head span:last-child, .story-card .sc-row:last-child{display:none;}
}
@media (max-height:360px) and (min-aspect-ratio:1/1){
  .story.is-live .story-stage{--ring:min(28vw, 52svh); --ring-x:75%;}
  .story-tag.is-room{display:none;}
}

/* touch devices: each of these re-blends or re-blurs on every scroll frame, which a phone can't sustain */
@media (pointer:coarse){
  body::before{display:none;}
  .nav .wrap, .nav.scrolled .wrap{background:rgba(14,13,17,.9); backdrop-filter:none; -webkit-backdrop-filter:none;}
  .hero-stat, .story-output{background:rgba(22,19,25,.86); backdrop-filter:none; -webkit-backdrop-filter:none;}
  .hero-media video{filter:none; opacity:.62;}
  .mission-media video{filter:none; opacity:.55;}
  .ring-glow{filter:none; opacity:.5;}
  .story-plate::after{mix-blend-mode:normal; background:rgba(70,40,130,.3);}
  .story.is-live .story-ring .ring-label{animation:none;}
  .story.is-live .story-plate{will-change:transform, opacity;}
}