/* sections.css. Owner: package P5 (sections). The process, the price band,
   the tools and the final call to action. Ideas #2, #9, #10, #11, #15. */

/* ── process ────────────────────────────────────────────────────────────── */

.steps {
  list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0;
  border-top: 2px solid var(--ink);
}
.step {
  position: relative; /* gives #9's ::after rule its box. No layout effect. */
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 112px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 2px solid var(--ink);
}
.step-num {
  font-weight: 800; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 0.9;
  letter-spacing: -0.04em; color: var(--red);
}
.step-text h3 { margin-bottom: 10px; }
.step-text p { max-width: 58ch; }

.after {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--ink); color: var(--ground);
  padding: clamp(28px, 4vw, 48px);
  border-left: 8px solid var(--red);
}
.after h3 { margin-bottom: 12px; }
.after p { max-width: var(--measure); color: rgba(243, 242, 242, 0.86); }

/* ── tools ──────────────────────────────────────────────────────────────── */

/* Five cards laid 3 + 2, so there is no dead cell showing bare red. */
.tools {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid; gap: 2px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--red);
  border: 2px solid var(--red);
}
.tool { background: var(--ink); padding: clamp(22px, 2.6vw, 32px); grid-column: span 2; }
.tool:nth-child(4), .tool:nth-child(5) { grid-column: span 3; }
@media (max-width: 900px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool, .tool:nth-child(4) { grid-column: span 1; }
  .tool:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .tools { grid-template-columns: 1fr; }
  .tool, .tool:nth-child(4), .tool:nth-child(5) { grid-column: span 1; }
}
.tool h3 { color: var(--red-300); margin-bottom: 10px; }
.tool p { color: rgba(243, 242, 242, 0.86); font-size: 1rem; }

/* ── price ──────────────────────────────────────────────────────────────── */

.price-h {
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  line-height: 0.95;
  max-width: 14ch;
}

/* ── final ──────────────────────────────────────────────────────────────── */

.final h2 { max-width: 18ch; }

/* ── #2 headlines rise into place ──────────────────────────────────────────
   The hero h1 (#hero-h, package P3's markup) animates unconditionally on load,
   gated only on data-motion and its own rise-done, so it needs no scroll
   trigger. Every other section h2 (this package's own, and every other
   package's, reached by selector only per BUILD-PLAN.md P5) is offset before
   it is revealed, then rises the same way. The final band's h2 is excluded
   here (:not inside .curtain) because #15 below gives it its own trigger. */

@keyframes rise-in {
  from { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
  to   { transform: translateY(0);    clip-path: inset(0 0 0 0); }
}
:root[data-motion="full"] #hero-h:not(.rise-done) {
  animation: rise-in 650ms cubic-bezier(.2, .7, .2, 1) 80ms both;
}
:root[data-motion="full"][data-rise] .band h2:not(.label):not(.is-in) {
  transform: translateY(100%); clip-path: inset(0 0 100% 0);
}
:root[data-motion="full"][data-rise] .band h2:not(.label).is-in:not(.rise-done) {
  animation: rise-in 800ms cubic-bezier(.2, .7, .2, 1) both;
}

/* ── #9 rules draw themselves ────────────────────────────────────────────── */

:root[data-motion="full"][data-draw] .label { position: relative; border-bottom-color: transparent; }
:root[data-motion="full"][data-draw] .label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1) 150ms;
}
:root[data-motion="full"][data-draw] .band-ink .label::after { background: var(--red-300); }
:root[data-motion="full"][data-draw] .band-red .label::after { background: var(--white); }
:root[data-motion="full"][data-draw] .label.is-in::after { transform: scaleX(1); }

:root[data-motion="full"][data-draw] .steps { position: relative; border-top-color: transparent; }
:root[data-motion="full"][data-draw] .steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}
:root[data-motion="full"][data-draw] .steps.is-in::before { transform: scaleX(1); }
:root[data-motion="full"][data-draw] .step { border-bottom-color: transparent; }
:root[data-motion="full"][data-draw] .step::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}
:root[data-motion="full"][data-draw] .step.is-in::after { transform: scaleX(1); }

:root[data-motion="full"][data-draw] .tools {
  border-color: transparent;
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 0 / 0% 100%;
  background-origin: border-box;
  transition: background-size 1100ms cubic-bezier(.2, .7, .2, 1);
}
:root[data-motion="full"][data-draw] .tools.is-in { background-size: 100% 100%; }

/* ── #10 process steps stack ─────────────────────────────────────────────── */

:root[data-motion="full"][data-stack] .step {
  position: sticky; top: calc(var(--bar-h) + 16px);
  background: var(--ground);
}
:root[data-motion="full"][data-stack] .step.step-over { box-shadow: 0 -2px 0 var(--ink); }

/* ── #11 rolling digits on the price ─────────────────────────────────────── */

.roll { white-space: nowrap; }
.roll-s { display: none; }
:root[data-motion="full"][data-roll] .roll-d { display: inline-block; position: relative; vertical-align: top; height: 0.95em; height: 1lh; overflow: hidden; }
:root[data-motion="full"][data-roll] .roll-z { visibility: hidden; }
:root[data-motion="full"][data-roll] .roll-s { display: block; position: absolute; left: 0; top: 0; width: 100%; transform: translateY(0); }
:root[data-motion="full"][data-roll] .roll-s > span { display: block; height: 0.95em; height: 1lh; }
:root[data-motion="full"][data-roll] .is-in .roll-s {
  transform: translateY(calc((10 + var(--d)) * -5%));
  transition: transform 1100ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--k) * 90ms);
}

/* ── #15 the closing band revealed like a curtain ────────────────────────── */
/* While the curtain is on, the closing band, the marquee and the footer are
   pinned to the bottom of the screen behind main, from the first scroll, and
   main covers them until it scrolls away. So main must be opaque. It was not
   until 2026-09-26: anything in it that paints no background of its own let
   the pinned curtain through (home's statement line, the sides of a 1200px
   band), and Conner saw the footer between the home hero and the About
   teaser on a screen tall enough for the curtain. main takes body's own
   colour, so a page looks exactly as it does with the curtain off. */

:root[data-curtain="on"] main { position: relative; z-index: 1; background-color: inherit; }
:root[data-curtain="on"] .curtain { position: sticky; bottom: 0; z-index: 0; }