/* One centered glass helix with alternating, scroll-revealed callouts. */
.network-story{margin:80px 4% 0;color:var(--ink)}
.network-heading{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0 0;font:9px/1.5 'IBM Plex Mono',monospace;letter-spacing:.035em;color:var(--muted)}
.network-heading span:last-child{font-size:8px}
.network-scroll-field{position:relative;margin-top:-62px}
.network-helix{position:absolute;left:50%;top:0;bottom:0;width:58%;transform:translateX(-50%);pointer-events:none}
.network-worlds{display:block;width:140%;height:100%;margin-left:-20%}
.network-narrative{position:relative;z-index:90;width:100%;overflow:clip}
.network-step{display:flex;align-items:center;justify-content:flex-start;min-height:610px;padding:80px 0}
.network-step:nth-child(even){justify-content:flex-end}
.network-copy{--network-enter-x:clamp(-56px,-5vw,-24px);--network-overshoot-x:4px;--network-enter-tilt:-1.2deg;position:relative;flex:0 0 29%;min-width:0;max-width:320px;padding:23px 22px 25px;border:1px solid var(--line);background:rgba(232,232,226,.96);box-shadow:0 8px 24px #343a3008;opacity:0;transform-origin:right center;will-change:transform,opacity}
.network-copy[data-side="right"]{--network-enter-x:clamp(24px,5vw,56px);--network-overshoot-x:-4px;--network-enter-tilt:1.2deg;transform-origin:left center}
.network-copy:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(120deg,transparent 12%,#fff9 46%,#fff3 62%,transparent 86%)}
.network-copy.is-visible{animation:network-callout-enter 680ms cubic-bezier(.16,1,.3,1) both}
.network-copy.is-visible:before{animation:network-callout-shine 720ms 80ms ease-out both}
.network-copy.is-visible:after{animation:network-callout-leader 520ms 160ms cubic-bezier(.16,1,.3,1) both}
.network-copy.is-visible .network-number{animation:network-number-enter 500ms 80ms cubic-bezier(.16,1,.3,1) both}
.network-copy.is-visible h2{animation:network-copy-enter 500ms 100ms cubic-bezier(.16,1,.3,1) both}
.network-copy.is-visible p{animation:network-copy-enter 500ms 180ms cubic-bezier(.16,1,.3,1) both}
@keyframes network-callout-enter{
  0%{opacity:0;transform:translate3d(var(--network-enter-x),28px,0) scale(.9) rotate(var(--network-enter-tilt))}
  66%{opacity:1;transform:translate3d(var(--network-overshoot-x),-3px,0) scale(1.025) rotate(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
}
@keyframes network-callout-shine{0%,100%{opacity:0}30%{opacity:.85}}
@keyframes network-callout-leader{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes network-number-enter{from{opacity:0;transform:translateY(-8px) scale(1.4)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes network-copy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.network-copy:after{content:'';position:absolute;top:50%;left:100%;width:clamp(12px,2.2vw,30px);height:1px;background:var(--line);transform-origin:left center;pointer-events:none}
.network-copy[data-side="right"]:after{left:auto;right:100%;transform-origin:right center}
.network-number{display:block;transform-origin:left center;margin-bottom:15px;font:9px/1.5 'IBM Plex Mono',monospace;color:var(--muted)}
.network-copy h2{font:450 clamp(24px,2.2vw,32px)/1.13 'IBM Plex Sans',sans-serif;letter-spacing:-.04em}
.network-copy p{margin-top:16px;font:400 14px/1.7 'IBM Plex Sans',sans-serif;letter-spacing:-.01em;color:var(--muted)}
.network-story+.claim-section{margin-top:55px}
@media(max-width:1000px){
  .network-copy{flex-basis:30%;padding:20px 18px 22px}
  .network-copy h2{font-size:25px}
  .network-copy p{font-size:13px}
}
@media(max-width:760px){
  .network-story{margin:58px 6% 0}
  .network-heading{padding-top:22px;font-size:8px}
  .network-heading span:last-child{font-size:7px}
  .network-scroll-field{margin-top:-30px}
  .network-helix{width:56%}
  .network-step{min-height:570px;padding:62px 0}
  .network-copy{padding:18px 14px 20px}
  .network-number{margin-bottom:12px;font-size:8px}
  .network-copy h2{font-size:23px}
  .network-copy p{font-size:12px;line-height:1.7;margin-top:14px}
  .network-story+.claim-section{margin-top:35px}
}
@media(max-width:420px){
  .network-heading span:last-child{display:none}
  .network-helix{width:52%}
  .network-step{min-height:560px}
  .network-copy{flex-basis:42%;padding:16px 12px 18px}
  .network-copy:after{width:8px}
  .network-copy h2{font-size:21px}
  .network-copy p{font-size:12px;line-height:1.65}
}
@media(prefers-reduced-motion:reduce){.network-copy{opacity:1;transform:none;will-change:auto}.network-copy,.network-copy:before,.network-copy:after,.network-copy .network-number,.network-copy h2,.network-copy p{animation:none!important}.network-copy:before{opacity:0}}
