/* fracture.css — THE CRYSTALLISATION (dark → cream).
 *
 * The cooling that began at the hero completes here: the dark computational plane fractures into a
 * low-poly, crystalline facet field and resolves into Atheric's cream — the brand's paper home (v1
 * editorial). One scroll signal, --fracture (0→1, body.js), drives everything. It stays 0 across
 * the dark sections and 1 across the cream close; it only ramps across a TEXT-FREE band, so the
 * busy mixed-facet zone never fights type. This is the readability strategy, made structural.
 *
 * Layers (both fixed, z-index 0 — in front of the dark backdrop stack at negative z-index, behind
 * all content at z-index ≥ 1):
 *   #cream-layer    solid --paper, floods in during the latter transition → guarantees the cream
 *                   close (robust even if color-mix is unsupported) and backs the facets so the
 *                   facet shimmer is invisible once resolved.
 *   #fracture-layer the SVG facet field, on top of the cream layer; each facet resolves its own
 *                   near-black tone → cream as --fracture passes the facet's --t.
 */

/* ── The cream ground ─────────────────────────────────────────────────────────────────────── */
#cream-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--paper);
  /* floods in during the second half of the transition, then holds for the cream close */
  opacity: clamp(0, calc((var(--fracture, 0) - 0.25) / 0.6), 1);
}

/* ── The facet field ──────────────────────────────────────────────────────────────────────────
   Rendered on a <canvas> by body.js, NOT per-facet CSS: driving 192 polygon fills off a root
   custom property forces a full style recalc every scroll frame (~33ms → 30fps). Canvas keeps the
   same crafted geometry (read from the hidden #fracture-geo <svg>, which stays as the slot-in
   source) but repaints in one cheap pass → 60fps. The facet dark→cream resolve, the tonal spread,
   and the in-place shimmer all live in body.js's draw. */
#fracture-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* fade the whole field in over the first sliver of the ramp, then hold — so the dark sections
     (where --fracture is 0) stay perfectly pristine. (One element's opacity: cheap.) */
  opacity: clamp(0, calc(var(--fracture, 0) / 0.06), 1);
}
#fracture-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── The transition band ──────────────────────────────────────────────────────────────────────
   A tall, text-free section between the cabinet and the cream close. It supplies the scroll
   distance for the ramp; being taller than the viewport guarantees the mixed-facet midpoint never
   shares the screen with type. Its only content is a faint mono label, shown early (dark facets,
   legible) and faded well before the busy middle. */
.fracture {
  position: relative;
  height: 138vh;
}
.fracture__note {
  position: sticky;
  top: 40vh;
  margin: 0 auto;
  width: max-content;
  max-width: 90vw;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-label);
  font-size: 0.69rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  /* visible while the facets are still dark, gone before they brighten */
  opacity: clamp(0, calc((0.32 - var(--fracture, 0)) / 0.16), 1);
}

/* ── The cream close (voice → begin → footer) ─────────────────────────────────────────────────
   Elegant flip: body.css reads semantic tokens everywhere, so redefining the ink/rule roles on
   .on-cream re-inks every heading, lede, list and hairline to near-black on cream automatically.
   The one hot orange accent (--accent) is untouched — it belongs on cream (v1). */
.on-cream {
  --ink: var(--ink-on-cream);
  --ink-dim: var(--ink-on-cream-dim);
  --ink-faint: rgba(10, 10, 10, 0.46);
  --rule: var(--rule-on-cream);
  --rule-strong: rgba(10, 10, 10, 0.22);
  position: relative;
  z-index: 1; /* above the fixed cream/fracture layers (also via .broadsheet, but be explicit) */
  color: var(--ink);
}
/* the hairline between do/do-not items is a hardcoded bone rgba in body.css — re-ink on cream */
.on-cream .dd li {
  border-top-color: rgba(10, 10, 10, 0.08);
}
/* the invitation CTA becomes v1's dark pill on cream (base is a bone pill for the dark plane) */
.on-cream .begin__cta {
  background: var(--ink-on-cream);
  color: var(--paper);
}
.on-cream .begin__cta-mark {
  background: var(--paper);
  color: var(--ink-on-cream);
}
/* the warm computational glow belongs to the dark plane, not the cream — the cream IS the resolve */
.on-cream .begin__glow {
  display: none;
}

/* Reduced motion: the facet shimmer is frozen in body.js (no rAF loop — the field is drawn once
   per scroll position, static); the black→cream resolve still tracks scroll, as the brief requires. */