/* ============================================================================
   NIGHT GLASS - THE WOW PASS (2026-10-22)

   Loaded last on every page. Eight moves, each answering something the visual
   audit of the home, windshield-replacement and paradise-nv pages found:

     1  hero objects   - every interior hero gets its own object beside the
                         headline (the glass car with the service's glass lit;
                         the valley radar with the city pinging); every hero
                         gets a streak of light passing over the photograph
     2  range bars     - each price draws as a bar on its list's own scale,
                         and the figures count up (site.js) to the client's text
     3  lit routes     - long step lists light step by step as you scroll
     4  curved edges   - dark bands open and close on a windshield curve with a
                         thin plum light on the glass edge, not a flat line
     5  service strip  - the eleven service names in slow motion (homepage)
     6  signature      - the brand's name, oversized in outline, in the footer
     7  night map      - the Google embed in a dark style instead of muddy plum
     8  FAQ glow       - the open question is a lit pane

   Performance: every animation is transform/opacity, gated to visibility
   (.is-live / .is-on from site.js) where it loops, and off under reduced
   motion. No backdrop-filter, no fixed or blended full-screen layer.
   Roll back = delete this file's <link> in inc/header.php (backup of the whole
   site before this pass: _work/lvexpress/backup/2026-10-22-pre-wow2/).
   ========================================================================= */

/* ===================================================== 1. HERO OBJECTS === */
.hobj{display:none}
@media (min-width:1100px){
  .hero--int .hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.62fr);
    gap:clamp(30px,4vw,72px);align-items:center}
  .hobj{display:block;position:relative;margin:0;padding:clamp(16px,1.6vw,22px);border-radius:30px;
    background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%),rgba(14,11,20,.66);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 50px 100px -40px rgba(0,0,0,.9),
      0 0 90px -30px rgba(162,75,184,.55)}
  .hobj::before{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--plum-br) 30%,rgba(255,255,255,.75) 50%,var(--plum-br) 70%,transparent)}
}
.hobj__stage{position:relative}
.hobj--car .hobj__stage{padding:clamp(18px,2vw,30px) 4px;
  background:radial-gradient(closest-side,rgba(162,75,184,.3),transparent 75%)}
.hobj__cap{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;
  font-family:var(--f-disp);font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff}
.hobj__dot{width:8px;height:8px;border-radius:50%;background:var(--plum-br);
  box-shadow:0 0 0 3px rgba(201,143,216,.18),0 0 12px var(--plum-vv)}

/* the car: its own service's glass lit, the rest quiet */
.gc--hero .gc__p{fill:rgba(255,255,255,.05);stroke:rgba(240,214,247,.45);stroke-width:1.3}
.gc--hero .gc__p.is-lit{fill:rgba(206,140,226,.6);stroke:#fff;stroke-width:2.2;
  filter:drop-shadow(0 0 10px rgba(214,150,232,.95))}
