/**
 * Volt N' Vent — "atmosphere" layer (clean build).
 * Deliberately minimal: one cheap, GPU-composited aurora behind the hero, and
 * that's it. The earlier canvas particles / scroll-parallax / traveling line
 * caused seams, pixelated edges and scroll lag on real devices, so they're gone.
 * The count-up stats bar is driven by vnv-atmosphere.js — no visual layer needed.
 * Gated on html.vnv-atmo so no-JS and reduced-motion users get the base site.
 */

/* Hero aurora — a slow wash of gold light drifting behind the hero content.
   Pure transform animation = composited on the GPU, no per-frame repaint, no lag.
   inset:-30% gives it room to move so an edge never shows. */
html.vnv-atmo .hero-area.vnv-bg-hero { overflow: hidden; }
html.vnv-atmo .hero-area.vnv-bg-hero::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 30% 34%, rgba(247, 198, 0, 0.24), transparent 70%),
    radial-gradient(46% 46% at 72% 66%, rgba(247, 198, 0, 0.16), transparent 72%);
  will-change: transform;
  animation: vnvAurora 20s ease-in-out infinite alternate;
}
@keyframes vnvAurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
/* Keep the hero content above the aurora (the backgrounds sheet already does this,
   this is just a belt-and-suspenders). */
html.vnv-atmo .hero-area.vnv-bg-hero > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  html.vnv-atmo .hero-area.vnv-bg-hero::before { display: none; }
}

/* ============================================================
   CINEMATIC HERO — full-bleed real photo, slow film zoom, dark
   scrim so the light text stays crisp. Explicit layer divs
   (.vnv-cine-bg / -scrim / -aura) so we control the stack exactly.
   ============================================================ */
