/* Copied from pbn.red's skin (Projects/pbn-red-site/skin/assets/css/hero.css) by profiles-red/src/build.py. Site changes go in profiles.css. */
/* pbn.red homepage hero: copy left, the Link web animation right (hero round 1 pick B, 10/20/2026).
 * Hallmark · macrostructure: Manifesto (skin v1) · hero: split, copy left + animated stage right · craft: hand-built canvas, no libraries
 * theme: custom (pbn.red brand base, tokens in base.css). Source: tools/skin_src/hero/ (build_skin.py assembles assets/css/hero.css).
 */

:root {
  --x-h1: clamp(2.5rem, 2.9vw + 1.5rem, 4.5rem);
  --x-stage-h: clamp(26rem, 66vh, 42rem);
  --x-bar-h: 2.75rem;
  --x-shadow: oklch(17.76% 0 0 / 0.14);          /* contact shadow under objects on the stage */
  --x-shadow-0: oklch(17.76% 0 0 / 0);
  --x-hatch: oklch(17.76% 0 0 / 0.22);           /* blocked / no-answer hatching */
}

/* ---------- Hero shell ---------- */
.xhero { position: relative; overflow: clip; padding-block: clamp(1.75rem, 3.6vw, 3.25rem) clamp(2.5rem, 5vw, 4.5rem); }
.xhero__in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4.5vw, 5rem); align-items: center;
}
.xhero__copy { position: relative; z-index: 3; min-width: 0; }
.xhero h1 {
  font-weight: 900; font-size: var(--x-h1); line-height: 0.95; letter-spacing: -0.046em; max-width: 11.5ch;
}
.xhero__lede {
  margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 33ch;
  font-size: clamp(1.125rem, 0.45vw + 0.98rem, 1.375rem); font-weight: 500; line-height: 1.4; color: var(--color-ink-2);
}
.xhero__act { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.xhero__act .btn-ink { font-size: var(--text-lg); padding: 0.85rem 1.5rem 0.9rem; }
.xhero__act .btn-ink:focus-visible { outline-offset: 3px; }
.xhero__fine { font-size: var(--text-sm); color: var(--color-muted); max-width: 30ch; }
.xhero__fine b { display: block; font-weight: 800; color: var(--color-ink); }
/* the no-front-running promise in the hero (10/22/2026), marked like a report reason */
.xhero__promise {
  margin-top: clamp(1.25rem, 2vw, 1.6rem); display: grid; grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: var(--space-sm); align-items: baseline; max-width: 34ch; font-size: var(--text-md); font-weight: 800; line-height: 1.3;
}
.xhero__promise::before { content: ""; width: 0.7rem; height: 0.7rem; background: var(--color-red); transform: translateY(0.02em); }

/* The two doors (10/23/2026, Bike's pick A of the two paths round): check it yourself (ink, free) or have us find
   them (outlined, from $249), equal weight, right under the lede. */
.doors { display: grid; gap: var(--space-sm); margin-top: clamp(1.75rem, 2.8vw, 2.5rem); max-width: 32rem; }
.door {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t p" "s p";
  align-items: center; gap: 0.25rem var(--space-lg); padding: 1rem 1.25rem 1.1rem 1.3rem; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.door__t { grid-area: t; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: clamp(1.35rem, 0.7vw + 1.05rem, 1.75rem); letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
.door__s { grid-area: s; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; max-width: 34ch; }
.door__p { grid-area: p; justify-self: end; text-align: right; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 1vw + 1.15rem, 2.2rem); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.door__p small { display: block; margin-bottom: 0.3rem; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.door--self { background: var(--color-ink); color: var(--color-paper); }
.door--self:hover { background: var(--color-ink-2); }
.door--hire { background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-ink); }
.door--hire:hover { background: var(--color-paper-2); }
.door:active { transform: translateY(1px); }
.door:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.door--hire .door__t::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.32em; background: var(--color-red); vertical-align: 0.12em; }
.doors + .xhero__promise { margin-top: var(--space-lg); }
@media (max-width: 26rem) {
  .door { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "s" "p"; gap: 0.3rem; }
  .door__p { justify-self: start; text-align: left; display: flex; align-items: baseline; gap: 0.4rem; font-size: var(--text-lg); }
  .door__p small { margin: 0; }
}

/* ---------- The stage (each concept draws inside .stage__scene) ---------- */
.xhero__stage { position: relative; margin: 0; min-width: 0; z-index: 2; }
.stage { position: relative; height: var(--x-stage-h); isolation: isolate; user-select: none; -webkit-user-select: none; }
.stage__scene { position: absolute; inset: 0; }
.stage__scene, .stage__scene * { -webkit-tap-highlight-color: transparent; }
/* The scenes move everything from the player clock. base.css's reduced-motion block gives every element a 150 ms
   transition (and transition-property defaults to all), which would animate sizes and transforms the scenes set and
   break their measurements, so nothing inside the stage transitions. */
.stage__scene, .stage__scene *, .stage__scene *::before, .stage__scene *::after { transition: none !important; animation: none !important; }

/* No JS (or before the player mounts): the skin's own statement stack, so the first frame is never empty. */
.stage__still { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 0.55rem; padding-inline-start: 6%; }
.stage__still > span {
  font-family: var(--font-display); font-weight: 900; font-style: italic; letter-spacing: -0.028em; line-height: 1.04;
  font-size: clamp(1.25rem, 1.8vw + 0.5rem, 2.25rem); padding: 0.14em 0.36em 0.2em 0.3em;
}
.stage__still > span:nth-child(2) { margin-inline-start: 6%; }
.stage__still > span:nth-child(3) { margin-inline-start: 12%; }
.stage__still > .vbox { margin-inline-start: 18%; margin-top: 0.4rem; font-size: clamp(3rem, 5vw + 1rem, 6rem); padding: 0.1em 0.34em 0.16em 0.26em; }
.stage.is-live .stage__still { display: none; }
.stage:not(.is-live) .stage__scene { visibility: hidden; }

/* ---------- Control bar: pause + the three sample checks + caption ---------- */
.stage__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) clamp(0.75rem, 1.6vw, 1.5rem);
  margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-ink);
  font-family: var(--font-data); font-size: var(--text-xs); line-height: 1.3;
}
.stage__pause, .stage__domains button {
  appearance: none; border: 0; border-radius: 0; background: none; cursor: pointer; color: var(--color-ink);
  font: inherit; letter-spacing: 0; min-height: 2.25rem; padding: 0.35rem 0;
}
.stage__pause {
  display: inline-flex; align-items: center; gap: 0.5rem; padding-inline: 0.7rem; min-width: 5.6rem;
  box-shadow: inset 0 0 0 2px var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.stage__pause:hover { background: var(--color-ink); color: var(--color-paper); }
.stage__pause:active { transform: translateY(1px); }
.stage__pause-ico { position: relative; width: 0.7rem; height: 0.75rem; flex: none; }
.stage__pause-ico::before, .stage__pause-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0.22rem; background: currentColor; }
.stage__pause-ico::before { left: 0.05rem; }
.stage__pause-ico::after { right: 0.05rem; }
.stage__pause[aria-pressed="true"] .stage__pause-ico::before {
  left: 0.08rem; width: 0; background: none; border-style: solid; border-color: transparent transparent transparent currentColor;
  border-width: 0.375rem 0 0.375rem 0.62rem;
}
.stage__pause[aria-pressed="true"] .stage__pause-ico::after { display: none; }
.stage__domains { display: flex; flex-wrap: wrap; gap: 0 clamp(0.75rem, 1.4vw, 1.25rem); list-style: none; margin: 0; padding: 0; }
.stage__domains button { position: relative; color: var(--color-muted); white-space: nowrap; }
.stage__domains button:hover { color: var(--color-ink); }
.stage__domains button[aria-current="true"] { color: var(--color-ink); }
.stage__prog {
  position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px; background: var(--color-red);
  transform: scaleX(0); transform-origin: left center;
}
.stage__domains button[aria-current="true"] .stage__prog { background: var(--color-ink); }
.stage__cap { flex: 1 1 16rem; min-width: 0; text-align: end; color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-sm); }
.stage__pause:focus-visible, .stage__domains button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.is-still .stage__pause { display: none; }

/* ---------- Next section peek (the skin's red form slab follows the hero) ---------- */
.xhero + .check { border-top: var(--rule-slab); }

/* ---------- Narrow screens: copy first, stage under it ---------- */
@media (max-width: 63.99rem) {
  .xhero__in { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 2.5rem); }
  .xhero h1 { max-width: 14ch; }
  :root { --x-stage-h: clamp(23rem, 96vw, 36rem); }
  .stage__cap { text-align: start; flex-basis: 100%; }
}
@media (max-width: 30rem) {
  :root { --x-stage-h: clamp(21rem, 112vw, 30rem); }
  .xhero__act .btn-ink { font-size: var(--text-md); }
}

/* Link web: one canvas, drawn by b/scene.js from the player's clock.
 * The canvas bleeds past the stage (right to the window edge, up into the hero's top space; sized in JS), so the
 * scene container does not clip; the hero section's own overflow clip is the outer bound.
 * Colors come from base.css tokens (resolved to sRGB by the player for canvas drawing).
 */
.xhero .stage__scene { overflow: visible; }
.xhero .xweb { position: absolute; left: 0; top: 0; display: block; }