/* ──────────────────────────────────────────────────────────
   VIDEO BACKGROUND — fixed, full-viewport, behind everything
   Integrates a soft cinematic video into the entire site
   without ever obscuring the content.

   ── 4 iterations, each compounding on the last ──

   01 · BASE LAYER
        – Video pinned `position: fixed` so it stays in view as
          the user scrolls the entire site, not just the hero.
        – `z-index: -1` puts it behind every section.
        – Cream wash overlay (also fixed) guarantees baseline
          legibility everywhere; nothing on the page disappears.

   02 · PALETTE HARMONY
        – Color-graded filter (saturate/sepia/brightness/hue) ties
          the footage to the site's warm-sage / cream / terra
          palette so it stops feeling like a stock clip pasted
          behind the design.
        – Two-tone gradient overlay (cream → warm-mist) replaces
          the flat wash so the page surface still has tonal life.
        – Section surfaces (cards, form, footer) get a translucent
          cream fill + subtle backdrop-blur so the video peeks
          *around* content instead of fighting through it.

   03 · DEPTH & ATMOSPHERE
        – Vignette on the video itself feathers it into the page.
        – Section-aware opacity: video is most visible in the hero,
          progressively veiled by the content beneath.
        – Hero is the only spot where the video is allowed to
          breathe — every other section sits on a cream "card"
          surface so reading flow is unbroken.
        – Slow Ken-Burns scale gives the video life without
          becoming distracting motion.
        – Grain overlay (matches site .grain) bonds the footage
          to the rest of the page texturally.

   04 · POLISH & RESPONSIVENESS
        – Scroll-linked dimming: as you move past the hero the
          video gently darkens / desaturates so subsequent
          sections feel grounded.
        – Breathing brightness pulse synced to the site heartbeat.
        – Mobile: lower-cost rendering (no Ken-Burns, simpler
          filter) so battery isn't drained.
        – `prefers-reduced-motion`: still frame, no animation.
        – Replaces the static photographic hero backdrop — that
          element is hidden so it never competes with the video.
   ────────────────────────────────────────────────────────── */


/* ── 01 · base layer ─────────────────────────────────────── */
.bg-video {
  position: fixed;
  inset: 0;
  inline-size: 100vw;
  block-size: 100vh;
  block-size: 100dvh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  /* 02 · palette grading */
  filter:
    saturate(0.55)
    contrast(0.92)
    brightness(1.04)
    sepia(0.28)
    hue-rotate(-6deg)
    blur(0.4px);
  /* 03 · slow Ken-Burns life */
  animation: bgVideoDrift 48s ease-in-out infinite alternate,
             bgVideoBreathe 5.4s ease-in-out 1s infinite;
  will-change: transform, filter;
  transform-origin: 50% 50%;
}

@keyframes bgVideoDrift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.12) translate3d(-12px, -8px, 0); }
  100% { transform: scale(1.08) translate3d(10px, 6px, 0); }
}
@keyframes bgVideoBreathe {
  0%, 100% { filter:
      saturate(0.55) contrast(0.92) brightness(1.04)
      sepia(0.28) hue-rotate(-6deg) blur(0.4px); }
  50%      { filter:
      saturate(0.62) contrast(0.94) brightness(1.08)
      sepia(0.30) hue-rotate(-6deg) blur(0.4px); }
}

/* 02 · two-tone wash + 03 · vignette, fixed so it tracks the
   video across the whole page */
.bg-video-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* readability scrim — top & bottom feathered */
    linear-gradient(180deg,
      rgba(250, 245, 238, 0.55) 0%,
      rgba(250, 245, 238, 0.30) 18%,
      rgba(250, 245, 238, 0.18) 38%,
      rgba(246, 239, 227, 0.30) 62%,
      rgba(240, 233, 221, 0.55) 100%),
    /* corner vignette */
    radial-gradient(ellipse 110% 90% at 50% 50%,
      rgba(61, 58, 46, 0) 55%,
      rgba(61, 58, 46, 0.10) 82%,
      rgba(61, 58, 46, 0.22) 100%);
}