.gc--hero .gc__dot{fill:#fff}
.gc--hero .gc__ping{fill:none;stroke:var(--plum-br);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.hobj.is-live .gc--hero{animation:pc-float 6s ease-in-out infinite}
.hobj.is-live .gc--hero .gc__beams{animation:pc-beam 3.2s ease-in-out infinite}
.hobj.is-live .gc--hero .gc__scan{animation:pc-scan 5.2s cubic-bezier(.45,0,.25,1) infinite;transform-box:view-box}
.hobj.is-live .gc--hero .gc__m .gc__ping{animation:gc-ping 1.8s var(--ease) infinite}
.hobj.is-live .gc--hero .gc__tail{animation:pc-tail 2.4s ease-in-out infinite}

/* the radar: this city pinging, its label lit, the others quieter */
.hobj--map .vm{max-height:none;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vm--here .vm__l{fill:rgba(255,255,255,.55)}
.vm--here .vm__l--here{fill:#fff;font-size:14px;font-weight:600}
.vm__p--here .vm__dot{fill:#fff;transform:scale(2.1)}
.vm--live .vm__p--here .vm__halo{animation:vm-here 2.2s var(--ease) infinite;animation-delay:0s}
@keyframes vm-here{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(4.2)}}

/* every hero: a streak of light passes over the photograph now and then, like
   street light crossing a windshield. Under the scrim, so it reads on the
   photograph side and never over the copy. */
.hero__bg::after{content:"";position:absolute;inset:-10% -60%;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,transparent 44%,rgba(255,236,250,.09) 48.5%,rgba(255,255,255,.2) 50%,
    rgba(255,236,250,.09) 51.5%,transparent 56%);
  transform:translateX(-60%)}
.js .hero.is-live .hero__bg::after{animation:hero-streak 10s cubic-bezier(.55,0,.3,1) 2.4s infinite}
@keyframes hero-streak{0%{transform:translateX(-60%)}38%,100%{transform:translateX(60%)}}

/* ===================================================== 2. RANGE BARS ===== */
.rbar{display:block;position:relative;height:6px;margin-top:10px;border-radius:99px;overflow:hidden;
  background:rgba(109,47,112,.1)}
.rbar i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);
  border-radius:inherit;background:linear-gradient(90deg,var(--plum-vv),var(--plum));transform-origin:0 50%}
.rbar--open i{background:linear-gradient(90deg,var(--plum-vv),var(--plum) 65%,rgba(109,47,112,0))}
.js .rbar i{transform:scaleX(0);transition:transform 1.2s var(--ease) .1s}
.js .rbar.is-on i{transform:none}
.bento__i .rbar{margin-top:14px;height:7px}
.bento__i--feat .rbar{background:rgba(255,255,255,.18)}
.bento__i--feat .rbar i{background:linear-gradient(90deg,#fff,rgba(255,255,255,.65))}
.bento__i--feat .rbar--open i{background:linear-gradient(90deg,#fff,rgba(255,255,255,.65) 65%,rgba(255,255,255,0))}
.pr__i .rbar{margin-top:9px}
.ledger__p .rbar{max-width:170px;margin-top:8px}
.on-dark .rbar{background:rgba(255,255,255,.1)}
.on-dark .rbar i{background:linear-gradient(90deg,var(--plum-br),var(--plum-vv))}
/* the counted figure must not jitter as its digits change */
.pr__f,.bento__f,.ledger__p{font-variant-numeric:tabular-nums}

/* ===================================================== 3. LIT ROUTES ===== */
.steps--v{position:relative}
.steps--v::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;
  background:rgba(255,255,255,.1)}
.steps.steps--v .steps__rule,.steps.steps--v.in .steps__rule,
.steps.steps--v.steps--live .steps__rule,.steps.steps--v.steps--live.in .steps__rule{
  left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;border-radius:2px;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(201,143,216,.35),var(--plum-br));box-shadow:0 0 14px rgba(162,75,184,.6)}
.steps.steps--v .steps__rule{transform:scaleY(0);transition:transform 1.4s var(--ease)}
.steps.steps--v.in .steps__rule{transform:scaleY(1)}
.steps.steps--v.steps--live .steps__rule,.steps.steps--v.steps--live.in .steps__rule{
  transform:scaleY(var(--p,0));transition:none}
.steps--v .steps__n{position:relative;z-index:1;transition:background-color .45s var(--ease),
  border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--spring)}
.steps--v .steps__s{border-radius:14px;transition:background-color .5s var(--ease)}
.steps--v .steps__s.is-lit .steps__n{background-color:#7a3580;border-color:var(--plum-br);
  box-shadow:0 0 0 6px var(--coal),0 0 24px 2px rgba(162,75,184,.65)}
.steps--v.steps--live .steps__s.is-lit{background-color:rgba(162,75,184,.08)}
@media (max-width:560px){
  .steps--v::before,.steps.steps--v .steps__rule,.steps.steps--v.in .steps__rule,
  .steps.steps--v.steps--live .steps__rule,.steps.steps--v.steps--live.in .steps__rule{left:18px;top:19px;bottom:19px}
}

/* ===================================================== 4. CURVED EDGES === */
/* A dark band is a pane of glass: its top and bottom edges curve like a
   windshield, carrying a thin plum light. It overlaps its neighbours by the
   curve's depth (they keep enough padding), and clips its own decorations with
   overflow:clip - which, unlike hidden, leaves sticky children working. */
.sec--svc,.sec--proc,.sch-band,.con{--cv:clamp(22px,4.2vw,64px);position:relative;z-index:2;
  border-radius:50% / var(--cv);margin-block:calc(var(--cv) * -1);overflow:clip;
  box-shadow:inset 0 1px 0 rgba(214,166,227,.55),inset 0 -1px 0 rgba(214,166,227,.3),
    0 30px 60px -30px rgba(22,19,32,.55)}
.sch-band{overflow:hidden}
/* the old straight seams give way to the curved edge light */
.sec--svc::before,.sec--proc::before,.sch-band::before,.con::before{display:none}
/* a band that meets another dark band, the hero or the footer keeps that edge straight */
:is(.sec--svc,.sec--proc,.sch-band,.con):has(+ :is(.sec--svc,.sec--proc,.sch-band,.con)){
  border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
:is(.sec--svc,.sec--proc,.sch-band,.con) + :is(.sec--svc,.sec--proc,.sch-band,.con){
  border-top-left-radius:0;border-top-right-radius:0;margin-top:0}
.con{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
main > .con:last-child{margin-bottom:0}
/* the curve eats into the band's own padding; give it back so content keeps its air */
.sec--svc,.sec--proc,.sch-band,.con{padding-block:calc(var(--sec) + var(--cv) * .6)}

/* ===================================================== 5. SERVICE STRIP == */
.mq{position:relative;overflow:hidden;margin:calc(var(--sec) * -.35) 0 clamp(34px,4.4vw,64px);
  padding-block:clamp(14px,2vw,26px);border-block:1px solid rgba(255,255,255,.07);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq__track{display:flex;width:max-content}
.js .mq.is-live .mq__track{animation:mq-run 70s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__set{display:flex;flex:none}
.mq__i{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--f-hero);font-weight:300;font-size:clamp(30px,4.6vw,70px);line-height:1.1;
  letter-spacing:-.04em;color:rgba(255,255,255,.4)}
.mq__i:nth-child(even){color:rgba(220,176,232,.62)}
.mq__i::after{content:"";flex:none;width:.16em;height:.16em;margin-inline:.55em;border-radius:50%;
  background:var(--plum-br);box-shadow:0 0 14px var(--plum-vv)}
@keyframes mq-run{to{transform:translateX(-50%)}}

/* ===================================================== 6. SIGNATURE ====== */
.foot__sig{position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(18px,3vw,40px);
  height:clamp(48px,10vw,170px);text-align:center;pointer-events:auto}
.foot__sig::before{content:attr(data-sig);position:relative;z-index:2;display:block;
  font-family:var(--f-hero);font-weight:600;font-size:clamp(56px,12.6vw,214px);line-height:1;
  letter-spacing:-.05em;white-space:nowrap;color:transparent;
  -webkit-text-stroke:1px rgba(220,176,232,.34);transform:translateY(8%)}
.foot__sig > .glint{z-index:1;width:640px;height:640px;margin:-320px 0 0 -320px;
  background:radial-gradient(circle at center,rgba(214,150,232,.5) 0,rgba(162,75,184,.2) 30%,transparent 62%)}

/* ===================================================== 7. NIGHT MAP ====== */
.map{background:#0f0c15}
.map iframe{filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.92)}
.map::after{background:linear-gradient(160deg,rgba(162,75,184,.35),rgba(109,47,112,.25));
  mix-blend-mode:color;opacity:.55}

/* ===================================================== 8. FAQ GLOW ====== */
.faq__i{position:relative}
.faq__i::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--plum-br),var(--plum-vv));box-shadow:0 0 14px rgba(162,75,184,.7);
  opacity:0;transform:scaleY(.4);transition:opacity .35s var(--ease),transform .5s var(--ease);z-index:1}
.faq__i[open]::before{opacity:1;transform:none}
.faq__i[open]{border-color:rgba(162,75,184,.38);
  box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(162,75,184,.07),0 30px 60px -32px rgba(79,31,85,.5)}
.faq--v2 .faq__i[open]{background:linear-gradient(90deg,rgba(162,75,184,.07),transparent 65%)}

/* ===================================================== reduced motion ==== */
@media (prefers-reduced-motion:reduce){
  .js .hero__bg::after,.hobj .gc,.hobj .gc *,.js .mq__track,.vm__p--here .vm__halo{animation:none!important}
  .js .rbar i{transform:none;transition:none}
  .hero__bg::after{display:none}
}

/* ===== round 2 after the visual check ===== */
/* the car panel was see-through enough for the photo to fight the drawing */
@media (min-width:1100px){
  .hobj{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 55%),rgba(12,9,17,.84)}
}
.hobj--car .hobj__stage{padding:clamp(26px,2.6vw,40px) 0}
/* the lit city's bigger dot ran into its own label - push the label clear */
.vm__l--here{transform-box:fill-box}
.vm__l--here[text-anchor="end"]{transform:translateX(-7px)}
.vm__l--here[text-anchor="start"]{transform:translateX(7px)}
/* the signature fits the width it sits in */
.foot__sig::before{font-size:clamp(46px,10.6vw,176px)}
.foot__sig{height:clamp(40px,8.6vw,146px)}
/* night map, take two: inverting SATELLITE imagery looked wrong, so the map goes
   dark monochrome and takes the plum through a colour layer; hover shows the real map */
.map iframe{filter:grayscale(1) brightness(.6) contrast(1.22)}
.map::after{background:linear-gradient(160deg,rgba(162,75,184,.55),rgba(79,31,85,.45));mix-blend-mode:color;opacity:.75}
.foot__sig::before{font-size:clamp(30px,10.4vw,176px)}

/* ===== perf (A/B 2026-10-22): no overflow clipping on the curved bands =====
   overflow:clip with a 50% radius made the browser mask every photo tile in the
   services band - a recurring 67-83ms frame as it scrolled in, gone without it.
   The curve is drawn by the band's own background; the only layers that would
   poke out square at the corners take the radius themselves instead. */
.sec--svc,.sec--proc,.con{overflow:visible}
.sec--svc::after,.sec--proc::after,.con__bg,.con__scrim{border-radius:inherit}
/* ===================================================== PHONE ACTION BAR == */
/* (inc/header.php #fab, client request 2026-11-06) The single floating "Call now" pill became a
   full-width bar on phone screens: Email us (glass) | Call now (the brand plum), each half the
   width. Sits on the safe area (iPhone home indicator), and the page gets the bar's height as
   bottom padding so the footer's last line is never hidden under it. */
.fab{left:0;right:0;bottom:0;border-radius:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  gap:10px;background:rgba(18,14,24,.96);background-image:none;
  border-top:1px solid rgba(214,166,227,.28);box-shadow:0 -14px 34px -14px rgba(0,0,0,.6)}
.fab__b{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
  border-radius:999px;font-family:var(--f-sans);font-size:15.5px;font-weight:600;color:#fff;
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.fab__b svg{width:18px;height:18px;flex:none}
.fab__b--mail{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22)}
.fab__b--call{background-color:#7a3580;background-image:linear-gradient(180deg,#94459a,#6a2c70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(162,75,184,.9)}
.fab__b:active{transform:scale(.98)}
.fab__b:focus-visible{outline:2.5px solid var(--plum-br);outline-offset:2px}
@media (max-width:620px){
  .fab{display:flex}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}