/* Scene 1 - hero */
.hero-vis { inset: 0; z-index: 2; }
.hero-glow {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
}
.hero-shape { position: absolute; overflow: visible; transform: scale(0.0001); transform-origin: 50% 50%; }
.hero-body { stroke: color-mix(in srgb, var(--accent-soft) 70%, transparent); stroke-width: 0.5; stroke-linejoin: round; }
.hero-sheen { fill: color-mix(in srgb, var(--accent-soft) 46%, transparent); }
.hero-seeds { position: absolute; inset: 0; }
.seed { position: absolute; left: 0; top: 0; display: grid; place-items: center; opacity: 0; }
.seed svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--shadow-c) 22%, transparent)); }
.seed path { fill: var(--hs); stroke: var(--h); stroke-width: 2; stroke-linejoin: round; }
.seed .ms { position: relative; font-size: calc(var(--sz) * 0.42); color: var(--hi); font-variation-settings: 'FILL' 1; }

.hero-copy { width: min(52vw, 46rem); z-index: 6; }
.hero-copy .t-hero { --fs-hero: clamp(3rem, 1.4rem + 5.4vw, 7.4rem); }
.hero-copy .lead { margin-top: 30px; max-width: 30ch; }
.t-hero em { position: relative; }

.hero-beat2 { left: 0; right: 0; width: auto; align-items: center; text-align: center; z-index: 7; padding: 0 var(--gutter); }
.hero-beat2 h2 { color: var(--on-accent); }
.hero-beat2 .lead { color: color-mix(in srgb, var(--on-accent) 88%, transparent); margin-inline: auto; max-width: 34ch; }
.hero-beat2 .lead em { color: var(--on-accent); }

.scroll-cue {
  z-index: 8; left: 50%; bottom: 26px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: var(--fs-label-m); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted);
}
.scroll-cue i { width: 2px; height: 34px; border-radius: 1px; background: linear-gradient(var(--ink3) 0 40%, transparent 40%); background-size: 100% 200%; animation: cue 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

@media (max-width: 759px) {
  .hero-copy { width: auto; }
  .hero-copy .t-hero { --fs-hero: clamp(2.7rem, 13.2vw, 3.6rem); }
  .hero-copy .lead { margin-top: 16px; }
  .scroll-cue { bottom: 56px; }
}