/* 03 · grain unity (matches site .grain SVG noise) */
.bg-video-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* 04 · the site root needs a transparent body and html so the
   fixed video is actually visible behind sections */
html, body { background: transparent !important; }
/* fallback color in case the video is still loading */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--c-cream);
}


/* ── 02 + 03 · let the hero be the "open window" to the video ── */
.hero { background: transparent !important; }
/* hide the static photographic hero backdrop — video replaces it */
.hero__belly-bg { display: none !important; }
/* the hero blobs were positioned over the photo — fade them
   so they don't fight the video */
.hero__blob { opacity: 0.55 !important; }
.hero__moon { opacity: 0.85; }


/* ── 02 + 03 · content sections sit on cream surfaces so the
   video is mostly seen at the edges, not behind body copy ─── */

/* sections that are content-heavy: cream-tinted "paper" with a
   soft backdrop blur so the video atmosphere shows through
   subtly without making text un-readable */
.trust,
.why,
.journey,
.voices,
.about,
.faq {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(250, 245, 238, 0.94) 0%,
      rgba(246, 239, 227, 0.92) 50%,
      rgba(250, 245, 238, 0.94) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

/* soft transition edges between hero (video-open) and the first
   content section so the cream surface doesn't slam in */
.trust {
  background:
    linear-gradient(180deg,
      rgba(250, 245, 238, 0.35) 0%,
      rgba(250, 245, 238, 0.85) 60%,
      rgba(250, 245, 238, 0.95) 100%) !important;
}

/* the contact section already has a dark background — leave it,
   but make sure it sits above the video */
.contact {
  position: relative;
  z-index: 1;
}
.footer {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(42, 40, 32, 0.96),
      rgba(42, 40, 32, 1)) !important;
}


/* ── 04 · scroll-linked dimming ───────────────────────────────
   As the user scrolls past the hero, the body adds the class
   `scrolled` (see script in index.html). The video softly
   recedes so the page never has to fight it. */
body.scrolled .bg-video {
  filter:
    saturate(0.38)
    contrast(0.88)
    brightness(0.94)
    sepia(0.32)
    hue-rotate(-8deg)
    blur(1.2px);
  animation-play-state: paused, paused;
}
body.scrolled .bg-video-overlay {
  background:
    linear-gradient(180deg,
      rgba(250, 245, 238, 0.78) 0%,
      rgba(250, 245, 238, 0.62) 30%,
      rgba(246, 239, 227, 0.58) 70%,
      rgba(240, 233, 221, 0.75) 100%),
    radial-gradient(ellipse 110% 90% at 50% 50%,
      rgba(61, 58, 46, 0) 55%,
      rgba(61, 58, 46, 0.12) 82%,
      rgba(61, 58, 46, 0.26) 100%);
  transition: background 0.6s ease;
}
.bg-video { transition: filter 0.8s ease; }


/* ── 04 · staged entrance ─────────────────────────────────── */
.bg-video {
  opacity: 0;
  animation:
    bgVideoIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards,
    bgVideoDrift 48s ease-in-out 1.6s infinite alternate,
    bgVideoBreathe 5.4s ease-in-out 1.6s infinite;
}
@keyframes bgVideoIn {
  from { opacity: 0; transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1.06); }
}


/* ── 04 · responsive recalibration ────────────────────────── */
@media (max-width: 900px) {
  .bg-video {
    /* simpler filter on mobile — saves battery */
    filter:
      saturate(0.55)
      brightness(1.04)
      sepia(0.26)
      blur(0.3px);
    animation:
      bgVideoIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  }
  .bg-video-overlay {
    background:
      linear-gradient(180deg,
        rgba(250, 245, 238, 0.68) 0%,
        rgba(250, 245, 238, 0.50) 30%,
        rgba(246, 239, 227, 0.55) 70%,
        rgba(240, 233, 221, 0.75) 100%);
  }
}
@media (max-width: 600px) {
  .bg-video-grain { opacity: 0.14; }
}


/* ── 04 · reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-video {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1.04);
  }
}