/* SweetHive scroll story — "Scoped by design".
   Pinning is CSS position:sticky (.story-vp); GSAP only animates children of
   .story-stage. Below 920px or with prefers-reduced-motion the pinned track
   stays hidden and .story-static renders the same narrative as an editorial
   sequence (also the no-JS fallback). */

/* overflow-anchor: browser scroll anchoring picks nodes inside the animated
   sticky stage and fights the scrubbed transforms on upward scroll,
   intermittently freezing the pin - exclude the whole story subtree. */
.story{border-top:1px solid var(--line);padding:0 0 88px;overflow-anchor:none}
.story .wrap{max-width:1240px}
.story-lead{padding-top:88px;padding-bottom:36px}
.story-lead h2{max-width:760px}

/* ---------- pinned track (desktop, motion OK) ---------- */
.story-track{height:560vh;display:none}
.story-local .story-track{height:440vh}
.story.story-pinned .story-track{display:block}
.story.story-pinned .story-static{display:none}
.story-vp{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center}
.story-stage{display:grid;grid-template-columns:290px minmax(0,1fr);gap:48px;align-items:center;width:100%;padding-top:68px}

/* copy rail */
.story-copy{position:relative}
.story-steps{position:relative;height:230px}
.story-step{position:absolute;inset:0;opacity:0;visibility:hidden}
.story-step h3{font-size:clamp(22px,1.9vw,28px);margin-bottom:10px}
.story-step p{color:var(--muted);font-size:15.5px;max-width:270px}
.story-rail{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.story-rail li{display:flex;gap:10px;align-items:center;transition:color .3s ease,opacity .3s ease;opacity:.55}
.story-rail li::before{content:"";width:14px;height:1px;background:currentColor;transition:width .3s ease}
.story-rail li.on{color:var(--ink);opacity:1}
.story-rail li.on::before{width:24px}

/* visual stage */
.story-visual{position:relative}
.story-frame{position:relative;aspect-ratio:1800/1061;border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 30px 70px -32px rgba(23,22,31,.35)}
.story-cam{position:absolute;inset:0;will-change:transform}
.story-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.story-shot[data-shot="00"]{opacity:1}
.story-veil{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}

/* annotations (positioned by JS in % of the frame; text stays unscaled) */
.story-annos{position:absolute;inset:0;pointer-events:none}
.anno{position:absolute;opacity:0}
.anno-ring{border:1.5px solid var(--amber);border-radius:10px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent)}
.anno-ring.ai{border-color:var(--violet);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--violet) 16%, transparent)}
.anno-ring::after{content:attr(data-label);position:absolute;top:calc(100% + 7px);left:-1px;
  font-family:var(--mono);font-weight:500;font-size:10px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--card);padding:5px 8px;border:1px solid var(--line);border-radius:6px;white-space:nowrap}
.anno-ring.label-top::after{top:auto;bottom:calc(100% + 7px)}
.anno-tag{transform:translate(14px,-50%);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  background:var(--card);border:1px solid var(--line);padding:4px 7px;border-radius:6px}
.anno-tag::before{content:"";display:inline-block;width:15px;height:1px;background:var(--ink);opacity:.5;
  vertical-align:middle;margin-right:7px}

/* floating detail layers (04 groups proof, 05 agent, 06 apps) */
.story-float{position:absolute;margin:0;opacity:0;visibility:hidden;will-change:transform;border-radius:14px;
  box-shadow:0 28px 64px -28px rgba(23,22,31,.42)}
.story-float img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.story-float-04{width:43%;right:-2%;top:15%}
.story-float-05{width:37%;right:0;top:4%}
.story-float-06{width:43%;right:1%;top:7%}
.fanno{position:absolute;opacity:0;border:1.5px solid var(--amber);border-radius:12px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent)}
.fanno-crm{left:8%;top:72.5%;width:15%;height:21%}
.fanno-reach{left:24.5%;top:72.5%;width:15%;height:21%}

/* ---------- story 2 "Local AI" additions ---------- */
.story-float-07{width:34%;right:8%;top:4%}
.story-nodewin{position:absolute;margin:0;opacity:0;visibility:hidden;will-change:transform;
  width:86%;left:7%;top:3%;aspect-ratio:1516/1034;border-radius:14px;
  box-shadow:0 34px 80px -30px rgba(23,22,31,.55)}
.story-nodewin img{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;
  border:1px solid var(--line);background:#17161F}
.story-nodewin .shot09{opacity:0}
.ring-agent{left:25%;top:19.5%;width:63%;height:6.5%}

/* ---------- static editorial fallback (mobile / reduced motion / no JS) ---------- */
.story-static{padding-top:8px}
.story-static .sblock{max-width:720px;margin:0 auto 60px;padding:0 24px}
.story-static .sblock:last-child{margin-bottom:0}
.story-static h3{font-size:clamp(21px,3.2vw,26px);margin:20px 0 8px}
.story-static p{color:var(--muted);font-size:15.5px;max-width:560px}
.scrop{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(23,22,31,.25)}
.scrop img{position:absolute;display:block;max-width:none}
.scrop-hive img{width:200%;left:-58%;top:-14%}
.scrop-context img{width:200%;left:-30%;top:-2%}
.scrop-scope img{width:200%;left:-42%;top:-18%}
.sduo{display:grid;grid-template-columns:1fr 1.18fr;gap:14px;align-items:start}
.sduo img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--card);
  box-shadow:0 24px 60px -30px rgba(23,22,31,.25)}
@media(max-width:460px){.sduo{grid-template-columns:1fr}}
.sone{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  background:var(--card);box-shadow:0 24px 60px -30px rgba(23,22,31,.25)}
.sone-narrow{width:min(340px,86%);margin:0 auto}
.scrop-node img{width:154%;left:-39%;top:-2%}
.scrop-chat img{width:160%;left:-41%;top:-6%}