/* ============================================================
   environment.css — the room the film is shot in
   Never a flat colour: layered gradient light, a drifting
   particle canvas, floating glass panels and a graded vignette.
   ============================================================ */

#environment-layer { overflow: hidden; }

/* --- Base grade -------------------------------------------- */
.env-base {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(120% 90% at 50% 118%, #0A2A20 0%, transparent 62%),
    radial-gradient(90% 70% at 12% -12%, #08241B 0%, transparent 58%),
    linear-gradient(180deg, #030806 0%, #051009 46%, #030806 100%);
}

/* --- Moving light bodies -----------------------------------
   Three large, very soft light sources on slow independent
   orbits. They are what make the darkness feel like a lit room
   rather than a black rectangle.

   PERFORMANCE: these were `filter: blur(90-120px)` on 1000-1400px
   elements. Blur cost scales with area x radius, and with three of
   them animating every frame the compositor could not keep up —
   frame rate collapsed to ~3fps, which looks exactly like a frozen
   timeline. Soft radial gradients with a long falloff render the
   same picture for effectively no cost, so the blur is gone and
   the gradient stops do the work instead. ------------------- */
.env-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.5;
}
.env-orb--key {
  width: 1180px; height: 1180px;
  left: -240px; top: -320px;
  background: radial-gradient(circle at 46% 44%,
              rgba(28, 138, 99, 0.55) 0%,
              rgba(20, 104, 76, 0.36) 26%,
              rgba(11, 62, 39, 0.18) 50%,
              rgba(11, 62, 39, 0.05) 72%,
              transparent 88%);
}
.env-orb--rim {
  width: 900px; height: 900px;
  right: -220px; bottom: -280px;
  background: radial-gradient(circle at 50% 50%,
              rgba(205, 245, 70, 0.20) 0%,
              rgba(176, 214, 62, 0.12) 28%,
              rgba(143, 174, 60, 0.06) 52%,
              rgba(143, 174, 60, 0.02) 74%,
              transparent 90%);
}
.env-orb--fill {
  width: 1420px; height: 1000px;
  left: 34%; top: 24%;
  background: radial-gradient(ellipse at 50% 50%,
              rgba(18, 99, 74, 0.30) 0%,
              rgba(18, 99, 74, 0.17) 30%,
              rgba(18, 99, 74, 0.06) 58%,
              transparent 84%);
}

/* Gold key light — raised only during the financial chapters,
   driven by --gold-env on the layer. */
.env-orb--gold {
  width: 1000px; height: 1000px;
  right: 4%; top: 10%;
  background: radial-gradient(circle at 50% 50%,
              rgba(201, 162, 39, 0.26) 0%,
              rgba(201, 162, 39, 0.14) 30%,
              rgba(201, 162, 39, 0.05) 58%,
              transparent 84%);
  opacity: calc(0.85 * var(--gold-env, 0));
}

/* --- Particle field ---------------------------------------- */
#env-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

/* --- Floating glass panels ---------------------------------
   Empty, out-of-focus glass slabs at varying depths. They read
   as architecture and give the parallax something to bite on. */
.env-panel {
  position: absolute;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg,
              rgba(243, 233, 210, 0.055) 0%,
              rgba(243, 233, 210, 0.012) 46%,
              rgba(205, 245, 70, 0.035) 100%);
  border: 1px solid rgba(243, 233, 210, 0.07);
  box-shadow: inset 0 1px 0 rgba(243, 233, 210, 0.10);
  will-change: transform;
}
.env-panel--a { width: 520px; height: 700px; left: 4%;  top: 12%;  transform: rotate(-9deg); filter: blur(2.4px); opacity: 0.55; }
.env-panel--b { width: 400px; height: 540px; right: 7%; top: 20%;  transform: rotate(11deg); filter: blur(3.4px); opacity: 0.42; }
.env-panel--c { width: 660px; height: 380px; left: 26%; bottom: -8%; transform: rotate(-4deg); filter: blur(4.6px); opacity: 0.34; }

/* --- Horizon line ------------------------------------------
   A single hairline of lime light across the lower third. It is
   the film's through-line: it becomes the chart baseline, the
   ecosystem spine and the underline of the closing statement. */
.env-horizon {
  position: absolute;
  left: 0; right: 0;
  top: 68%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(205, 245, 70, 0.05) 14%,
    rgba(205, 245, 70, 0.34) 50%,
    rgba(205, 245, 70, 0.05) 86%,
    transparent 100%);
  opacity: var(--horizon, 0.55);
  will-change: opacity, transform;
}
.env-horizon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -60px; height: 120px;
  background: linear-gradient(180deg, transparent, rgba(205,245,70,0.05), transparent);
  filter: blur(20px);
}

/* --- Grain --------------------------------------------------
   Grain keeps large flat gradients from banding on projectors and
   adds film texture.

   PERFORMANCE: this was inset:-50% (a 3840x2160 element) with
   mix-blend-mode:overlay, and its transform was rewritten on every
   frame. That forced a full recomposite of a huge blended surface
   60 times a second. It is now frame-sized, uses normal blending,
   and is jittered at ~12fps instead of every frame — visually
   identical, a fraction of the cost. --------------------------- */
.env-grain {
  position: absolute;
  inset: -60px;
  opacity: 0.045;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 180px 180px;
  will-change: background-position;
}

.env-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%,
      transparent 42%,
      rgba(1, 5, 3, 0.42) 78%,
      rgba(1, 5, 3, 0.86) 100%);
}

/* Full-frame flash / dip-to-black used between acts. */
.env-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: var(--dip, 0);
  z-index: 9;
}

/* ------------------------------------------------------------
   REDUCED-EFFECT MODE
   Applied automatically by the performance guard in js/app.js when
   the browser cannot hold frame rate. The film keeps playing and
   keeps its composition; only the most expensive decoration goes.
   A film that plays at 60fps with less atmosphere beats a beautiful
   one that appears frozen.
   ------------------------------------------------------------ */
.is-lowfx .env-grain { display: none; }
.is-lowfx .env-panel { filter: none; }
.is-lowfx .env-orb   { mix-blend-mode: normal; }

body.is-lowfx .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(12, 38, 29, 0.86);
}
body.is-lowfx #transport {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(6, 19, 16, 0.92);
}
body.is-lowfx .fragment { backdrop-filter: none; background: rgba(11, 33, 25, 0.9); }
body.is-lowfx .phone-spill { filter: blur(28px); }