/* ===========================================================================
   Hero archetypes.

   layouts.css holds the original four, written one at a time for one brand
   each. That does not scale: nine more storefronts arrived at once, and a
   tenth will arrive later.

   These nine are a vocabulary instead. scripts/new_brand.py picks an unused
   one per brand and emits the matching hero markup; nothing here is generated
   and nothing here is per-brand. Every rule draws only on the palette tokens,
   so an archetype looks like whichever brand is wearing it.

     monolith   oversized headline, no eyebrow, full-bleed visual beneath
     ledger     two columns, right column a bordered specification sheet
     prism      diagonal clipped panel, content offset, visual over the seam
     terminal   monospace, visual framed as a terminal window
     atlas      centred over a ruled band, visual wide and short
     column     one narrow measure, long-form, quiet
     marquee    repeating strip overhead, content left, visual raised right
     vault      everything inside a heavy bordered box
     signal     centred, concentric rings behind the visual

   Shared markup contract, emitted by the generator:

     section.hero > div.wrap.hero-inner > div.hero-copy + div.hero-figure

   The original four use bare children of .hero-inner and are untouched by
   everything here.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Shared to the nine
   --------------------------------------------------------------------------- */
.hero-copy > :last-child { margin-bottom: 0; }
.hero-figure { min-width: 0; }
.hero-figure > img,
.hero-figure > video,
.hero-figure > svg { display: block; width: 100%; height: auto; }

/* ===========================================================================
   MONOLITH  -  the headline is the entire hero. No eyebrow, no ornament.
   =========================================================================== */
[data-layout="monolith"] .hero { padding-block: var(--space-24) 0; }
[data-layout="monolith"] .hero-inner { display: block; }
[data-layout="monolith"] .hero h1 {
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
[data-layout="monolith"] .hero .lede {
  font-size: var(--text-xl);
  max-width: 46ch;
  margin-top: var(--space-6);
}
[data-layout="monolith"] .hero-actions { margin-top: var(--space-10); }
/* Wider than the wrap, and clipped by the hero rather than the page, so it
   reads as a band rather than a picture someone placed. */
[data-layout="monolith"] .hero-figure {
  margin: var(--space-20) calc(var(--space-4) * -1) 0;
  border-top: 1px solid var(--border);
  padding-top: var(--space-12);
}
[data-layout="monolith"] .hero::before { inset: -50% -10% auto 40%; }

/* ===========================================================================
   LEDGER  -  technical. The right column is a specification sheet, not an
   image, which is the one archetype that needs no artwork at all.
   =========================================================================== */
[data-layout="ledger"] .hero { padding-block: var(--space-20); }
[data-layout="ledger"] .hero-inner {
  display: grid; gap: var(--space-12);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}
[data-layout="ledger"] .hero h1 { font-size: var(--text-4xl); max-width: 18ch; }
[data-layout="ledger"] .hero::before { inset: -40% 20% auto -20%; }

.spec {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}
.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: var(--text-muted); font-size: var(--text-sm); }
.spec dd {
  margin: 0;
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
}
.spec .spec-yes { color: var(--success); }

@media (max-width: 860px) {
  [data-layout="ledger"] .hero-inner { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PRISM  -  a diagonal seam across the hero, content on one side of it.
   =========================================================================== */
[data-layout="prism"] .hero { padding-block: var(--space-24) var(--space-20); }
[data-layout="prism"] .hero-inner {
  display: grid; gap: var(--space-10);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
}
[data-layout="prism"] .hero h1 { font-size: var(--text-4xl); max-width: 16ch; }

/* The seam. A clipped pseudo-element rather than an SVG, so it costs nothing
   and follows the palette. */
[data-layout="prism"] .hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--primary) 14%, transparent) 0%,
    transparent 46%
  );
  clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%);
  z-index: -1;
  pointer-events: none;
}
[data-layout="prism"] .hero-figure {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  [data-layout="prism"] .hero-inner { grid-template-columns: 1fr; }
  /* A diagonal across a tall narrow hero cuts through the headline. */
  [data-layout="prism"] .hero::after { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 52%); }
}

/* ===========================================================================
   TERMINAL  -  monospace, narrow, and the visual is framed as a window.
   =========================================================================== */
[data-layout="terminal"] .hero { padding-block: var(--space-20); }
[data-layout="terminal"] .hero-inner { display: block; max-width: 62rem; }
[data-layout="terminal"] .hero .eyebrow {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  text-transform: none;
}
[data-layout="terminal"] .hero h1 { font-size: var(--text-4xl); max-width: 20ch; }
[data-layout="terminal"] .hero .lede { max-width: 54ch; }

.term {
  margin-top: var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
  overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); flex: none; }
.term-dot:first-child { background: color-mix(in srgb, var(--danger) 70%, var(--border)); }
.term-title { margin-left: var(--space-3); }
.term-body { padding: var(--space-5); }
.term-body > img,
.term-body > video,
.term-body > svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ===========================================================================
   ATLAS  -  centred over a ruled band. Wide and short rather than tall.
   =========================================================================== */
