/* ENVOY — backdrop.css
   the fixed fire plate behind the whole document

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* -------------------------------------------------------------- backdrop */

/* Fixed rather than scrolling with the page: the plate is a window the
   document moves past, not a texture glued to it.

   --bd is written by js/backdrop.js straight off the scroll position. It is
   only ever an opacity, so the fade is composited and never touches layout —
   which is what lets a full-screen video crossfade share a page with the 3D
   tour. Starting at 0 matters: the plate must not flash in before the script
   has had a chance to place it. */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--bd, 0);
  will-change: opacity;
}

/* --bz is written by js/backdrop.js and climbs the whole way through the
   passage, so the fire keeps opening out past the reader instead of swelling
   and settling back. It never goes below 1: object-fit covers the frame at 1,
   and anything under that would pull the plate's edges into view. */
#backdrop-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--bz, 1));
  transform-origin: 50% 45%;
  will-change: transform;
}

/* The dim that keeps white text readable over the brightest frames. It lives
   inside the fading wrapper on purpose, so it can never linger over a plate
   that has already gone — the two are one layer. */
#backdrop-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.66) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.48) 100%
  );
}

/* A section that wants the plate behind it: stop painting black, and sit above
   it so its own text is never dimmed. Transparency is not cosmetic here — the
   plate is fixed and behind everything, so a panel with its own black
   background would hide it outright and there would be nothing to fade. */
.field {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Reduced motion still gets the plate, just not the moving picture — the
   fade itself is scroll-locked, so it only ever moves as far as the reader
   scrolled it. js/backdrop.js leaves the video paused on its first frame. */