/* solar-mural.css — the interactive mural layer (helio-ledger artwork).
 *
 * Purely additive and decorative: every layer is aria-hidden, pointer-event
 * transparent and absolutely positioned, so no existing layout, script or
 * content rule depends on it. Dark-only — the site has no light palette.
 *
 * Assets are full-resolution 1672x941 WebP. The four silhouette pieces carry
 * real alpha channels, so they are layered over gradient "sky" backdrops that
 * belong to the page, not baked into the image.
 */

/* ---------------------------------------------------------------- hero sky */
.hero { position: relative; isolation: isolate; }
.hero .hero-copy, .hero .hero-art { position: relative; z-index: 1; }

.mural-hero {
  position: absolute; inset: -16px -20px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden; z-index: 0;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.mural-hero-sky {
  position: absolute; inset: 0;
  background: url("/assets/img/mural-hero-dusk.webp") center 68% / cover no-repeat;
}
.mural-hero-bokeh {
  position: absolute; inset: -12%;
  background: url("/assets/img/mural-bokeh.webp") center / cover no-repeat;
  mix-blend-mode: screen; opacity: .5;
  animation: mural-bokeh-drift 46s ease-in-out infinite alternate;
}
@keyframes mural-bokeh-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.09); }
}
@keyframes mural-spark-fade {
  from { opacity: 1; transform: scale(.2); }
  to   { opacity: 0; transform: scale(1); }
}
.mural-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(8, 10, 22, .84) 0%, rgba(8, 10, 22, .5) 48%, rgba(8, 10, 22, .16) 100%),
    linear-gradient(0deg, rgba(11, 16, 32, .55) 0%, transparent 34%);
}
#mural-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }

/* -------------------------------------------------- section ambience bands */
#calculator, #how { position: relative; isolation: isolate; }
.mural-band {
  position: absolute; inset: -6px -18px;
  border-radius: var(--radius-lg);
  overflow: hidden; z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center 78%, center;
  opacity: .5;
}
.mural-band::after { content: ""; position: absolute; inset: 0; background: rgba(8, 11, 24, .52); }
.mural-band-roof {
  background-image:
    url("/assets/img/mural-solar-roof.webp"),
    linear-gradient(180deg, #31427c 0%, #1a2450 46%, #0d1230 100%);
}
.mural-band-neighborhood {
  background-image:
    url("/assets/img/mural-neighborhood.webp"),
    linear-gradient(180deg, #2c3d75 0%, #182247 46%, #0c112c 100%);
}

/* ---------------------------------- decorative skyline figures (subpages) */
.mural-figure {
  height: 210px; margin: 18px 0 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center 82%, center;
}
.mural-figure-pylon {
  background-image:
    url("/assets/img/mural-pylon.webp"),
    linear-gradient(180deg, #35467f 0%, #1c2653 50%, #0d1230 100%);
}
.mural-figure-hills {
  background-image:
    url("/assets/img/mural-hills.webp"),
    linear-gradient(180deg, #2f4078 0%, #1a2450 50%, #0c112c 100%);
}
.mural-figure-neighborhood {
  background-image:
    url("/assets/img/mural-neighborhood.webp"),
    linear-gradient(180deg, #2c3d75 0%, #182247 46%, #0c112c 100%);
  background-position: center 70%, center;
}

@media (max-width: 720px) {
  .mural-hero { inset: -10px -10px 0; }
  .mural-band { inset: -6px -10px; }
  .mural-figure { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .mural-hero-bokeh { animation: none; }
}