/* Northern Lights — real-photo house, day/night. Add class "lit" on an ancestor for night. */
.ph { position: relative; overflow: hidden; background: #0A1A33; container-type: size; }
/* Stage keeps the photo's 3:2 ratio and always covers the container, so the traced lights stay aligned.
   --minW makes the photo at least that wide so it can pan (used to keep the house clear of the hero text). */
.ph-stage { --W: max(100cqw, 150cqh, var(--minW, 0px)); --H: calc(var(--W) / 1.5); position: absolute; width: var(--W); height: var(--H);
  left: clamp(calc(100cqw - var(--W)), calc(50cqw - var(--fx, .5) * var(--W)), 0px);
  top: clamp(calc(100cqh - var(--H)), calc(50cqh - var(--fy, .5) * var(--H)), 0px); }
.ph-img, .ph-shade, .ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-img { object-fit: fill; display: block; transition: filter 1.4s ease; }
/* Blue-hour grade: deep blue sky, house still readable, snow picks up the sky colour. */
.ph-shade { background: linear-gradient(180deg, #1A2F5C 0%, #2E4D86 40%, #5374A8 75%, #6A88B8 100%); mix-blend-mode: multiply; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.ph-night-photo { opacity: 0; transition: opacity 1.2s ease; }

/* Bulbs: unlit they read as small dull bulbs on the roof */
.ph-bulb { opacity: .55; transition: opacity .3s ease; }
.ph-body { fill: #8A9099; transition: fill .3s ease; }
.ph-core { fill: #A8AEB6; transition: fill .3s ease; }
.ph-halo { opacity: 0; transition: opacity .3s ease; }
.ph-wire { fill: none; stroke: #1B2A20; stroke-width: 1.1; opacity: .55; }
.ph-halos, .ph-halos-s { mix-blend-mode: screen; }
.ph-spill-dot { opacity: 0; transition: opacity .6s ease; }
.ph-spill { mix-blend-mode: overlay; }
.ph-win { opacity: 0; transition: opacity 1.4s ease .5s; }
.ph-windows { mix-blend-mode: screen; }

.lit .ph-img.ph-day { filter: brightness(.78) saturate(.55) contrast(1.1); }
.lit .ph-shade { opacity: 1; }
.lit .ph-night-photo { opacity: 1; }
.lit .ph-bulb { opacity: var(--b, 1); }
.lit .ph-body { fill: var(--c, #FFB85C); }
.lit .ph-core { fill: #FFF6E2; }
.lit .ph-halo { opacity: calc(var(--b, 1) * .7); }
.lit .ph-spill-dot { opacity: .55; }
.lit .ph-win { opacity: var(--w, .6); }

/* Manual (scroll-driven) mode via api.setLevel(t) */
.ph-manual .ph-img, .ph-manual .ph-shade { transition: none; }
.ph-manual .ph-bulb, .ph-manual .ph-body, .ph-manual .ph-core, .ph-manual .ph-halo, .ph-manual .ph-spill-dot { transition-duration: .12s; transition-delay: 0s !important; }
.ph-bulb.on { opacity: var(--b, 1); }
.ph-bulb.on .ph-body { fill: var(--c, #FFB85C); }
.ph-bulb.on .ph-core { fill: #FFF6E2; }
.ph-halo.on { opacity: calc(var(--b, 1) * .7); }
.ph-spill-dot.on { opacity: .55; }
.ph-win.on { opacity: var(--w, .6); }

@media (prefers-reduced-motion: reduce) {
  .ph-img, .ph-shade, .ph-bulb, .ph-body, .ph-core, .ph-halo, .ph-win, .ph-spill-dot { transition-duration: .01s !important; transition-delay: 0s !important; }
}