/* =============================================================================
   PAGONI — SHARED UI
   Section headers, the light product surface, buttons, and the reveal contract.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   THE REVEAL CONTRACT
   js/core/reveal.js writes a single --reveal (0..1) per element. This is the
   only place that decides what it means, so a section can opt into a different
   interpretation by overriding these two properties and nothing else.
   ----------------------------------------------------------------------------- */
[style*="--reveal"] {
  opacity: var(--reveal, 1);
  transform: translate3d(0, calc((1 - var(--reveal, 1)) * 1.5rem), 0);
}

@media (prefers-reduced-motion: reduce) {
  [style*="--reveal"] { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   SECTION HEADER
   ----------------------------------------------------------------------------- */
.sectionHead {
  display: flex;
  flex-direction: column;
  gap: var(--raw-spacing-md);
  margin-inline: auto;
  margin-bottom: var(--raw-spacing-xl);
  max-width: 46rem;
}
.sectionHead--center { text-align: center; align-items: center; }
.sectionHead--start  { text-align: left;   align-items: flex-start; margin-inline: 0; }

.sectionHead__eyebrow { color: var(--foreground-signal); }
.sectionHead__heading { color: var(--foreground); text-wrap: balance; }
.sectionHead__lead    { color: var(--foreground-muted); text-wrap: pretty; }

/* -----------------------------------------------------------------------------
   THE PRODUCT SURFACE

   The panel the feature visuals sit on. It is DARK: the visuals themselves are
   recoloured into the site's green (tools/build-feature-theme.mjs), so the
   panel's only job now is to give them an edge and a little depth rather than
   to rescue their legibility.

   It is deliberately a CARD, not a section background: rounded, inset, with the
   field visible all around it. The page's one continuous ground stays
   continuous; this reads as a screen lying on top of it.
   ----------------------------------------------------------------------------- */
.surface {
  position: relative;
  border-radius: var(--rounding-panel);
  overflow: hidden;
  isolation: isolate;
  background: var(--raw-void-900);
  box-shadow:
    0 0 0 1px rgb(234 244 240 / 0.09),
    0 2.5rem 5rem -2rem rgb(2 8 7 / 0.8);
}
.surface--paper { background: var(--raw-void-850); }

/* A wash of the brand across the panel, so a flat dark rectangle never sits on
   a dark page as a flat dark rectangle. Under the artwork, never over it. */
.surface__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(90% 70% at 12% 0%,   rgb(63 179 146 / 0.13) 0%, transparent 62%),
    radial-gradient(80% 80% at 100% 100%, rgb(33 64 140 / 0.16) 0%, transparent 64%);
  pointer-events: none;
}

.surface__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.surface.is-broken {
  background-image: repeating-linear-gradient(45deg, var(--raw-chart-a20) 0 6px, transparent 6px 12px);
  outline: 1px solid var(--foreground-signal);
}
.surface.is-broken .surface__img { display: none; }
.surface.is-broken::after {
  content: 'missing ' attr(data-visual);
  display: block;
  padding: 3rem 1rem;
  text-align: center;
  font-family: var(--typeface-mono);
  font-size: var(--raw-text-micro);
  letter-spacing: var(--raw-tracking-micro);
  text-transform: uppercase;
  color: var(--foreground-signal);
}

/* -----------------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--raw-spacing-sm);
  padding: 0.875rem 1.5rem;
  border-radius: var(--raw-radius-pill);
  font-size: var(--raw-text-body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition:
    background-color var(--raw-duration-normal) var(--raw-ease-entrance),
    border-color var(--raw-duration-normal) var(--raw-ease-entrance),
    color var(--raw-duration-normal) var(--raw-ease-entrance);
}

.btn--primary {
  background: var(--foreground-signal);
  color: var(--raw-void-950);
}
.btn--primary:hover { background: var(--raw-mint-500); }

.btn--ghost {
  border: 1px solid var(--border-hairline);
  color: var(--foreground);
}
.btn--ghost:hover { border-color: var(--foreground-signal); color: var(--foreground-signal); }

.btn--quiet {
  padding-inline: 0;
  color: var(--foreground-muted);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding-bottom: 2px;
}
.btn--quiet:hover { color: var(--foreground); }

/* Slides out from under itself rather than nudging: the arrow ENTERS the
   button, it does not twitch inside it. */
.btn__arrow {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  transform: translateX(-50%);
  opacity: 0;
  transition:
    transform var(--raw-duration-normal) var(--raw-ease-entrance),
    opacity var(--raw-duration-fast) var(--raw-ease-entrance);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(0); opacity: 1; }

.tick {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--foreground-signal);
}

/* -----------------------------------------------------------------------------
   PEACOCK PARTS
   Shared defaults for the drawn feather and eye (js/core/peacock.js). The
   manifesto overrides these for its own tail; everywhere else uses these.
   ----------------------------------------------------------------------------- */
.ocellus, .feather { overflow: visible; }
.oc-ring { stroke-width: 0; }
.oc-ring--1 { fill: var(--raw-teal-900); }
.oc-ring--2 { fill: var(--raw-jade-700); }
.oc-ring--3 { fill: var(--raw-mint-500); }
.oc-ring--4 { fill: var(--raw-royal-800); }
.oc-ring--5 { fill: var(--raw-chart-400); }
.feather .ft-shaft { stroke: var(--raw-jade-700); stroke-width: 1.2; opacity: 0.6; fill: none; }
.feather .ft-barbs { stroke: var(--raw-mint-500); stroke-width: 0.6; opacity: 0.55; fill: none; }

/* -----------------------------------------------------------------------------
   PLACEHOLDER MARK
   Worn by any block currently showing invented content. It is meant to be
   noticeable — that is the entire point of it.
   ----------------------------------------------------------------------------- */
.placeholderMark {
  display: inline-flex;
  align-items: center;
  gap: var(--raw-spacing-sm);
  margin-inline: auto;
  padding: 0.5rem 0.875rem;
  border-radius: var(--raw-radius-pill);
  border: 1px dashed var(--border-signal);
  color: var(--foreground-signal);
  text-transform: none;
  letter-spacing: 0.08em;
}
.placeholderMark__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--foreground-signal);
  flex: none;
}

/* -----------------------------------------------------------------------------
   SHARED NARROW RULES
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sectionHead { margin-bottom: var(--raw-spacing-lg); }
}
@media (max-width: 640px) {
  .sectionHead__heading { font-size: 2.625rem; line-height: 2.3rem; }
  .btn { padding: 0.75rem 1.125rem; }
}