/* WEBLAUNCHER shared chapters.
 *
 * Scoped entirely under .wl-sections so nothing here can reach the template's own
 * markup, and coloured entirely from --wl-* custom properties that site-sections.js
 * sets from the brand palette. Template palettes use incompatible variable names
 * (--void, --paper, --bg, --background, --night); normalising once at the boundary is
 * what lets one stylesheet sit under all fourteen.
 *
 * Every value is relative (em/rem/ch/%) so the sections inherit the template's own
 * type scale rather than imposing one.
 */

.wl-sections {
  --wl-gap: clamp(3.5rem, 9vw, 7rem);
  --wl-rule: 1px solid color-mix(in srgb, var(--wl-fg) 22%, transparent);
  background: var(--wl-bg);
  color: var(--wl-fg);
  font-family: var(--wl-body-font, inherit);
  /* The template above may be absolutely positioned or transformed; a fresh stacking
     context stops any of that bleeding into the chapters. */
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow-x: clip;
}

.wl-sections * { box-sizing: border-box; }

/* ---- texture wash ------------------------------------------------------
 * Two textures are generated, gated and pinned for every project, and before this
 * exactly ONE template of fourteen (soft-toy) ever displayed them. They cost a
 * Venice generation each and appeared nowhere.
 *
 * They sit at low opacity BEHIND the chapters, never behind text directly: the
 * pseudo-element is under everything (z-index -1) and the sections keep their own
 * solid background, so the measured contrast is untouched. */
.wl-sections[data-wl-texture]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wl-texture);
  background-size: clamp(220px, 26vw, 420px);
  background-repeat: repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

.wl-section {
  padding: var(--wl-gap) clamp(1.25rem, 5vw, 4rem);
  max-width: 78rem;
  margin: 0 auto;
  border-top: var(--wl-rule);
}

/* ---- chapter label: 01 / THE PROPHECY ---------------------------------- */
.wl-chapter {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--wl-mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: clamp(0.6rem, 1.1vw, 0.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wl-accent);
  margin-bottom: 1.5em;
}
.wl-chapter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--wl-accent) 45%, transparent);
}

/* ---- the stacked headline, the one idiom every reference site shares ---- */
.wl-headline {
  font-family: var(--wl-display-font, inherit);
  font-size: clamp(1.9rem, 6.2vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.wl-headline em {
  font-style: normal;
  color: var(--wl-accent);
}

.wl-lede {
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
  color: color-mix(in srgb, var(--wl-fg) 86%, var(--wl-bg));
}

/* ---- spec grid: verified facts and mascot invariants -------------------- */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--wl-fg) 18%, transparent);
  border: var(--wl-rule);
  margin-top: 2.5em;
}
.wl-cell {
  background: var(--wl-surface, var(--wl-bg));
  padding: 1.35em 1.25em;
  transition: background 160ms ease, transform 160ms ease;
}
.wl-cell:hover {
  background: color-mix(in srgb, var(--wl-accent) 12%, var(--wl-surface, var(--wl-bg)));
  transform: translateY(-2px);
}
.wl-cell-index {
  display: block;
  font-family: var(--wl-mono-font, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--wl-accent);
  margin-bottom: 0.6em;
}
.wl-cell-text {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}

/* ---- marquee ----------------------------------------------------------- */
.wl-marquee {
  border-top: var(--wl-rule);
  border-bottom: var(--wl-rule);
  overflow: hidden;
  padding: 0.85em 0;
  background: color-mix(in srgb, var(--wl-accent) 10%, var(--wl-bg));
  /* The track is duplicated in JS, so -50% is exactly one full copy. */
  --wl-marquee-seconds: 26s;
}
.wl-marquee-track {
  display: inline-flex;
  gap: 2.5em;
  white-space: nowrap;
  will-change: transform;
  animation: wl-marquee var(--wl-marquee-seconds) linear infinite;
}
.wl-marquee-item {
  font-family: var(--wl-mono-font, ui-monospace, monospace);
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wl-marquee-item::after {
  content: "\25C6";
  margin-left: 2.5em;
  color: var(--wl-accent);
}
@keyframes wl-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- access: the links, as a real call to action ----------------------- */
.wl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 2em;
}
.wl-action {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--wl-accent);
  color: var(--wl-fg);
  text-decoration: none;
  font-family: var(--wl-mono-font, ui-monospace, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.wl-action:hover {
  background: var(--wl-accent);
  color: var(--wl-bg);
  transform: translateY(-2px);
}
.wl-action span { color: var(--wl-accent); transition: color 160ms ease; }
.wl-action:hover span { color: inherit; }

.wl-contract {
  margin-top: 2em;
  border: var(--wl-rule);
  padding: 1em 1.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em 1.25em;
}
.wl-contract code {
  font-family: var(--wl-mono-font, ui-monospace, monospace);
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  word-break: break-all;
  color: var(--wl-fg);
}
.wl-copy {
  border: 1px solid var(--wl-accent);
  background: none;
  color: var(--wl-accent);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.wl-copy:hover { background: var(--wl-accent); color: var(--wl-bg); }

/* ---- footer ------------------------------------------------------------ */
.wl-foot {
  border-top: var(--wl-rule);
  padding: 2.5em clamp(1.25rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 2em;
  align-items: baseline;
  font-family: var(--wl-mono-font, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wl-fg) 62%, var(--wl-bg));
}
.wl-foot strong { color: var(--wl-fg); }

/* ---- reveal on scroll -------------------------------------------------- */
/* The hidden state applies ONLY under [data-wl-reveal="on"], which the script sets
   after it has confirmed an observer exists. Without the script, without the
   observer, or if the observer never fires, the content is simply visible. */
[data-wl-reveal="on"] .wl-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms ease, transform 620ms ease;
}
[data-wl-reveal="on"] .wl-reveal.wl-in { opacity: 1; transform: none; }

/* Motion is decoration here; anyone who has asked for less gets the content
   standing still, fully visible, with no dependency on the observer firing. */
@media (prefers-reduced-motion: reduce) {
  .wl-marquee-track { animation: none; }
  .wl-reveal { opacity: 1; transform: none; transition: none; }
  .wl-cell:hover, .wl-action:hover { transform: none; }
}