/* HeroBG: animated editing-timeline backdrop. Pairs with assets/js/hero-bg.js */

/* The element passed to HeroBG.mount() gets this class. */
.hero-bg-host {
  isolation: isolate;            /* lets the backdrop sit at z-index -1 without escaping the hero */
}
.hero-bg-host--rel {
  position: relative;            /* only added when the host was position: static */
}

.hero-bg {
  /* Tunables (set on .hero-bg or any ancestor) */
  --hero-bg-color: #0c0c0d;      /* base colour; also what the bottom fades into */
  --hero-bg-dim: 0.26;           /* flat darkening over the whole backdrop, 0 to 1 */
  --hero-bg-vignette: 0.72;      /* strength of the edge vignette, 0 to 1 */
  --hero-bg-floor: 34%;          /* height of the fade into the base colour at the bottom */

  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--hero-bg-color);
  contain: strict;
}

.hero-bg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1);
}
.hero-bg.is-ready .hero-bg__canvas { opacity: 1; }
.hero-bg.is-instant .hero-bg__canvas { transition: none; }

/* Static shading: keeps the name and portrait readable. Costs nothing per frame. */
.hero-bg__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      var(--hero-bg-color) 0%,
      rgb(12 12 13 / 0) var(--hero-bg-floor)),
    linear-gradient(to bottom,
      rgb(8 8 9 / .7) 0%,
      rgb(8 8 9 / 0) 20%),
    radial-gradient(125% 95% at 50% 42%,
      rgb(8 8 9 / 0) 34%,
      rgb(8 8 9 / var(--hero-bg-vignette)) 100%),
    linear-gradient(rgb(10 10 11 / var(--hero-bg-dim)), rgb(10 10 11 / var(--hero-bg-dim)));
}

@media (max-width: 720px) {
  .hero-bg { --hero-bg-dim: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg__canvas { transition: none; }
}