[data-layout="atlas"] .hero { padding-block: var(--space-20); text-align: center; }
[data-layout="atlas"] .hero-inner { display: block; }
[data-layout="atlas"] .hero h1 {
  font-size: var(--text-4xl); max-width: 22ch; margin-inline: auto;
}
[data-layout="atlas"] .hero .lede { margin-inline: auto; text-align: center; }
[data-layout="atlas"] .hero-actions { justify-content: center; }
[data-layout="atlas"] .hero-figure {
  margin: var(--space-16) auto 0; max-width: 1040px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Ruled band: repeating-linear-gradient rather than an image. Two sets of
   lines at different intervals so it reads as a graticule, not a grid. */
.atlas-band {
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--border) 85%, transparent) 0 1px,
      transparent 1px 84px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--border) 55%, transparent) 0 1px,
      transparent 1px 132px
    );
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
}

/* ===========================================================================
   COLUMN  -  one narrow measure. The quietest of the nine.
   =========================================================================== */
[data-layout="column"] .hero { padding-block: var(--space-24) var(--space-20); }
[data-layout="column"] .hero-inner {
  display: block; max-width: 44rem; margin-inline: auto;
}
[data-layout="column"] .hero h1 {
  font-size: var(--text-3xl); max-width: none; letter-spacing: -0.01em;
}
[data-layout="column"] .hero .lede { font-size: var(--text-lg); max-width: none; }
[data-layout="column"] .hero .lede + .lede { margin-top: var(--space-4); }
[data-layout="column"] .hero-figure { margin-top: var(--space-12); }
/* No wash: the restraint is the point. */
[data-layout="column"] .hero::before { display: none; }
[data-layout="column"] .hero { border-bottom: 1px solid var(--border); }
[data-layout="column"] .section .wrap { max-width: 56rem; }

/* ===========================================================================
   MARQUEE  -  a repeating strip overhead, content left, visual raised.
   =========================================================================== */
[data-layout="marquee"] .hero { padding-block: 0 var(--space-20); }
[data-layout="marquee"] .hero-inner {
  display: grid; gap: var(--space-12);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding-top: var(--space-20);
}
[data-layout="marquee"] .hero h1 { font-size: var(--text-4xl); max-width: 15ch; }
[data-layout="marquee"] .hero-figure { margin-top: calc(var(--space-16) * -1); }

.marquee {
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: var(--space-3);
}
.marquee span { display: inline-block; padding-inline: var(--space-4); }
.marquee span::after { content: "·"; margin-left: var(--space-4); color: var(--accent); }

@media (max-width: 900px) {
  [data-layout="marquee"] .hero-inner { grid-template-columns: 1fr; }
  [data-layout="marquee"] .hero-figure { margin-top: 0; }
}

/* ===========================================================================
   VAULT  -  the hero is a box. Heavy border, corner accents, visual inside.
   =========================================================================== */
[data-layout="vault"] .hero { padding-block: var(--space-16); }
[data-layout="vault"] .hero-inner {
  position: relative;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  padding: var(--space-12);
  display: grid; gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
}
[data-layout="vault"] .hero h1 { font-size: var(--text-4xl); max-width: 16ch; }

/* Corner accents, drawn with two backgrounds rather than four elements. */
[data-layout="vault"] .hero-inner::before,
[data-layout="vault"] .hero-inner::after {
  content: "";
  position: absolute; width: 26px; height: 26px;
  border: 2px solid var(--accent);
  pointer-events: none;
}
[data-layout="vault"] .hero-inner::before {
  top: -2px; left: -2px; border-right: 0; border-bottom: 0;
  border-start-start-radius: var(--radius-lg);
}
[data-layout="vault"] .hero-inner::after {
  bottom: -2px; right: -2px; border-left: 0; border-top: 0;
  border-end-end-radius: var(--radius-lg);
}
[data-layout="vault"] .hero-figure { border-radius: var(--radius-md); overflow: hidden; }

@media (max-width: 880px) {
  [data-layout="vault"] .hero-inner {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
}

/* ===========================================================================
   SIGNAL  -  centred, concentric rings behind the visual.
   =========================================================================== */
[data-layout="signal"] .hero { padding-block: var(--space-24) var(--space-20); text-align: center; }
[data-layout="signal"] .hero-inner { display: block; }
[data-layout="signal"] .hero h1 { font-size: var(--text-5xl); max-width: 17ch; margin-inline: auto; }
[data-layout="signal"] .hero .lede { margin-inline: auto; text-align: center; }
[data-layout="signal"] .hero-actions { justify-content: center; }
[data-layout="signal"] .hero-figure {
  position: relative;
  margin: var(--space-20) auto 0;
  max-width: 760px;
}

/* Three rings, one element, using repeating-radial-gradient so there is
   nothing to animate per ring. */
.rings {
  position: absolute;
  inset: -28% -12%;
  z-index: -1;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--primary) 26%, transparent) 0 1px,
    transparent 1px 74px
  );
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 68%);
  animation: signal-pulse 7s ease-in-out infinite alternate;
}
@keyframes signal-pulse {
  from { transform: scale(0.94); opacity: 0.55; }
  to   { transform: scale(1.06); opacity: 1; }
}
/* A slow pulse behind a headline is exactly what a vestibular trigger looks
   like. Hold it still rather than hiding it - the rings are structure. */
@media (prefers-reduced-motion: reduce) {
  .rings { animation: none; transform: none; }
}