/* v18 "wow" pieces for the home page (owner, Nov 9 2026: "make it fire").
   1. #blackout  — scroll story: storm, the street goes dark, the generator starts, your house lights back up.
   2. .wmap      — Greater Houston service-area map with a pin per city page.
   No external files. Motion only when the visitor has not asked for reduced motion. */

/* ---------- 1. blackout scroll story ---------- */
.bo{position:relative;background:#06090e;color:#fff;--warm:#ffc773;--glow:rgba(255,190,100,.55)}
.bo-stage{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr;align-content:center;gap:clamp(.6rem,2vh,1.4rem);padding:clamp(112px,15vh,132px) var(--vx-g,16px) clamp(1rem,4vh,2.5rem);overflow:hidden;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){
  .bo{height:300vh;height:300svh}
  .bo-stage{position:sticky;top:0;height:100vh;height:100svh}
}
.bo-sky{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,#14233a 0%,#0a1220 45%,#06090e 100%);transition:filter .6s}
.bo[data-phase="out"] .bo-sky,.bo[data-phase="storm"] .bo-sky{filter:brightness(.55)}
.bo-flash{position:absolute;inset:0;background:#cfe3ff;opacity:0;pointer-events:none}
.bo[data-phase="storm"] .bo-flash{animation:bo-flash 2.8s infinite}
@keyframes bo-flash{0%,62%,70%,100%{opacity:0}64%{opacity:.55}66%{opacity:.08}68%{opacity:.35}}

.bo-copy{position:relative;z-index:2;max-width:46rem;margin:0 auto;text-align:center;min-height:9.5em}
.bo-eyebrow{font:700 .74rem/1 var(--sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#ff5a4e;display:inline-flex;align-items:center;gap:.5rem}
.bo-eyebrow i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px #3ddc84;transition:background .3s,box-shadow .3s}
.bo[data-phase="storm"] .bo-eyebrow i,.bo[data-phase="out"] .bo-eyebrow i{background:#ff3b30;box-shadow:0 0 10px #ff3b30}
.bo[data-phase="gen"] .bo-eyebrow i{background:#ffb020;box-shadow:0 0 10px #ffb020}
.bo .bo-h{color:#fff;font:800 clamp(1.7rem,5.2vw,3.2rem)/1.05 var(--sans,system-ui);letter-spacing:-.02em;margin:.7rem 0 .5rem;text-wrap:balance}
.bo-h em{font-style:normal;color:var(--warm);text-shadow:0 0 28px var(--glow)}
.bo .bo-p{font-size:clamp(1rem,2.6vw,1.15rem);line-height:1.5;color:rgba(255,255,255,.82);margin:0 auto;max-width:36rem;text-wrap:balance}
.bo-lines{position:relative}
.bo-line{display:none}
.bo-line.is-on{display:block;animation:bo-in .5s ease-out both}
@keyframes bo-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bo-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}
.bo-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.3rem;border-radius:999px;font:700 1rem/1 var(--sans,system-ui);text-decoration:none}
.bo-cta .b1{background:var(--vx-redg,#c70200);color:#fff;box-shadow:var(--vx-red-sh,none)}
.bo-cta .b2{border:2px solid rgba(255,255,255,.4);color:#fff}

.bo-art{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;align-self:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.bo-art svg{display:block;width:100%;height:auto;max-height:52vh;max-height:52svh}
.bo-steps{position:relative;z-index:2;display:flex;justify-content:center;gap:.45rem;margin-top:.6rem}
.bo-steps i{width:26px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);transition:background .3s}
.bo-steps i.is-on{background:#ff3b30}

/* scene states */
.bo .win{fill:#ffcf7a;transition:fill .25s,opacity .25s}
.bo .win-glow{opacity:.85;transition:opacity .3s}
.bo .lamp{fill:#ffe2a8;transition:opacity .2s}
.bo .lamp-glow{opacity:.7;transition:opacity .2s}
.bo .nwin{fill:#ffcf7a;transition:fill .2s}
.bo[data-phase="storm"] .win,.bo[data-phase="storm"] .nwin{animation:bo-flicker .9s steps(2) infinite}
.bo[data-phase="out"] .win,.bo[data-phase="gen"] .win,
.bo[data-phase="out"] .nwin,.bo[data-phase="gen"] .nwin,.bo[data-phase="back"] .nwin{fill:#141b26;animation:none}
.bo[data-phase="out"] .win-glow,.bo[data-phase="gen"] .win-glow{opacity:0}
.bo[data-phase="out"] .lamp,.bo[data-phase="gen"] .lamp,.bo[data-phase="back"] .lamp{opacity:.15}
.bo[data-phase="out"] .lamp-glow,.bo[data-phase="gen"] .lamp-glow,.bo[data-phase="back"] .lamp-glow{opacity:0}
@keyframes bo-flicker{0%{opacity:1}50%{opacity:.25}}
.bo .rain{opacity:0;transition:opacity .4s}
.bo[data-phase="storm"] .rain,.bo[data-phase="out"] .rain,.bo[data-phase="gen"] .rain{opacity:.55}
.bo .rain line{animation:bo-rain .7s linear infinite}
@keyframes bo-rain{from{transform:translate(0,-40px)}to{transform:translate(-14px,60px)}}
.bo .spark{opacity:0}
.bo[data-phase="storm"] .spark{animation:bo-spark 1.4s infinite}
@keyframes bo-spark{0%,70%,100%{opacity:0}74%,82%{opacity:1}}
.bo .wire{transition:stroke .3s}
.bo[data-phase="out"] .wire,.bo[data-phase="gen"] .wire,.bo[data-phase="back"] .wire{stroke:#2a3240}
.bo .led{fill:#596273;transition:fill .3s}
.bo[data-phase="gen"] .led{fill:#ffb020;filter:drop-shadow(0 0 4px #ffb020)}
.bo[data-phase="back"] .led{fill:#3ddc84;filter:drop-shadow(0 0 4px #3ddc84)}
.bo .gen{transform-box:fill-box;transform-origin:50% 100%}
.bo[data-phase="gen"] .gen,.bo[data-phase="back"] .gen{animation:bo-hum .12s linear infinite}
@keyframes bo-hum{0%,100%{transform:translate(0,0)}50%{transform:translate(.6px,-.4px)}}
.bo .puff{opacity:0}
.bo[data-phase="gen"] .puff,.bo[data-phase="back"] .puff{animation:bo-puff 2.2s ease-out infinite}
@keyframes bo-puff{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.35}100%{opacity:0;transform:translate(18px,-46px) scale(1.8)}}
.bo .flow{stroke-dasharray:6 10;opacity:0}
.bo[data-phase="gen"] .flow,.bo[data-phase="back"] .flow{opacity:1;animation:bo-flow .6s linear infinite}
@keyframes bo-flow{to{stroke-dashoffset:-16}}
.bo[data-phase="back"] .win{fill:#ffd48a}
.bo[data-phase="back"] .win-glow{opacity:1}
.bo .house-halo{opacity:0;transition:opacity .6s}
.bo[data-phase="back"] .house-halo{opacity:1}

@media (prefers-reduced-motion:reduce){
  .bo *{animation:none!important;transition:none!important}
}
@media (max-width:600px){
  .bo-stage{padding-bottom:96px;align-content:start}
  .bo-copy{min-height:12.5em}
  .bo-art{margin:0 calc(-1 * var(--vx-g,16px));width:auto}
  .bo-art svg{height:36vh;height:36svh;max-height:none}
}

/* ---------- 2. service-area map ---------- */
.wmap-wrap{display:grid;gap:1.2rem;margin-top:1.2rem;align-items:start}
@media (min-width:900px){.wmap-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.wmap-wrap .areagrid{margin-top:0}}
.wmap{position:relative;background:#0b0f14;border-radius:var(--vx-r-lg,24px);overflow:hidden;box-shadow:var(--vx-sh2,none);isolation:isolate}
.wmap svg{display:block;width:100%;height:auto}
.wmap .ring{fill:none;stroke:rgba(255,255,255,.12);stroke-dasharray:3 7}
.wmap .ring-l{fill:rgba(255,255,255,.38);font:600 15px/1 var(--sans,system-ui);letter-spacing:.06em}
.wmap .grid{stroke:rgba(255,255,255,.04)}
.wmap .sweep{transform-origin:var(--ox) var(--oy);transform-box:view-box;opacity:0}
.wmap.is-in .sweep{opacity:1}
@media (prefers-reduced-motion:no-preference){.wmap.is-in .sweep{animation:wm-sweep 6s linear infinite}}
@keyframes wm-sweep{to{transform:rotate(360deg)}}
.wmap .pin{cursor:pointer;outline:none}
.wmap .pin .hit{fill:transparent}
.wmap .pin .dot{fill:#ff3b30;stroke:#0b0f14;stroke-width:3;transition:r .2s}
.wmap .pin .lbl{fill:rgba(255,255,255,.86);font:600 24px/1 var(--sans,system-ui);paint-order:stroke;stroke:#0b0f14;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.wmap .pin .lbl.minor{opacity:0;transition:opacity .2s}
.wmap .pin:hover .lbl.minor,.wmap .pin.is-hot .lbl.minor{opacity:1}
.wmap .pin:hover .dot,.wmap .pin.is-hot .dot{r:11;fill:#fff}
.wmap .pin:hover .lbl,.wmap .pin.is-hot .lbl{fill:#fff}
@media (prefers-reduced-motion:no-preference){
  .wmap .pin{opacity:0;transition:opacity .4s}
  .wmap.is-in .pin{opacity:1;transition-delay:var(--d,0s)}
}
.wmap .shop .core{fill:#fff}
.wmap .shop .pulse{fill:none;stroke:#ff3b30;stroke-width:3;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.wmap .shop .pulse{animation:wm-pulse 2.4s ease-out infinite}.wmap .shop .pulse+.pulse{animation-delay:1.2s}}
@keyframes wm-pulse{from{transform:scale(.4);opacity:1}to{transform:scale(2.6);opacity:0}}
.wmap .shop-l{fill:#fff;font:800 23px/1 var(--sans,system-ui);paint-order:stroke;stroke:#0b0f14;stroke-width:6px}
.wmap-cap{position:absolute;left:14px;bottom:12px;right:14px;display:flex;justify-content:space-between;gap:.5rem;font:600 .78rem/1.3 var(--sans,system-ui);color:rgba(255,255,255,.7);pointer-events:none}
.wmap-cap b{color:#fff}
.areagrid a.is-hot{background:var(--red,#c70200);color:#fff;border-color:var(--red,#c70200)}