/* AmbientVideoBackground, the midnight navy ambient layer.
   One fixed environment behind the whole page, six layers deep.
   1. .h2-ambient__base      navy foundation plus the static poster
   2. .h2-ambient__video     the live colour layer (canvas .h2-ambient__flow),
                             or the seamless 30 second loop where WebGL is absent
   3. .h2-ambient__overlay   adjustable navy veil for readability
   4. .h2-ambient__vignette  adjustable edge depth
   5. .h2-ambient__stars     the outward starfield, above the veil so it stays crisp
   6. page content, which stays in normal flow above this layer
   Every visual control is a custom property on .h2-ambient, so settings change
   live without touching the video element. Defaults live here and in
   ambient-background.js DEFAULTS; keep the two in step. */

.h2-ambient{
  --ambient-base:#0A1740;
  --ambient-overlay-color:#050C26;
  --ambient-overlay-opacity:.50;
  --ambient-video-opacity:1;
  --ambient-brightness:.86;
  --ambient-saturation:1.4;
  --ambient-glow:1;
  --ambient-vignette:.66;
  --ambient-poster-landscape:url("h2-ambient-landscape.webp");
  --ambient-poster-portrait:url("h2-ambient-portrait.webp");

  position:fixed; top:0; left:0; z-index:-1;
  width:100%;
  /* lvh is a static snapshot of the viewport with the toolbar hidden, so the
     layer covers the screen at every toolbar state and never resizes mid scroll */
  height:100%;
  height:100lvh;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  background:var(--ambient-base);
}

.h2-ambient > *{ position:absolute; inset:0; width:100%; height:100% }

.h2-ambient__base{
  background:var(--ambient-base) var(--ambient-poster-landscape) center / cover no-repeat;
}

.h2-ambient__base,
.h2-ambient__video{
  /* glow lifts the luminous cores against the navy without a second layer;
     the poster takes the same grade so both modes match */
  filter:
    brightness(calc(var(--ambient-brightness) * (1 + var(--ambient-glow) * .12)))
    saturate(var(--ambient-saturation))
    contrast(calc(1 + var(--ambient-glow) * .30));
}
.h2-ambient__video{
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
.h2-ambient.is-playing .h2-ambient__video{ opacity:var(--ambient-video-opacity) }

.h2-ambient__overlay{
  background:var(--ambient-overlay-color);
  opacity:var(--ambient-overlay-opacity);
}

.h2-ambient__vignette{
  background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(6,14,44,1) 100%);
  opacity:var(--ambient-vignette);
}

@media (max-aspect-ratio:1/1){
  .h2-ambient__base{ background-image:var(--ambient-poster-portrait) }
}

@media (prefers-reduced-motion:reduce){
  .h2-ambient__video{ display:none }
}

/* The page canvas matches the foundation, so no other colour shows while the
   poster and video load. */
body:has(> .h2-ambient){ background-color:#0A1740 }

/* Development control panel, created by ambient-background.js on localhost only */
.h2-ambient-panel{
  position:fixed; left:12px; bottom:12px; z-index:10000;
  font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#e8eeff;
}
.h2-ambient-panel__toggle{
  padding:.5rem .85rem; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(10,20,56,.82); color:inherit; font:inherit;
  backdrop-filter:blur(8px);
}
.h2-ambient-panel__body{
  margin-top:8px; width:min(300px, calc(100vw - 24px));
  max-height:min(70vh, 560px); overflow:auto;
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,20,56,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.h2-ambient-panel[data-open="false"] .h2-ambient-panel__body{ display:none }
.h2-ambient-panel__row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; margin:0 0 10px }
.h2-ambient-panel__row label{ font-weight:600 }
.h2-ambient-panel__row output{ font-variant-numeric:tabular-nums; opacity:.8 }
.h2-ambient-panel__row input[type="range"]{ grid-column:1 / -1; width:100%; accent-color:#39BFFF }
.h2-ambient-panel__row input[type="color"]{ width:44px; height:26px; padding:0; border:0; background:none; cursor:pointer }
.h2-ambient-panel__actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.h2-ambient-panel__actions button{
  flex:1 1 auto; padding:.45rem .6rem; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:inherit; font:inherit;
}
.h2-ambient-panel__actions button:hover{ border-color:#39BFFF }