/* ============================================================
   Variant A · "Vessel"
   Centered, ceremonial, minimal. A portal of concentric gold
   loops frames the wordmark, and nothing else.
   ============================================================ */

.hero-vessel {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding-block: 8rem 4rem;
}
.hero-vessel .hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(56% 44% at 50% 48%,
    rgba(20, 13, 9, 0.9) 0%, rgba(20, 13, 9, 0.66) 34%,
    rgba(20, 13, 9, 0.24) 62%, transparent 84%);
}
.hero-vessel .vessel-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero-vessel [data-river="vessel"] {
  width: min(108vh, 126vw, 1080px);
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 0 70px rgba(217, 164, 65, 0.12));
}
.hero-vessel .hero-content {
  position: relative;
  z-index: 3;
  padding-inline: var(--gutter);
}
.hero-vessel .hero-wordmark {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3rem, 1.5rem + 6.2vw, 6.6rem);
  line-height: 0.96;
  letter-spacing: 0.006em;
  margin: 0;
  text-shadow: 0 2px 42px rgba(11, 8, 7, 0.5);
}
.hero-vessel .hero-wordmark span { display: block; }
.hero-vessel .hero-flourish {
  width: clamp(4.5rem, 3rem + 4vw, 6.5rem);
  height: auto;
  margin: var(--space-lg) auto 0;
}

/* Hero sequence — the wordmark and tagline wait for the flourish to finish
   drawing, then fade in place (no movement), so the eye lands on the text
   last. Revealed by the "grow:done" listener adding .seq-in; reduced-motion
   shows them at once. */
.hero-vessel .hero-wordmark,
.hero-vessel .lead {
  opacity: 0;
  transition: opacity 0.5s linear; /* starts at 30% of the flourish draw, lands at its ~1.8s completion */
}
.hero-vessel .hero-content.seq-in .hero-wordmark,
.hero-vessel .hero-content.seq-in .lead { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-vessel .hero-wordmark,
  .hero-vessel .lead { opacity: 1; transition: none; }
}