/* ═══════════════════════════════════════════════════════════════════
   Terra Development — Luxe Bring-Up · Wave 2
   Loaded AFTER luxe-v1.css. Distinctive polish; CSS-first.
   Principle: if a JPM PB MD notices it AS an effect, it failed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Page ground — pulled deeper into cream ──────────────────── */
/* Greg 2026-05-16 v1: #F8F6F0 → #F4EFE3 (brand cream). Still too bright.
   Greg 2026-05-16 v2: +20% deeper → #EEE7D6. Too far.
   Greg 2026-05-16 v3: halfway pull-back → #F1EBDB. */
:root {
  --page-bg:      #F1EBDB;
  --page-bg-soft: #EBE4D0;
}
html, body { background: var(--page-bg); }

/* Topnav backdrop tint follows the new ground */
.topnav { background: rgba(241, 235, 219, 0.84); }
body.scrolled .topnav { background: rgba(241, 235, 219, 0.96); }

/* ── 1. Cross-document View Transitions (Chromium-only; rest hard-cut) */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anchored chrome — topnav + footer stay locked while body crossfades */
.topnav      { view-transition-name: td-topnav; }
.site-footer { view-transition-name: td-footer; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── 2. CSS-only scroll-progress hairline (under topnav) ─────────── */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 200;
  pointer-events: none;
}
@supports (animation-timeline: scroll(root)) {
  body::before {
    animation: td-scroll-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes td-scroll-progress {
    to { transform: scaleX(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}

/* ── 3. Hairline-draw on section reveal (the "wax seal" move) ───── */
/* Hero rule draws L-to-R as hero enters viewport */
.hero-rule {
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  .hero-rule {
    animation: td-rule-draw 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

/* Each section-mast gets a short gold hairline above it */
.section-mast {
  position: relative;
  padding-top: 28px;
}
.section-mast::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  .section-mast::before {
    animation: td-rule-draw 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}
@keyframes td-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rule,
  .section-mast::before {
    transform: scaleX(1);
    animation: none;
  }
}

/* ── 4. Warm-tinted paper grain (3.5%, multiply blend) ───────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── 5. Metric-overridden Georgia fallback (scaffolding) ─────────── */
/* Inactive until Source Serif 4 is self-hosted in Wave 2.1.
   When we add /fonts/source-serif-4-*.woff2 + @font-face for SS4
   with font-display: optional, this fallback paints first at SS4's
   exact metrics — zero CLS on the eventual font swap. */
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 101.2%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ── 6. Below-fold render skipping ──────────────────────────────── */
/* Cuts render/layout work on long pages. Hero + topnav + sticky-nav
   stay full-render. */
.section,
.section-band,
.posture,
.about-teaser,
.engage-cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}