/* "How it works": a route diagram (agent, your approval, the networks) above the product picture.
   The line draws itself as you scroll (CSS scroll-driven animation), the gate locks when you reach "approve", and the posts
   fan out when you reach "post". Browsers without scroll timelines get the same states from the active step (landing.js).
   Everything is decoration (aria-hidden) and only transform and opacity change, apart from the stroke of the drawn line. */
.story-stage { position: sticky; top: 6rem; display: grid; gap: 1.25rem; align-self: start; }
.story-frame { position: relative; aspect-ratio: 16 / 10; padding: 6px; border-radius: 20px; box-shadow: var(--glass-highlight), var(--shadow-glass), 0 40px 80px -40px hsl(var(--accent) / 0.35); }
.story-shot { position: absolute; inset: 6px; overflow: hidden; border-radius: 14px; background: hsl(var(--surface)); opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.7s var(--lp-ease), transform 0.9s var(--lp-ease); }
[data-active='0'] .s0, [data-active='1'] .s1, [data-active='2'] .s2 { opacity: 1; transform: none; }

.route { position: relative; width: 100%; aspect-ratio: 600 / 220; container-type: inline-size; }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --sw: 1.6; }
.trk path { stroke: hsl(var(--border)); stroke-width: var(--sw); }
.drw { stroke: hsl(var(--accent)); stroke-width: calc(var(--sw) * 1.25); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-steer); }
[data-active='0'] .drw-a { stroke-dashoffset: 0.45; }
:is([data-active='1'], [data-active='2']) .drw-a { stroke-dashoffset: 0; }
[data-active='1'] .drw-b { stroke-dashoffset: 0.62; transition-delay: 0.5s; }
[data-active='2'] .drw-b { stroke-dashoffset: 0; }

/* the gate: dashed and waiting, then locked */
.gate-ring { fill: hsl(var(--background)); stroke: hsl(var(--muted-foreground)); stroke-width: calc(var(--sw) * 1.1); stroke-dasharray: 4.2 4.2; transform-box: fill-box; transform-origin: center; transition: stroke 0.5s, fill 0.5s; }
.gate-pulse { fill: none; stroke: hsl(var(--accent)); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gate-check { stroke: hsl(var(--accent)); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
:is([data-active='1'], [data-active='2']) .gate-ring { stroke: hsl(var(--accent)); fill: hsl(var(--accent-soft)); stroke-dasharray: none; }
:is([data-active='1'], [data-active='2']) .gate-check { stroke-dashoffset: 0; transition: stroke-dashoffset 0.55s var(--ease-steer) 0.3s; }

/* packets */
.pk { fill: hsl(var(--accent)); opacity: 0; }
.pk0 { fill: hsl(var(--foreground) / 0.5); }

/* labels and network marks sit on top of the SVG, positioned in percent of the same box so they scale with it */
.rn { position: absolute; transform: translate(0, -50%); padding: 0.25em 0.8em; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--surface)); color: hsl(var(--muted-foreground)); font-size: clamp(0.625rem, 2.5cqw, 0.8125rem); font-weight: 540; line-height: 1.5; white-space: nowrap; transition: color 0.5s, border-color 0.5s, background-color 0.5s; }
.rn-agent { left: 0; top: 76.4%; }
.rn-gate { left: 50%; top: 73%; transform: translate(-50%, -50%); }
[data-active='0'] .rn-agent, :is([data-active='1'], [data-active='2']) .rn-gate { color: hsl(var(--accent)); border-color: hsl(var(--accent) / 0.4); background: hsl(var(--accent-soft)); }
.nd { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(1.2rem, 5.2cqw, 2.1rem); aspect-ratio: 1; border: 1px solid hsl(var(--border)); border-radius: 50%; background: hsl(var(--surface)); color: hsl(var(--muted-foreground)); transition: color 0.5s, border-color 0.5s, background-color 0.5s; }
.nd .brand-ico { width: 52%; height: 52%; margin: 0; }
[data-active='2'] .nd { color: hsl(var(--foreground)); border-color: hsl(var(--accent) / 0.5); background: hsl(var(--accent-soft)); transition-delay: calc(var(--n) * 90ms + 1050ms); }

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lock { 0% { transform: scale(1.32); } 50% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.6); opacity: 0; } }
@keyframes land { 0% { scale: 1; } 40% { scale: 1.22; } 100% { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) [data-active='0'] .gate-ring { animation: spin 14s linear infinite; }
  html:not(.motion-off) [data-active='0'] .pk0 { animation: draft 3.4s linear infinite; }
  html:not(.motion-off) :is([data-active='1'], [data-active='2']) .gate-ring { animation: lock 0.7s var(--ease-enter) both; }
  html:not(.motion-off) :is([data-active='1'], [data-active='2']) .gate-pulse { animation: ping 0.9s var(--ease-enter) 0.25s both; }
  html:not(.motion-off) [data-active='2'] .pk1 { animation: fan0 1.2s linear 0.10s both; }
  html:not(.motion-off) [data-active='2'] .pk2 { animation: fan1 1.2s linear 0.19s both; }
  html:not(.motion-off) [data-active='2'] .pk3 { animation: fan2 1.2s linear 0.28s both; }
  html:not(.motion-off) [data-active='2'] .pk4 { animation: fan3 1.2s linear 0.37s both; }
  html:not(.motion-off) [data-active='2'] .pk5 { animation: fan4 1.2s linear 0.46s both; }
  html:not(.motion-off) [data-active='2'] .nd { animation: land 0.6s var(--ease-enter) both; animation-delay: calc(var(--n) * 90ms + 1050ms); }
}
@media (prefers-reduced-motion: reduce) {
  .drw, .gate-ring, .gate-check, .rn, .nd, .story-shot { transition: none; }
}
html.motion-off .drw, html.motion-off .gate-ring, html.motion-off .gate-check, html.motion-off .rn, html.motion-off .nd { transition: none; }

