/* =========================================================
   Ambient background — a barely-there, scroll-scrubbed image
   sequence fixed behind the whole home page. Scoped to
   body.home-ambient so it only affects the home route.
   ========================================================= */

/* fixed full-viewport ambient layer, behind all content */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--paper);
}
.ambient-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* present but soft: lightly blurred + part-drained colour. Stronger than
     before so the props read as a living scene behind the page. */
  filter: blur(7px) saturate(0.52) brightness(1.05) contrast(0.93);
  /* scale gives headroom for the 5% parallax drift without revealing edges */
  transform: translateY(var(--amb-par, 0px)) scale(1.16);
  transform-origin: center;
  will-change: transform;
}
/* paper wash — lighter now, so the scene is clearly present (the hero and
   atmos-statement are the big card-less sections, so they showcase it most) */
.ambient-bg__wash {
  position: absolute; inset: 0;
  background: rgba(251, 248, 243, 0.55);
}
/* vignette — opened up so the centre of the viewport stays present */
.ambient-bg__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(122% 92% at 60% 45%,
      rgba(251, 248, 243, 0) 0%,
      rgba(251, 248, 243, 0.1) 58%,
      rgba(251, 248, 243, 0.6) 100%),
    linear-gradient(180deg,
      rgba(251, 248, 243, 0.4) 0%,
      rgba(251, 248, 243, 0) 20%,
      rgba(251, 248, 243, 0) 82%,
      var(--paper) 100%);
}

/* ---- page wiring: let the ambient sit behind glassy content ---- */
body.home-ambient { background: transparent; }
body.home-ambient main { position: relative; z-index: 1; }
.site-header { z-index: 50; }
body.home-ambient .site-footer { position: relative; z-index: 5; }

/* hero: the video now carries the floating-props motif, so retire the
   SVG scene + scroll cue and let the headline sit over the ambient */
body.home-ambient .home-hero__scene { display: none; }
body.home-ambient .home-hero__scroll { display: none; }
body.home-ambient .home-hero .mesh { opacity: 0.35; } /* keep a faint warm glow */

/* atmos-statement: showcase the video here too — retire its duplicate SVG
   props and soften its mesh so the ambient reads through clearly */
body.home-ambient .atmos-statement .atmos-objects { display: none; }
body.home-ambient .atmos-statement .mesh { opacity: 0.3; }

/* =========================================================
   Legibility scrims — the ambient runs almost fully clear here, so a soft
   frosted-blur sits behind the text. Anchored to the TEXT CONTAINER (so it
   tracks the copy at every breakpoint) and feathered on all four edges with
   two intersecting linear-gradient masks — a soft-edged rectangle that covers
   the full width of the text and fades to zero with no hard line.
   ========================================================= */
body.home-ambient .home-hero { position: relative; }
body.home-ambient .home-hero__content { position: relative; z-index: 2; }
body.home-ambient .home-hero__content::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -10% -8%;
  -webkit-backdrop-filter: blur(11px) saturate(1.04);
          backdrop-filter: blur(11px) saturate(1.04);
  background: rgba(251, 248, 243, 0.46);
  -webkit-mask:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

body.home-ambient .atmos-statement { position: relative; }
body.home-ambient .atmos-statement__copy { position: relative; z-index: 2; }
body.home-ambient .atmos-statement__copy::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -12% -9%;
  -webkit-backdrop-filter: blur(11px) saturate(1.04);
          backdrop-filter: blur(11px) saturate(1.04);
  background: rgba(251, 248, 243, 0.46);
  -webkit-mask:
    linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

/* more breathing room around the text in both showcase sections */
body.home-ambient .home-hero { min-height: calc(100vh - 70px); }
body.home-ambient .home-hero__content { padding-top: 48px; padding-bottom: 48px; }
body.home-ambient .home-hero__content .lead { margin-top: 34px; }
body.home-ambient .home-hero__content h1.home-hero__title { margin-bottom: 4px; }
body.home-ambient .atmos-statement { padding: 264px 0; }
body.home-ambient .atmos-statement__copy h2 { line-height: 1.12; }

/* the hero sits directly on the ambient (no card), so give the copy a
   whisper of paper lift behind it for crisp text — handled by the wash */
body.home-ambient .home-hero {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
}

/* The dark CTA band and dark footer sit at the foot of the page. Their
   transparent top margins (60px / 80px) would otherwise reveal the blurred
   fixed ambient canvas as a bright strip BETWEEN the two dark blocks — the
   "major blur gap". Collapse them in ambient mode so the dark sections meet
   flush, with the ambient sealed off behind them. */
body.home-ambient .cta-band { margin-top: 0; }
body.home-ambient .site-footer { margin-top: 0; }

/* reduce motion: hold a mid frame, no scrub jank */
@media (prefers-reduced-motion: reduce) {
  .ambient-bg canvas { filter: blur(9px) saturate(0.38) brightness(1.12) contrast(0.86); }
}