/* site.css — Hytek Water Conditioning. split-hero (brief §5). Tokens only
   (spec §3); escape hatches are the house breakpoints and `@allow-literal:
   reason`. Breakpoints (brief §5.3): 48em, 64em. NO AXIS DECLARATION HERE —
   three static Fraunces instances, one token each (brief §2, v4).
   Longer records: README.md §Stylesheet notes. */

/* --- Layout primitives --- */

.container {
  width: 100%;
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* design-rules §7.1: --section-gap is the ONLY inter-section spacing value. */
.section {
  padding-block: var(--section-gap);
}

.measure {
  max-width: var(--layout-measure);
}

section[id] {
  scroll-margin-block-start: calc(var(--layout-header-height) + var(--border-hairline));
}

/* --- Header. 56px, --color-bg, 1px ink rule (N6), sticky. Wordmark is
   typographic, never a logo. Anchors ≥48rem; tel: always. --- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-ink);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--layout-header-height);
}

/* Wordmark: the shared TEXT instance at 600 (brief §2.1, §2.7) — one wordmark
   against seventeen h3 settings, so a shared cut takes the majority's. */
.site-header__brand {
  font-family: var(--font-display-text);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  display: none;
}

.site-nav__link,
.site-nav__tel {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-nav__tel {
  border-bottom: var(--border-thick) var(--border-style) var(--color-accent);
}

.site-nav__tel,
.btn__tel {
  white-space: nowrap;   /* a number that breaks mid-string is undiallable */
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__tel:hover,
.site-nav__tel:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

@media (min-width: 48em) {
  .site-nav__item {
    display: block;
  }
}

/* --- Type roles: one shipped instance per role (brief §2.1), each registered
   at the weight it carries. base.css sets --font-display on h1-h4; h2 and
   h3 re-point on order. --- */

/* Display instance: opsz 144 / 800 / SOFT 40 / WONK 1. */
h1 {
  font-size: var(--text-hero);
}

/* Mid instance: opsz 72 / 800 / SOFT 40 / WONK 1. */
h2 {
  font-family: var(--font-display-mid);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
}

/* Text instance: opsz 24 / 600 / SOFT 60 / WONK 0. */
h3,
.index__name,
.places__row,
.faq__text,
.review__opening {
  font-family: var(--font-display-text);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* The eyebrow role. Labels authored in natural case, uppercased here (§8). */
.hero__eyebrow,
.thanks__eyebrow,
.band-head__num,
.band-head__label,
.review__meta,
.review-card__kicker {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Both accent words: ROMAN RUST, one costume, colour only (brief §2.1, §2.7,
   §6.12). Both <span>s, not <em>s — README §Stylesheet notes says why. */
.accent-word,
.accent-em {
  color: var(--color-rust);
}

/* Rust measures 2.09:1 on the timber band and never appears there (F13). */
.accent-em--on-band {
  color: var(--color-accent-soft);
}

/* --- Band head (brief §5.1 rule 1, ref-008): numeral left, label right, on
   a 2px --color-ink rule. The h2 sits BENEATH it. --- */

.band-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-lg);
}

.band-head::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--border-thick);
  background-color: var(--color-ink);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.band-head--on-band::after {
  background-color: var(--color-band-ink);
}

.band-head__num,
.band-head__label {
  color: var(--color-ink-muted);
}

.band-head--on-band .band-head__num,
.band-head--on-band .band-head__label {
  color: var(--color-band-ink-muted);
}

.section__lead {
  max-width: var(--layout-measure);
  margin-block-start: var(--space-md);
  color: var(--color-ink-muted);
  font-size: var(--text-lead);
}

/* --- Buttons. NO PILL EXISTS. Primary = letterpress element 1; its coral
   fill is OPAQUE always, so the label keeps F7's flat 5.50:1 (§4.3 G7). --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-tap-min);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-thick) var(--border-style) var(--color-ink);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-letterpress);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active {
  transform: translate(var(--press-shift), var(--press-shift));
  box-shadow: var(--shadow-letterpress-pressed);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-surface);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

/* --- §I hero, the one moment (design-rules §0; brief §5.4, §4.3).
   Two standing rules: README §Stylesheet notes. --- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block-start: var(--space-lg);
  padding-block-end: var(--section-gap);
  background:
    radial-gradient(120% 90% at 76% 32%, var(--color-halo-coral) 0%, transparent 58%),
    radial-gradient( 90% 70% at 22%  8%, var(--color-halo-warm)  0%, transparent 62%),
    radial-gradient(140% 120% at 50% 120%, var(--color-halo-amber) 0%, transparent 70%),
    var(--color-bg);
}

.hero-caustic {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  opacity: 0.5;
  pointer-events: none;
  animation: caustic-drift var(--loop-caustic) var(--ease-out) infinite;
}

.hero-caustic svg {
  width: 100%;
  height: 100%;
}

.hero__inner {
  position: relative;
}

/* .thanks__eyebrow is the same role on thanks.html (brief v4 §5.5, §6), on
   flat --color-bg — F3 5.72:1, no atmosphere layer. First child of its
   column, so no top margin. */
.hero__eyebrow,
.thanks__eyebrow {
  color: var(--color-rust);
}

.thanks__eyebrow {
  margin-block-start: 0;
}

/* thanks.html's h1 takes the same step below its eyebrow (brief §5.5, whose
   thanks.html stack carries --space-sm as a term). */
.hero h1,
.thanks h1 {
  margin-block-start: var(--space-sm);
}

.hero__lead {
  margin-block-start: var(--space-lg);
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.stars {
  display: inline-flex;
  /* @allow-literal: sized from its own line */
  width: 5em;
  color: var(--color-rust);
}

.stars svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

.sprite {
  position: absolute;
  /* @allow-literal: standard clip box */
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* aspect-ratio 4/3 at EVERY width: one 4:3 source, uncropped in both
   layouts (brief §5.4). */

.field {
  margin-block-start: var(--space-md);
}

.field__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: clip;
}

.field__frame picture,
.field__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bob {
  animation: subject-bob var(--loop-bob) ease-in-out infinite;
}

@media (max-width: 47.999em) {
  .field {
    margin-inline: calc(var(--layout-gutter) * -1);
  }
}

/* Five satellites on independent loops (ref-001, brief §8). Positions are
   percentages of the field. */

.sat {
  position: absolute;
  display: block;
  /* @allow-literal: a fraction of the field */
  width: 9%;
  pointer-events: none;
}

.sat svg {
  width: 100%;
  height: auto;
}

.sat__ring {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: var(--border-thick);
}

.sat__rule {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: var(--border-hairline);
}

.sat__spark {
  fill: var(--color-caustic-a);
}

.sat__fill {
  fill: var(--color-accent);
  stroke: var(--color-ink);
  stroke-width: var(--border-thick);
}

.sat-b1 { inset-block-start: 14%; inset-inline-start: 11%; animation: sat-float-b1 var(--loop-bubble-1) ease-in-out infinite; }
.sat-b2 { inset-block-start: 62%; inset-inline-start: 18%; animation: sat-float-b2 var(--loop-bubble-2) ease-in-out infinite; }
.sat-b3 { inset-block-start: 34%; inset-inline-end:  13%; animation: sat-float-b3 var(--loop-bubble-3) ease-in-out infinite; }
.sat-x  { inset-block-start:  9%; inset-inline-end:  22%; animation: sat-turn    var(--loop-crystal)  linear      infinite; }
.sat-d  { inset-block-start: 71%; inset-inline-end:  20%; animation: sat-drop    var(--loop-drop)     ease-in-out infinite; }

/* Each loop oscillates ABOUT its rest frame, so a stopped loop leaves brief
   §8's composed arrangement. */
@keyframes caustic-drift { from, to { transform: none; } 50% { transform: var(--rest-caustic); } }
@keyframes subject-bob   { from, to { transform: none; } 50% { transform: var(--rest-bob); } }
@keyframes sat-float-b1  { from, to { transform: none; } 50% { transform: var(--rest-sat-b1); } }
@keyframes sat-float-b2  { from, to { transform: none; } 50% { transform: var(--rest-sat-b2); } }
@keyframes sat-float-b3  { from, to { transform: none; } 50% { transform: var(--rest-sat-b3); } }
@keyframes sat-turn      { from, to { transform: none; } 50% { transform: var(--rest-sat-x); } }
@keyframes sat-drop      { from, to { transform: none; } 50% { transform: var(--rest-sat-d); } }

@media (min-width: 48em) {
  .hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    /* Five explicit rows so the field's `grid-row: 1 / -1` resolves. */
    grid-template-rows: repeat(5, auto);
    /* COLUMN gap only: the five left slots carry the brief's own
       margin-block-start values; a row gap pushes the control below the fold
       at 768 and 1024. */
    column-gap: var(--space-xl);
    row-gap: 0;
    align-items: center;
  }

  .hero__eyebrow,
  .hero h1,
  .hero__cta,
  .hero__lead,
  .hero__facts {
    grid-column: 1;
  }

  /* Fourth in DOM, second in the grid: the ask stays ahead of the picture
     (design-rules §7.2 rule 1). */
  .field {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin-block-start: 0;
  }

  /* Letterpress element 2 — at ≥48rem only. */
  .field__frame {
    border: var(--border-thick) var(--border-style) var(--color-ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-letterpress);
  }
}

@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- §II index. Rules not boxes. Row 01 is marked TWICE — coral rule AND
   --text-service — so emphasis never rests on colour alone (N9). --- */

.index {
  margin-block-start: var(--space-lg);
  padding: 0;
  list-style: none;
}

.index__row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.index__row--marked {
  border-top: var(--border-thick) var(--border-style) var(--color-accent);
}

.index__num,
.index__body,
.index__name {
  display: block;
}

/* The one surviving nested counter, in its own costume (brief §6.12): two
   permitted axes differ from the section counter — face and colour role.
   Size is identical on purpose. */
.index__num {
  font-family: var(--font-display-text);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-normal);
  color: var(--color-ink);
}

.index__row--marked .index__name {
  font-size: var(--text-service);
}

.index__desc {
  display: block;
  margin-block-start: var(--space-3xs);
  max-width: var(--layout-measure);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

@media (min-width: 48em) {
  .index__row {
    grid-template-columns: var(--layout-numeral-col) 1fr;
    gap: var(--space-sm);
    align-items: baseline;
  }
}

/* --- Full-bleed strips (§II close, §VI banner). No text over them. --- */

.strip {
  margin-block-start: var(--space-2xl);
  overflow: clip;
}

.strip--3x1 {
  margin-block: var(--space-lg);
}

.strip img {
  width: 100%;
  height: auto;
}

/* --- §III timber band, the ONE dark zone. Flat fill, nothing moves (brief
   §III). Focus re-points at --color-focus-on-band: rust is 2.09:1 here
   (N3 -> N4). Geometry stays base.css's. --- */

.band {
  background-color: var(--color-band);
  color: var(--color-band-ink);
}

.band :focus-visible {
  outline-color: var(--color-focus-on-band);
}

.band__line {
  max-width: var(--layout-measure);
}

.band__offer {
  margin-block-start: var(--space-lg);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-body-strong);
}

.band__region {
  margin-block-start: var(--space-2xs);
  color: var(--color-band-ink-muted);
}

/* --- §IV reviews. Lead card + ruled stack (brief §IV rules 3–6).
   What that forbids: README §Stylesheet notes. --- */

.aggregate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.stars--aggregate {
  /* @allow-literal: sized from its own line */
  width: 7em;
  align-self: center;
}

.aggregate__value {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-rust);
}