/* Scroll-scrubbed: the line is drawn by the scroll position, not by the step. */
@supports (animation-timeline: view()) {
  .story-grid { view-timeline: --story block; }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.motion-off) .drw { transition: none; animation: draw linear both; animation-timeline: --story; }
    html:not(.motion-off) .drw-a { animation-range: cover 14% cover 40%; }
    html:not(.motion-off) .drw-b { animation-range: cover 44% cover 66%; }
  }
}

/* Small screens: the route becomes a slim strip that stays under the nav while the three steps scroll past. */
@media (max-width: 56rem) {
  .story-grid { display: flex; flex-direction: column; gap: 1rem; }
  .step { scroll-margin-top: 12rem; }
  .story-stage { order: -1; align-self: stretch; top: calc(max(0.75rem, env(safe-area-inset-top, 0px)) + 3.25rem + 0.5rem); z-index: 2; padding: 0.35rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 18px;
    background: hsl(var(--background)); }
  .story-frame { display: none; }
  .route { max-width: 17.5rem; margin-inline: auto; }
  .route-svg { --sw: 2.6; }
}
@media (max-width: 56rem) and (max-height: 600px) { .story-stage { position: static; } }

@keyframes fan0 {
  0% { transform: translate(300px, 110px); opacity: 0; }
  7.7% { transform: translate(300.7px, 110px); opacity: 1; }
  15.4% { transform: translate(305.2px, 109.9px); opacity: 1; }
  23.1% { transform: translate(316.9px, 109.4px); opacity: 1; }
  30.8% { transform: translate(337.4px, 106.6px); opacity: 1; }
  38.5% { transform: translate(366.1px, 98.1px); opacity: 1; }
  46.2% { transform: translate(400.5px, 79.2px); opacity: 1; }
  53.8% { transform: translate(439.5px, 50.8px); opacity: 1; }
  61.5% { transform: translate(473.9px, 31.9px); opacity: 1; }
  69.2% { transform: translate(502.6px, 23.4px); opacity: 1; }
  76.9% { transform: translate(523.1px, 20.6px); opacity: 1; }
  84.6% { transform: translate(534.8px, 20.1px); opacity: 1; }
  92.3% { transform: translate(539.3px, 20px); opacity: 1; }
  100% { transform: translate(540px, 20px); opacity: 0; }
}
@keyframes fan1 {
  0% { transform: translate(300px, 110px); opacity: 0; }
  7.7% { transform: translate(300.7px, 110px); opacity: 1; }
  15.4% { transform: translate(305.2px, 110px); opacity: 1; }
  23.1% { transform: translate(316.9px, 109.7px); opacity: 1; }
  30.8% { transform: translate(337.4px, 108.3px); opacity: 1; }
  38.5% { transform: translate(366.1px, 104.1px); opacity: 1; }
  46.2% { transform: translate(400.5px, 94.6px); opacity: 1; }
  53.8% { transform: translate(439.5px, 80.4px); opacity: 1; }
  61.5% { transform: translate(473.9px, 70.9px); opacity: 1; }
  69.2% { transform: translate(502.6px, 66.7px); opacity: 1; }
  76.9% { transform: translate(523.1px, 65.3px); opacity: 1; }
  84.6% { transform: translate(534.8px, 65px); opacity: 1; }
  92.3% { transform: translate(539.3px, 65px); opacity: 1; }
  100% { transform: translate(540px, 65px); opacity: 0; }
}
@keyframes fan2 {
  0% { transform: translate(300px, 110px); opacity: 0; }
  7.7% { transform: translate(300.7px, 110px); opacity: 1; }
  15.4% { transform: translate(305.2px, 110px); opacity: 1; }
  23.1% { transform: translate(316.9px, 110px); opacity: 1; }
  30.8% { transform: translate(337.4px, 110px); opacity: 1; }
  38.5% { transform: translate(366.1px, 110px); opacity: 1; }
  46.2% { transform: translate(400.5px, 110px); opacity: 1; }
  53.8% { transform: translate(439.5px, 110px); opacity: 1; }
  61.5% { transform: translate(473.9px, 110px); opacity: 1; }
  69.2% { transform: translate(502.6px, 110px); opacity: 1; }
  76.9% { transform: translate(523.1px, 110px); opacity: 1; }
  84.6% { transform: translate(534.8px, 110px); opacity: 1; }
  92.3% { transform: translate(539.3px, 110px); opacity: 1; }
  100% { transform: translate(540px, 110px); opacity: 0; }
}
@keyframes fan3 {
  0% { transform: translate(300px, 110px); opacity: 0; }
  7.7% { transform: translate(300.7px, 110px); opacity: 1; }
  15.4% { transform: translate(305.2px, 110px); opacity: 1; }
  23.1% { transform: translate(316.9px, 110.3px); opacity: 1; }
  30.8% { transform: translate(337.4px, 111.7px); opacity: 1; }
  38.5% { transform: translate(366.1px, 115.9px); opacity: 1; }
  46.2% { transform: translate(400.5px, 125.4px); opacity: 1; }
  53.8% { transform: translate(439.5px, 139.6px); opacity: 1; }
  61.5% { transform: translate(473.9px, 149.1px); opacity: 1; }
  69.2% { transform: translate(502.6px, 153.3px); opacity: 1; }
  76.9% { transform: translate(523.1px, 154.7px); opacity: 1; }
  84.6% { transform: translate(534.8px, 155px); opacity: 1; }
  92.3% { transform: translate(539.3px, 155px); opacity: 1; }
  100% { transform: translate(540px, 155px); opacity: 0; }
}
@keyframes fan4 {
  0% { transform: translate(300px, 110px); opacity: 0; }
  7.7% { transform: translate(300.7px, 110px); opacity: 1; }
  15.4% { transform: translate(305.2px, 110.1px); opacity: 1; }
  23.1% { transform: translate(316.9px, 110.6px); opacity: 1; }
  30.8% { transform: translate(337.4px, 113.4px); opacity: 1; }
  38.5% { transform: translate(366.1px, 121.9px); opacity: 1; }
  46.2% { transform: translate(400.5px, 140.8px); opacity: 1; }
  53.8% { transform: translate(439.5px, 169.2px); opacity: 1; }
  61.5% { transform: translate(473.9px, 188.1px); opacity: 1; }
  69.2% { transform: translate(502.6px, 196.6px); opacity: 1; }
  76.9% { transform: translate(523.1px, 199.4px); opacity: 1; }
  84.6% { transform: translate(534.8px, 199.9px); opacity: 1; }
  92.3% { transform: translate(539.3px, 200px); opacity: 1; }
  100% { transform: translate(540px, 200px); opacity: 0; }
}
@keyframes draft {
  0% { transform: translate(96px, 168px); opacity: 0; }
  6.1% { transform: translate(97.2px, 168px); opacity: 1; }
  12.2% { transform: translate(105.6px, 167.7px); opacity: 1; }
  18.3% { transform: translate(126.6px, 165px); opacity: 1; }
  24.4% { transform: translate(162.8px, 153.5px); opacity: 1; }
  30.6% { transform: translate(212.1px, 130.1px); opacity: 1; }
  36.7% { transform: translate(249.5px, 116.5px); opacity: 1; }
  42.8% { transform: translate(271.5px, 112px); opacity: 1; }
  48.9% { transform: translate(280.2px, 110.9px); opacity: 1; }
  55% { transform: translate(281.5px, 110.8px); opacity: 1; }
  85% { transform: translate(281.5px, 110.8px); opacity: 1; }
  100% { transform: translate(281.5px, 110.8px); opacity: 0; }
}