/* Hero: the particle name and its scroll morph. Owner: js/hero.js. Tokens: css/tokens.css. Rules: design.md */

/* Base = the no-WebGL / no-JS hero: a huge static name, the shapes as a row, the meta in flow. */
.hero { padding-block: 0; }
.hero__stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding-block: var(--sp-10) var(--sp-8);
  padding-inline: var(--gutter);
  overflow: clip;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__name {
  font-size: var(--fs-mega);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.hero__shapes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink-muted);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container);
  z-index: 2;
}
.hero__tagline { max-width: 36ch; font-size: var(--fs-body); color: var(--ink-muted); }
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  z-index: 2;
}
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: var(--sp-7);
  background: var(--line);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: top;
  animation: hero-scroll 1.8s var(--ease-in-out) infinite; /* SLOW_OK: idle loop, never answers input */
}
@keyframes hero-scroll {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* WebGL running: the canvas draws the name, the DOM name stays for readers and search. */
.hero.is-gl .hero__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hero.is-gl .hero__meta {
  position: absolute;
  inset-inline: var(--gutter);
  inset-block-end: var(--sp-9);
  width: auto;
  margin-inline: auto;
}
.hero.is-gl .hero__scroll {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--sp-4);
  width: max-content;
  margin-inline: auto;
}
.hero.is-gl .hero__shapes {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: 50%;
  flex-direction: column;
  translate: 0 -50%;
  opacity: 0;
  transition: opacity var(--dur-slow) ease;
}
.hero.is-gl.is-morphing .hero__shapes { opacity: 1; }
.hero.is-gl .hero__shapes li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0.32;
  transition: opacity var(--dur-slow) ease, color var(--dur-slow) ease;
}
.hero.is-gl .hero__shapes li::before {
  content: "";
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--accent);
  opacity: 0;
  scale: 0.95;
  transition: opacity var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
}
.hero.is-gl .hero__shapes li.is-active { opacity: 1; color: var(--ink); }
.hero.is-gl .hero__shapes li.is-active::before { opacity: 1; scale: 1; }

/* The scroll morph: a tall section with a sticky full-viewport stage. */
.hero.is-morph { height: 300vh; } /* the owner prefers the long opening (18.10.2026) */
.hero.is-morph .hero__stage {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
}

@media (max-width: 47.99rem) {
  .hero__meta { flex-direction: column; align-items: flex-start; }
  .hero.is-gl .hero__shapes {
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: var(--sp-8);
    flex-direction: row;
    justify-content: center;
    translate: none;
    font-size: var(--fs-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; transform: scaleY(0.5); }
  .hero.is-gl .hero__shapes li::before { transition-property: opacity; }
}