.aggregate__meta {
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
}

/* Letterpress element 3. Capacity: four paragraphs, no change of shape. */
.review-card {
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-thick) var(--border-style) var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-letterpress);
}

.review-card__kicker {
  color: var(--color-rust);
}

.review-card__quote {
  margin-block-start: var(--space-md);
  max-width: var(--layout-measure);
}

.review-card__quote p + p {
  margin-block-start: var(--space-sm);
}

.review-card__attrib {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin-block-start: var(--space-md);
}

.review__name {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.review__meta {
  display: block;
  color: var(--color-ink-muted);
}

.review-stack {
  margin-block-start: var(--space-2xl);
  padding: 0;
  list-style: none;
}

.review-row {
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.review-row:first-child {
  border-top: var(--border-thick) var(--border-style) var(--color-ink);
}

.review-row__rail {
  margin-block-end: var(--space-2xs);
}

.review-row__quote {
  max-width: var(--layout-measure);
}

.review-row__quote p + p {
  margin-block-start: var(--space-sm);
}

.review-note {
  margin-block-start: var(--space-lg);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

@media (min-width: 48em) {
  .review-row {
    display: grid;
    grid-template-columns: var(--layout-rail) 1fr;
    gap: var(--space-lg);
    align-items: start;
  }

  .review-row__rail {
    margin-block-end: 0;
  }
}

/* --- §V process, bounded to ONE step --- */

.process {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.process__media img {
  width: 100%;
  height: auto;
}

/* Letterpress element 4. */
.process__step {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-thick) var(--border-style) var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-letterpress);
  align-self: center;
}

/* No process numeral: a counter counting to one asserts a step 02 that
   dossier §4.7 forbids (brief §V). */
.process__name {
  margin-block-start: 0;
}

.process__line {
  margin-block-start: var(--space-2xs);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

@media (min-width: 48em) {
  .process {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
  }

  /* Image 4 sits BESIDE the block at ≥48rem and above it below that. */
  .process__media {
    order: -1;
  }
}

/* --- §VI service area --- */

.places {
  margin-block-start: var(--space-lg);
  padding: 0;
  list-style: none;
}

.places__row {
  padding-block: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.places__base {
  margin-block-start: var(--space-md);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

.places__ogden {
  margin-block-start: var(--space-2xs);
  font-weight: var(--font-weight-body-strong);
}

/* Both ref-010 spot marks: hero field foot, then §VI foot. */
.spot {
  display: block;
  /* @allow-literal: a fraction of the measure */
  width: 12ch;
  margin-block-start: var(--space-lg);
  color: var(--color-ink-muted);
}

.spot svg {
  width: 100%;
  height: auto;
}

.spot__rule {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-thick);
  stroke-linecap: round;
}

.spot__dot {
  fill: var(--color-accent);
}

/* --- §VII faq — native <details>, works with JS off; the marker is a 1px
   ink tick rotating over --duration-base --- */

.faq {
  margin-block-start: var(--space-lg);
}

.faq__row {
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* No FAQ numerals: each row already carries the disclosure tick, and
   design-rules §5 limit 2 bars a second ornament. */
.faq__text {
  flex: 1 1 auto;
}

.faq__q::after {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  /* @allow-literal: a square from two borders */
  width: 0.55em;
  /* @allow-literal: a square from two borders */
  height: 0.55em;
  border-right: var(--border-hairline) var(--border-style) var(--color-ink);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-ink);
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq__row[open] .faq__q::after {
  transform: rotate(-135deg);
}

.faq__a {
  max-width: var(--layout-measure);
  padding-block-end: var(--space-md);
  color: var(--color-ink-muted);
}

@media (min-width: 48em) {
  .faq__q {
    gap: var(--space-lg);
  }

  /* Numerals gone: the summary text is the row's first item, so the answer
     aligns to it. */
  .faq__a {
    margin-inline-start: 0;
  }
}

/* --- §VIII form. Fields on --color-surface, 1px --color-ink-muted border
   (N7, never --color-border 1.29:1). Letterpress element 5: border, no
   offset. No date/time field. --- */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-lg);
}

.field-group {
  display: grid;
  gap: var(--space-md);
}

.field-row {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-ink-muted);
  border-radius: var(--radius-sm);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

.contact__tel {
  margin-block-start: var(--space-md);
  font-weight: var(--font-weight-body-strong);
}

@media (min-width: 48em) {
  .field-group {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.thanks__body {
  margin-block-start: var(--space-md);
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
}

.thanks__back {
  margin-block-start: var(--space-lg);
}

/* --- Footer: --color-bg, 2px ink top rule, so the page never reads as two
   dark zones. No hours, tenure, badges or icon row. --- */

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-thick) var(--border-style) var(--color-ink);
  font-size: var(--text-small);
}

.site-footer a {
  text-underline-offset: var(--space-3xs);
  white-space: nowrap;
}

.site-footer__nap {
  font-style: normal;
  line-height: var(--leading-body);
}

.site-footer__services {
  margin-block-start: var(--space-md);
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

.site-footer p + p {
  margin-block-start: var(--space-md);
}

/* --- Reveals, rule-first (brief §8), gated on [data-reveal-ready].
   The three-step sequence: README §Stylesheet notes. --- */

[data-reveal-ready] .band-head[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

[data-reveal-ready] .band-head[data-reveal]::after {
  transform: scaleX(0);
}

[data-reveal-ready] .band-head[data-reveal][data-revealed]::after {
  transform: none;
}

[data-reveal-ready] .band-head[data-reveal] > * {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out) var(--duration-base);
}

[data-reveal-ready] .band-head[data-reveal][data-revealed] > * {
  opacity: 1;
}

[data-reveal-ready] .letterpress[data-reveal] {
  opacity: 1;
  transform: translate(var(--press-shift), var(--press-shift));
  box-shadow: 0 0 0 var(--color-accent);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

[data-reveal-ready] .letterpress[data-reveal][data-revealed] {
  transform: none;
  box-shadow: var(--shadow-letterpress);
}

/* --- Reduced motion. Spec §8, no exceptions: the loops stop here and each
   element holds brief §8's RESTING frame. No `!important` (§12). --- */

@media (prefers-reduced-motion: reduce) {
  .hero-caustic,
  .bob,
  .sat-b1, .sat-b2, .sat-b3, .sat-x, .sat-d {
    animation: none;
  }

  .hero-caustic { transform: var(--rest-caustic); opacity: 0.5; }
  .bob          { transform: var(--rest-bob); }
  .sat-b1       { transform: var(--rest-sat-b1); }
  .sat-b2       { transform: var(--rest-sat-b2); }
  .sat-b3       { transform: var(--rest-sat-b3); }
  .sat-x        { transform: var(--rest-sat-x); }
  .sat-d        { transform: var(--rest-sat-d); }

  .band-head::after,
  .btn,
  .faq__q::after {
    transition: none;
  }
}