/* Layout, artwork and motion for the four How it works illustrations. */
.how-it-works { background:var(--canvas); color:var(--text); }
.scroll-story {
  --story-column-gap:clamp(28px,4vw,56px);
  --connector-width:min(400px,85vw);
  display:grid;
  gap:clamp(120px,12vw,180px);
  max-width:960px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.scroll-story-step {
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  column-gap:var(--story-column-gap);
}
.scroll-story-step:nth-child(even) .scroll-story-art { grid-column:2; grid-row:1; }
.scroll-story-step:nth-child(even) .how-it-works-copy { grid-column:1; grid-row:1; }
.scroll-story-art { width:100%; max-width:360px; aspect-ratio:1; margin:0 auto; }
.scroll-story .how-it-works-copy { min-width:0; max-width:400px; }
.landing-page .scroll-story h3 { margin:0 0 8px; font:600 clamp(24px,2.2vw,30px)/1.2 Archivo,Arial,sans-serif; letter-spacing:-.025em; text-wrap:balance; }
.scroll-story p { margin:0; color:var(--text-muted); font:400 18px/1.45 Archivo,Arial,sans-serif; text-wrap:pretty; }

/* SVG shapes use the same theme tokens as the rest of the site. */
.hero-art-scene { display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--text); stroke-width:var(--art-stroke,5); stroke-linecap:round; stroke-linejoin:round; }
.hero-art-scene .art-paper { fill:var(--canvas); }
.hero-art-scene .art-accent { stroke:var(--accent); }
.hero-art-scene .art-accent-fill { fill:var(--accent); stroke:none; }
.hero-art-scene .art-ink-fill { fill:var(--text); stroke:none; }
.hero-art-scene .art-soft { stroke:var(--accent); opacity:.35; }
.hero-art-scene .art-comment-lines { stroke-width:15; }
.hero-art-scene .art-marker { stroke-width:32; }

/* The incoming line reveals the drawing. Without JS everything stays visible. */
.scroll-story.is-enhanced .hero-art-scene { transition:opacity 300ms ease, transform 300ms ease; }
.scroll-story.is-enhanced .scroll-story-art:not(.is-reached) .hero-art-scene { opacity:0; transform:translateY(8px); }
.scroll-story.is-enhanced .scroll-story-art:not(.is-reached) .hero-art-motion { animation-name:none; }
.hero-art-motion {
  transform-box:fill-box;
  transform-origin:center;
  animation-duration:3.6s;
  animation-delay:var(--motion-delay,0s);
  animation-timing-function:cubic-bezier(.4,0,.2,1);
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.art-float { animation-name:art-float; }
.art-cursor { animation-name:art-cursor; }
.art-pulse { animation-name:art-pulse; }
.scroll-story.is-page-visible .is-reached.is-in-view .hero-art-motion { animation-play-state:running; }
@keyframes art-float {
  0%, 65%, 100% { transform:translate(0,0); }
  28%, 42% { transform:translate(var(--motion-x,0px),var(--motion-y,-9px)); }
}
@keyframes art-cursor {
  0%, 65%, 100% { transform:translate(0,0); }
  28%, 42% { transform:translate(-10px,-8px) rotate(-4deg); }
}
@keyframes art-pulse {
  0%, 65%, 100% { transform:scale(1); }
  28%, 42% { transform:scale(1.05); }
}

/* Static fallback positions; JS joins the actual ink bounds when enabled. */
.scroll-connector {
  position:absolute;
  top:90%;
  left:calc((100% - var(--story-column-gap)) / 4 - var(--connector-width) * 15 / 340);
  width:var(--connector-width);
  height:180px;
  overflow:visible;
  pointer-events:none;
  fill:none;
}
.connector-dots { stroke:var(--cornflower-300); stroke-width:3.5; stroke-dasharray:1 11; stroke-linecap:round; }
.connector-reveal { fill:none; stroke:white; stroke-width:14; stroke-dasharray:1; stroke-dashoffset:0; }
.scroll-story.is-enhanced .scroll-story-step .scroll-connector {
  left:0;
  width:100%;
  transform:none;
}
.scroll-story-step:nth-child(even) .scroll-connector {
  left:calc(75% + var(--story-column-gap) / 4 - var(--connector-width) * 325 / 340);
  transform:scaleX(-1);
}
@media(max-width:780px) {
  .scroll-story { --connector-width:min(260px,80vw); gap:120px; }
  .scroll-story-step { grid-template-columns:1fr; row-gap:12px; }
  .scroll-story-step:nth-child(even) :is(.scroll-story-art,.how-it-works-copy) { grid-column:auto; grid-row:auto; }
  .scroll-story-art { max-width:260px; }
  .scroll-story .how-it-works-copy { width:100%; max-width:36ch; margin-inline:auto; }
  .scroll-story p { font-size:17px; }
  .scroll-connector, .scroll-story-step:nth-child(even) .scroll-connector { top:calc(100% + 12px); left:50%; height:100px; transform:translateX(-50%); }
  .scroll-story-step:nth-child(even) .scroll-connector { transform:translateX(-50%) scaleX(-1); }
}
@media(prefers-reduced-motion:reduce) {
  .hero-art-motion { animation:none; }
  .scroll-story.is-enhanced .hero-art-scene { opacity:1; transform:none; transition:none; }
  .connector-reveal { stroke-dashoffset:0 !important; }
}