.vnv-hero-cine { position: relative; overflow: hidden; color: #fff; }

/* drop the base parchment motif + aurora on this hero — we layer our own */
.vnv-hero-cine.vnv-bg-hero::before,
.vnv-hero-cine.vnv-bg-hero::after { display: none !important; }

/* !important throughout: the backgrounds stylesheet forces every direct hero
   child to position:relative/z-index:1 with a more specific selector, which
   knocks these background layers out of place. These overrides win it back. */
.vnv-hero-cine .vnv-cine-bg {
  position: absolute !important; inset: -6% !important; z-index: 0 !important;
  background: #0f2844 url('bg/bg-ac-condenser.jpg') center / cover no-repeat;
  animation: vnvKen 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vnvKen {
  0%   { transform: scale(1.05) translate(-1%, -1%); }
  100% { transform: scale(1.16) translate(1.5%, 1.5%); }
}

.vnv-hero-cine .vnv-cine-scrim {
  position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(15, 40, 68, 0.25), transparent 55%),
    linear-gradient(180deg, rgba(11, 28, 48, 0.74) 0%, rgba(11, 28, 48, 0.56) 42%, rgba(11, 28, 48, 0.90) 100%);
}

.vnv-hero-cine .vnv-cine-aura {
  position: absolute !important; inset: -30% !important; z-index: 1 !important; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(42% 42% at 28% 32%, rgba(247, 198, 0, 0.26), transparent 70%),
    radial-gradient(46% 46% at 74% 70%, rgba(247, 198, 0, 0.15), transparent 72%);
  animation: vnvAurora 20s ease-in-out infinite alternate;
  will-change: transform;
}

.vnv-hero-cine > .max-w-5xl { position: relative !important; z-index: 2 !important; }

@media (prefers-reduced-motion: reduce) {
  .vnv-hero-cine .vnv-cine-bg,
  .vnv-hero-cine .vnv-cine-aura { animation: none; }
}

/* ============================================================
   CINEMATIC CONTENT BANDS — every content section becomes a dark
   photo band with light text, matching the hero. Reuses each
   section's own themed photo (its ::after motif), just darkened
   over a navy base so it reads cinematic instead of a faint tan
   watermark. Light cards are solidified so their dark text still
   pops; the pop-card shadows are untouched.
   ============================================================ */
.vnv-cine-band { background-color: #0f2844 !important; position: relative; isolation: isolate; }
.vnv-cine-band::after {
  opacity: 0.42 !important;
  filter: contrast(0.95) brightness(0.68) saturate(1.06) !important;
}

/* translucent light cards → solid, so dark card text stays crisp on the dark band */
.vnv-cine-band [class*="bg-paper-lift/"],
.vnv-cine-band [class*="bg-white/40"] {
  background-color: #f7ecd8 !important;
}
.vnv-cine-band details.faq-item {
  background: #f7ecd8 !important;
  border-color: rgba(15, 40, 68, 0.16) !important;
}

/* section-level lettering (headings + intro copy that sit directly on the band,
   NOT inside a card) flips to light so it reads on the dark photo */
.vnv-cine-band .vnv-cine-ink { color: #ffffff !important; }
.vnv-cine-band .vnv-cine-ink-soft { color: rgba(244, 234, 214, 0.9) !important; }

/* ============================================================
   ONE FLUSH PHOTO — a single fixed background photo behind the
   WHOLE page (replaces the per-section patchwork that looked
   disjointed). Each page sets its own photo with --vnv-page-photo
   on <body>; everything else goes transparent so the one image
   reads continuously from the hero to the footer. Static (no
   scroll animation) so it stays smooth on phones.
   ============================================================ */
body.vnv-cine-site { background: #0f2844 !important; }
body.vnv-cine-site::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-color: #0f2844;
  background-image: var(--vnv-page-photo, url('/assets/bg/bg-ac-condenser.jpg'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.vnv-cine-site::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 28, 48, 0.80) 0%, rgba(11, 28, 48, 0.86) 50%, rgba(11, 28, 48, 0.93) 100%);
}
/* every band / section / hero / footer is see-through so the single photo shows.
   `background: transparent` (shorthand) clears any pinned color AND gradient image. */
body.vnv-cine-site .vnv-bg-section,
body.vnv-cine-site .vnv-cine-band,
body.vnv-cine-site .hero-area.vnv-bg-hero,
body.vnv-cine-site footer { background: transparent !important; }
/* the navy bands are pinned by a higher-specificity inline rule — match it to
   override so the flush photo shows through them too */
body.vnv-cine-site.vnv-bg-site .vnv-bg-section.vnv-bg-electrical,
body.vnv-cine-site.vnv-bg-site .vnv-bg-section.vnv-bg-panel,
body.vnv-cine-site.vnv-bg-site .vnv-bg-section.vnv-bg-ev,
body.vnv-cine-site.vnv-bg-site #contact.vnv-bg-ev { background-color: transparent !important; }
/* id-level, to decisively beat any higher-specificity band pin on either theme's pages */
body.vnv-cine-site #about-us,
body.vnv-cine-site #hvac,
body.vnv-cine-site #electrical,
body.vnv-cine-site #service-areas,
body.vnv-cine-site #reviews,
body.vnv-cine-site #faq,
body.vnv-cine-site #contact { background: transparent !important; }

/* ---- content/service pages: make section lettering read on the flush photo ----
   Default section text to light and flip the dark navy text classes to light;
   gold and paper accents are left alone. Nav/footer chrome is untouched. */
/* Section/hero/footer content sits on the dark photo → default it light and flip
   the dark navy text classes to light. Footer included so its links aren't lost. */
body.vnv-cine-site :is(section, header.page-hero, footer) { color: #f4ead6; }
body.vnv-cine-site :is(section, header.page-hero, footer) :is(.text-navy-deep, .text-navy, [class*="text-navy/"]) {
  color: rgba(244, 234, 214, 0.92) !important;
}

/* Light CARDS (not whole sections — sections are force-cleared to the photo) go
   solid so their dark text stays readable. Covers every light surface: bg-paper*,
   and HIGH-opacity white cards bg-white/40..99 (the /40 /45 /50 etc. panels). The
   low-opacity glassy cards (bg-white/10..30) are intentionally excluded — those are
   dark glass with light text and must stay that way. */
body.vnv-cine-site :is([class~="bg-white"], [class*="bg-paper"], [class*="bg-white/4"], [class*="bg-white/5"], [class*="bg-white/6"], [class*="bg-white/7"], [class*="bg-white/8"], [class*="bg-white/9"]):not(section):not(header):not(footer):not(nav) {
  background-color: #f4ead6 !important;
}

/* Any solid light-or-gold SURFACE keeps dark navy text — the element itself and
   its inner text. Extra body class (.vnv-bg-site) raises specificity ABOVE the
   section text-flip so labels don't bleach out. `:not(section)` keeps it off the
   transparent bg-paper sections (which must stay light on the photo); `:not(nav)`
   keeps it off the sticky nav bar (which is bg-paper chrome, not a card — its
   navy links + gold Call button must keep their own colors). */
body.vnv-cine-site.vnv-bg-site :is([class~="bg-gold"], [class~="bg-white"], [class*="bg-paper"], [class*="bg-white/4"], [class*="bg-white/5"], [class*="bg-white/6"], [class*="bg-white/7"], [class*="bg-white/8"], [class*="bg-white/9"]):not(section):not(header):not(footer):not(nav),
body.vnv-cine-site.vnv-bg-site :is([class~="bg-gold"], [class~="bg-white"], [class*="bg-paper"], [class*="bg-white/4"], [class*="bg-white/5"], [class*="bg-white/6"], [class*="bg-white/7"], [class*="bg-white/8"], [class*="bg-white/9"]):not(section):not(header):not(footer):not(nav)
  :is(h1,h2,h3,h4,p,li,span,a,strong,em,.text-navy-deep,.text-navy,[class*="text-navy/"]) {
  color: #153a5c !important;
}

/* FAQ accordions use a translucent-white background from each page's own <style>
   (class is faq-item on the homepage, faq-light on service pages — match any
   faq-* details), so solidify them and keep their text dark on every page. */
body.vnv-cine-site details[class*="faq"] { background: #f4ead6 !important; border-color: rgba(15, 40, 68, 0.16) !important; }
body.vnv-cine-site.vnv-bg-site details[class*="faq"],
body.vnv-cine-site.vnv-bg-site details[class*="faq"] :is(summary, p, li, span, a, strong, em, .text-navy-deep, .text-navy, [class*="text-navy/"]) {
  color: #153a5c !important;
}

/* SYMMETRIC to the light-card rule: DARK navy surfaces (buttons, deep panels)
   keep light/gold text — even when nested inside a light card, where the card
   re-darken above would otherwise bleach them dark-on-dark. Placed after the
   re-darken so it wins the tie; the text-gold variants are last so gold stays gold. */
body.vnv-cine-site.vnv-bg-site :is([class~="bg-navy"], [class~="bg-navy-deep"], [class*="bg-navy-deep/"], [class*="bg-navy/"]),
body.vnv-cine-site.vnv-bg-site :is([class~="bg-navy"], [class~="bg-navy-deep"], [class*="bg-navy-deep/"], [class*="bg-navy/"])
  :is(h1,h2,h3,h4,p,li,span,a,strong,em) {
  color: #f4ead6 !important;
}
body.vnv-cine-site.vnv-bg-site :is([class~="bg-navy"], [class~="bg-navy-deep"], [class*="bg-navy-deep/"], [class*="bg-navy/"])[class*="text-gold"],
body.vnv-cine-site.vnv-bg-site :is([class~="bg-navy"], [class~="bg-navy-deep"], [class*="bg-navy-deep/"], [class*="bg-navy/"]) [class*="text-gold"] {
  color: #f7c600 !important;
}
/* kill the patchwork: EVERY per-section/hero photo (::after motif on any
   section, header, or .page-hero — the old rotating-motif + inner-page hero
   photos), plus the homepage hero's own photo + scrim. Only the one fixed
   body photo remains. */
body.vnv-cine-site section::after,
body.vnv-cine-site header::after,
body.vnv-cine-site .page-hero::after,
body.vnv-cine-site footer::after,
body.vnv-cine-site .vnv-hero-cine .vnv-cine-bg,
body.vnv-cine-site .vnv-hero-cine .vnv-cine-scrim { display: none !important; }

/* drop the full-width cream/white band + logo at the top of the footer — it broke
   the flush-photo look with a solid horizontal rectangle across the page */
body.vnv-cine-site footer > [class~="bg-paper"] { display: none !important; }