/* split hero: copy left, WebGL stage right */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  min-height: min(100svh, 860px);
  padding-top: var(--nav-h);
}
.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 24px;
  padding: var(--section-y) var(--pad);
}
.hero__title {
  font: 400 clamp(44px, 5.2vw, 76px)/1 var(--sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero__ticker {
  display: inline-block;
  color: var(--shape-accent, var(--text));
  transition: color 0.9s, opacity 0.3s;
}
.hero__ticker.is-swapping { opacity: 0; }
.hero__lede { font: 400 19px/28px var(--sans); max-width: 500px; letter-spacing: -0.01em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__mechanism { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--muted); }
.hero__holdings { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px 28px; margin-top: -12px; }
.hero__holdings li { display: flex; align-items: center; gap: 8px; color: var(--faint); transition: color 0.6s; }
.hero__holdings b { color: var(--muted); transition: color 0.6s; }
/* the holding whose shape is on screen, synced by hero.js */
.hero__holdings li.is-active { color: var(--muted); }
.hero__holdings li.is-active b { color: var(--shape-accent, var(--text)); }
.hero__holdings .hero__holdings-more { color: var(--faint); }
.hero__holdings li[hidden] { display: none; }
/* the open slot gets its own line, led by a "+" */
.hero__holdings .hero__holdings-next { grid-column: 1 / -1; }
.hero__holdings .hero__holdings-next::before { content: "+"; color: var(--faint); }
.hero__holdings b { font-weight: 400; }

/* The engine appends one absolutely positioned canvas here and moves it to track the scroll position. */
.webgl-layer { position: relative; }
.hero-stage {
  position: relative;
  height: 592px;
  user-select: none;
}
/* The canvas is clipped to this box, so fade every edge into the page to hide
   the cut where the echo trail leaves it. Sits above the canvas (z-index 1). */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg), rgb(12 12 11 / 0.85) 12%, rgb(12 12 11 / 0.4) 28%, transparent 45%),
    linear-gradient(to left, var(--bg), transparent 12%),
    linear-gradient(to bottom, var(--bg), transparent 18%),
    linear-gradient(to top, var(--bg), transparent 18%);
}
.hero-fallback {
  position: absolute;
  left: 50%;
  height: var(--scaled-height);
  width: auto;
  translate: -50% -50%;
  pointer-events: none;
  fill: #4b4d4a;
  transition: opacity 300ms;
}
.hero-fallback > use {
  animation: glyph-flash 1.8s ease-out infinite;
  animation-delay: calc(var(--phase) * -1800ms);
}
/* Hidden on load: it only fades in if WebGL still hasn't drawn after a beat,
   so a normal load goes straight from the dark page to the canvas fade-in. */
.hero-fallback { opacity: 0; animation: fallback-in 0.6s ease-out 1.6s forwards; }
@keyframes fallback-in { to { opacity: 1; } }
.hero-stage[data-webgl-drawn] .hero-fallback { animation: none; opacity: 0; }
.hero-stage[data-webgl-drawn] .hero-fallback > use { animation: none; }
@keyframes glyph-flash {
  0%, 100% { opacity: 0; }
  12% { opacity: 1; }
}

/* The engine toggles these utility classes on its canvas while it fades in. */
.opacity-0 { opacity: 0; }
.transition-opacity { transition-property: opacity; }
.duration-200 { transition-duration: 200ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

@media (max-width: 640px) {
  /* too narrow for three columns: let the row wrap */
  .hero__holdings { display: flex; flex-wrap: wrap; gap: 8px 18px; }
}
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__content { padding-bottom: 0; }
  .hero-stage { height: auto; min-height: 360px; aspect-ratio: 1; max-height: 560px; }
  .hero-fallback { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fallback, .hero__ticker { transition: none; }
  .hero-fallback > use { animation: none; opacity: 1; }
  .transition-opacity { transition: none; }
}