/* ============================================================================
   NOBP 504 — DAYLIGHT
   Two stacked backdrops and the Superdome rig. Pairs with daylight.js.
   Every value here is driven by custom properties written onto .hero-stage,
   so if the script never loads the day layer simply sits at full opacity and
   the hero looks exactly as it does today.
   ========================================================================= */

.hero--live .hero-stage {
  --mix: 0;            /* 0 = afternoon backdrop, 1 = evening backdrop */
  --n-bright: 1;       /* deep-night dim, evening layer only */
  --n-sat: 1;
  --dome: 0.45;        /* Superdome level, 0 turns the rig off */
}

/* ── the two backdrops ────────────────────────────────────────────────── */
.hero--live .nobp-sky {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero--live .nobp-sky--eve {
  /* Fully opaque, not var(--mix). The evening scene is only ever mounted past
     the midpoint of the fade now, so a partial opacity here would show the
     daytime video through it - the ghosting this replaces. */
  opacity: 1;
  filter: brightness(var(--n-bright)) saturate(var(--n-sat));
}

/* ── the Superdome ─────────────────────────────────────────────────────
   APPEARANCE ONLY. Every position — the wash, each lamp, each beam, and
   the rig's own box — is written by daylight.js, which derives all of it
   from a single dome box per crop. The old version placed things here AND
   in the script; the two drifted apart and the lamps ended up sitting
   somewhere other than the light they were supposed to be casting. If you
   need to move the lights, change DOME in daylight.js. Nothing in this
   file positions anything.

   Hidden until the evening artwork can paint, otherwise the rig shows up
   on a black stage while the picture is still downloading. */
.hero--live .hero-stage:not(.nobp-eve-ready) .nobp-dome { display: none; }

.hero--live .nobp-dome {
  position: absolute;
  pointer-events: none;
  color: var(--domeC, #b060ff);
  transition: color 3.6s linear;
  transform-origin: 50% 50%;
  z-index: 1;
}
.hero--live .nobp-dome > i { position: absolute; }

/* Colour across the shell. Anchored at the base, where the lamps actually
   are, and gone before the crown — light grazing the building rather than
   a coloured cap painted over it. */
.hero--live .nobp-dome__wash {
  border-radius: 50% 50% 46% 46% / 72% 72% 28% 28%;
  mix-blend-mode: color;
  background: radial-gradient(ellipse 85% 105% at 50% 100%,
    currentColor 0%, rgba(0, 0, 0, 0) 58%);
  /* The shape alone was leaving a hard lip across the crown — the gradient
     had not reached zero by the time it hit the top of the box, so the
     rounded edge read as a solid cap sitting on the roof. This mask makes
     the top genuinely transparent, so the colour dies out on the shell
     instead of ending on a line. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 85%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 85%);
  opacity: calc(var(--dome) * var(--mix) * 0.85);
}

/* lamps on the drum */
.hero--live .nobp-dome__fx {
  border-radius: 50%;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}
.hero--live .nobp-dome__fx--w {
  background: radial-gradient(circle,
    #fff8e8 0%, rgba(255, 240, 205, .55) 45%, rgba(255, 230, 180, 0) 100%);
  opacity: calc(var(--dome) * var(--mix) * 0.85);
}
.hero--live .nobp-dome__fx--c {
  background: radial-gradient(circle,
    #fff 0%, currentColor 40%, rgba(0, 0, 0, 0) 100%);
  opacity: calc(var(--dome) * var(--mix));
}

/* the beam a colour lamp throws up the shell */
.hero--live .nobp-dome__beam {
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  filter: blur(3px);
  clip-path: polygon(43% 100%, 57% 100%, 88% 0%, 12% 0%);
  background: linear-gradient(to top, currentColor 0%, rgba(0, 0, 0, 0) 88%);
  opacity: calc(var(--dome) * var(--mix) * 0.55);
}

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