/* =========================================================
   ELEMENT HVAC — FX LAYER v1 (Oct 2026)
   Bold contrast · animated backgrounds · motion polish
   Load AFTER the main <style> block.
   ========================================================= */
:root{
  --ice:#00b4ff;--ice-dark:#0090e0;--ice-glow:rgba(0,180,255,.35);
  --fire:#ff6a00;--fire-dark:#e85a00;--fire-glow:rgba(255,106,0,.4);
  --dark:#05080f;--dark2:#0b1120;--dark3:#151e33;
  --text:#05080f;--muted:#4b5563;
}

/* ---------- typography punch ---------- */
.section-title{font-weight:800!important;letter-spacing:-.01em;color:var(--text)}
.section-title em{font-style:normal;color:var(--ice)!important;position:relative;white-space:nowrap}
.section-title em::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.12em;border-radius:4px;background:linear-gradient(90deg,var(--ice),var(--fire));transform-origin:left;animation:fx-underline 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-underline{from{transform:scaleX(0)}}
.process .section-title,.fd-section .section-title{color:#fff}
.section-label{letter-spacing:.18em!important;font-weight:800!important}

/* ---------- HERO: aurora + moving grid + airflow canvas ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#04070d!important}
.hero-bg{background:
   radial-gradient(40% 55% at 15% 20%,rgba(0,180,255,.32),transparent 70%),
   radial-gradient(35% 50% at 85% 75%,rgba(255,106,0,.28),transparent 70%),
   radial-gradient(30% 40% at 60% 10%,rgba(124,58,237,.18),transparent 70%)!important;
  filter:blur(10px);animation:fx-aurora 18s ease-in-out infinite alternate;inset:-15%!important;position:absolute}
@keyframes fx-aurora{
  0%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  50%{transform:translate3d(4%,-3%,0) rotate(6deg) scale(1.08)}
  100%{transform:translate3d(-4%,3%,0) rotate(-5deg) scale(1.02)}}
.hero-grid{background-image:
   linear-gradient(rgba(0,180,255,.09) 1px,transparent 1px),
   linear-gradient(90deg,rgba(0,180,255,.09) 1px,transparent 1px)!important;
  background-size:56px 56px!important;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
  animation:fx-grid 12s linear infinite}
@keyframes fx-grid{to{background-position:56px 56px,56px 56px}}
#fx-airflow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
.hero-inner{position:relative;z-index:2}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero h1 .blue,.hero h1 .orange{text-shadow:none!important;filter:drop-shadow(0 2px 18px rgba(0,0,0,.5));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:fx-shimmer 6s linear infinite}
.hero h1 .blue{background-image:linear-gradient(90deg,#00b4ff,#8be6ff,#00b4ff)}
.hero h1 .orange{background-image:linear-gradient(90deg,#ff6a00,#ffc04d,#ff6a00)}
@keyframes fx-shimmer{to{background-position:200% center}}
.hero-sub{color:#cbd5e1!important}
.hero-badge{backdrop-filter:blur(6px);background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important}

/* glass promo card with spinning gradient ring (span injected by element-fx.js) */
.hero-promo{position:relative;background:rgba(10,16,32,.72)!important;backdrop-filter:blur(14px);border:none!important;z-index:1}
.fx-ring{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:0;background:conic-gradient(from var(--fx-ang,0deg),var(--ice),transparent 30%,var(--fire) 50%,transparent 80%,var(--ice));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fx-spin 6s linear infinite}
@property --fx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fx-spin{to{--fx-ang:360deg}}
.hero-promo{box-shadow:0 30px 80px -20px rgba(0,180,255,.35),0 0 0 1px rgba(255,255,255,.06)}

/* ---------- BUTTONS: glow + shine sweep ---------- */
.btn{position:relative;overflow:hidden;font-weight:700!important;letter-spacing:.02em}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s}
.btn:hover::after{left:140%}
.btn-fire{background:linear-gradient(135deg,#ff7a1a,#ff4d00)!important;box-shadow:0 10px 30px -6px var(--fire-glow)}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 16px 40px -6px var(--fire-glow)}
.btn-ice,.nav-cta{background:linear-gradient(135deg,#19c1ff,#0084e0)!important;box-shadow:0 10px 30px -8px var(--ice-glow)}
.btn-outline{border:2px solid rgba(255,255,255,.7)!important}

/* ---------- NAV: glass on scroll ---------- */
nav{transition:background .3s,backdrop-filter .3s,box-shadow .3s}
nav.fx-scrolled{background:rgba(4,7,13,.82)!important;backdrop-filter:blur(14px) saturate(160%);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.ann-bar{background:linear-gradient(90deg,#0084e0,#7c3aed,#ff4d00,#0084e0)!important;background-size:300% 100%!important;animation:fx-flow 14s linear infinite}
@keyframes fx-flow{to{background-position:300% 0}}

/* ---------- TRUST + STATS bars: flowing gradient ---------- */
.trust-bar{background:linear-gradient(90deg,#070b14,#0f1a30,#070b14)!important;border-top:1px solid rgba(0,180,255,.25);border-bottom:1px solid rgba(255,106,0,.25)}
.stats-row{background:linear-gradient(120deg,#0084e0,#00b4ff,#0057b8,#0084e0)!important;background-size:300% 300%!important;animation:fx-flow 16s ease infinite;position:relative;overflow:hidden}
.stats-row::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px);background-size:22px 22px;animation:fx-grid 20s linear infinite;pointer-events:none}
.stat-num{font-weight:900!important;text-shadow:0 4px 20px rgba(0,0,0,.25)}

/* ---------- LIGHT SECTIONS: drifting mesh ---------- */
.services,.reviews{position:relative;isolation:isolate;overflow:hidden}
.services::before,.reviews::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(30% 30% at 20% 30%,rgba(0,180,255,.10),transparent 70%),
             radial-gradient(25% 30% at 80% 70%,rgba(255,106,0,.09),transparent 70%);
  animation:fx-aurora 26s ease-in-out infinite alternate}

/* cards: crisp lift + gradient edge */
.svc-card,.blog-card,.review-card{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;border:1px solid #e5e9f0!important;background:#fff}
.svc-card:hover,.blog-card:hover,.review-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(5,8,15,.28),0 0 0 1px rgba(0,180,255,.35)}
.svc-card::after,.blog-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--ice),var(--fire));transition:width .45s;border-radius:3px 3px 0 0}
.svc-card:hover::after,.blog-card:hover::after{width:100%}
.svc-icon{transition:transform .4s}
.svc-card:hover .svc-icon{transform:scale(1.12) rotate(-6deg)}
.blog-card-img{position:relative;overflow:hidden}
.blog-card-img::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);background-size:250% 100%;animation:fx-shimmer 5s linear infinite}
.bci-replace{background:linear-gradient(135deg,#ff4d00,#ff9a3c)}
.bci-pm{background:linear-gradient(135deg,#0057b8,#00b4ff)}
.bci-check{background:linear-gradient(135deg,#0b1120,#1d3a6b)}
.blog-new{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--fire);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;animation:fx-pulse 2s ease-in-out infinite}
@keyframes fx-pulse{50%{box-shadow:0 0 0 6px rgba(255,106,0,0)}0%{box-shadow:0 0 0 0 rgba(255,106,0,.5)}}

/* ---------- DARK SECTIONS ---------- */
.process{position:relative;isolation:isolate;overflow:hidden;background:#04070d!important}
.process::before{content:"";position:absolute;inset:-20%;z-index:-1;
  background:radial-gradient(35% 45% at 80% 20%,rgba(0,180,255,.18),transparent 70%),
             radial-gradient(35% 45% at 10% 90%,rgba(255,106,0,.16),transparent 70%);animation:fx-aurora 20s ease-in-out infinite alternate}
.step-num{background:linear-gradient(135deg,var(--ice),var(--fire))!important;color:#fff!important;box-shadow:0 0 0 6px rgba(0,180,255,.12),0 10px 30px -6px rgba(255,106,0,.45)}
.fd-section{background:linear-gradient(135deg,#0f0c29,#302b63,#1a1446,#0f0c29)!important;background-size:300% 300%!important;animation:fx-flow 18s ease infinite}
.emergency{background:linear-gradient(135deg,#b91c1c,#7f1d1d,#ff4d00,#991b1b)!important;background-size:300% 300%!important;animation:fx-flow 10s ease infinite;position:relative;overflow:hidden}
.emergency::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px);animation:fx-grid 8s linear infinite;pointer-events:none}
.big-phone{text-shadow:0 0 30px rgba(255,255,255,.35)}
footer{border-top:1px solid;border-image:linear-gradient(90deg,var(--ice),var(--fire)) 1}

/* ---------- SCROLL REVEAL ---------- */
.fx-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.fx-reveal.fx-in{opacity:1;transform:none}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx-reveal{opacity:1;transform:none}
  #fx-airflow{display:none}
}

/* =========================================================
   FX LAYER v2 — interaction & impact
   ========================================================= */
/* scroll progress */
#fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:9999;background:linear-gradient(90deg,var(--ice),#7c3aed,var(--fire));box-shadow:0 0 12px rgba(0,180,255,.6);pointer-events:none}

/* hero cursor spotlight */
.hero{--mx:50%;--my:40%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(0,180,255,.16),rgba(255,106,0,.06) 40%,transparent 65%);transition:opacity .4s}

/* headline word reveal */
.fx-w{display:inline-block;opacity:0;transform:translateY(.45em) rotateX(40deg);filter:blur(6px);animation:fx-word .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fx-word{to{opacity:1;transform:none;filter:blur(0)}}
.fx-wi{opacity:0}
@keyframes fx-fade{from{opacity:0;filter:blur(6px) drop-shadow(0 2px 18px rgba(0,0,0,.5))}to{opacity:1;filter:blur(0) drop-shadow(0 2px 18px rgba(0,0,0,.5))}}

/* live dispatch clock in eyebrow */
.fx-clock{margin-left:10px;padding:2px 8px;border-radius:99px;background:rgba(5,150,105,.18);border:1px solid rgba(16,185,129,.4);color:#6ee7b7;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* magnetic CTAs */
.fx-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s!important;will-change:transform}

/* service-area marquee */
.fx-marquee{position:relative;overflow:hidden;background:#04070d;border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0}
.fx-marquee::before,.fx-marquee::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:1;pointer-events:none}
.fx-marquee::before{left:0;background:linear-gradient(90deg,#04070d,transparent)}
.fx-marquee::after{right:0;background:linear-gradient(-90deg,#04070d,transparent)}
.fx-track{display:flex;width:max-content;animation:fx-scroll 38s linear infinite}
.fx-marquee:hover .fx-track{animation-play-state:paused}
.fx-track span{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(22px,3vw,34px);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;padding:0 22px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}
.fx-track span:nth-child(3n+1){color:#fff;-webkit-text-stroke:0}
.fx-track span:nth-child(3n+2){color:var(--ice);-webkit-text-stroke:0}
.fx-track i{font-style:normal;color:var(--fire);font-size:22px;align-self:center}
@keyframes fx-scroll{to{transform:translateX(-50%)}}

/* 3D tilt + spotlight cards (pointer devices) */
@media (hover:hover) and (pointer:fine){
  .svc-card,.blog-card,.review-card{transform-style:preserve-3d;--sx:50%;--sy:50%;isolation:isolate}
  .svc-card::before,.review-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(360px circle at var(--sx) var(--sy),rgba(0,180,255,.12),transparent 60%)}
  .svc-card:hover::before,.review-card:hover::before{opacity:1}
  .fx-tilting{transition:transform .08s linear,box-shadow .35s!important}
}

/* stat count-up pop */
.stat-num.fx-counting{animation:fx-pop .5s ease-out}
@keyframes fx-pop{50%{transform:scale(1.08)}}
.stat-item{position:relative}
.stat-item+.stat-item::before{content:"";position:absolute;left:0;top:15%;height:70%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.45),transparent)}

/* emergency: sonar rings on the phone */
.big-phone{position:relative;z-index:1}
.big-phone::before,.big-phone::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:160%;border-radius:999px;border:2px solid rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(.9);opacity:0;z-index:-1;animation:fx-sonar 2.6s ease-out infinite}
.big-phone::after{animation-delay:1.3s}
@keyframes fx-sonar{0%{opacity:.8;transform:translate(-50%,-50%) scale(.9)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
.emergency h2{text-shadow:0 4px 30px rgba(0,0,0,.35)}

/* floating desktop call pill */
#fx-callpill{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;align-items:center;gap:10px;padding:14px 22px 14px 16px;border-radius:999px;text-decoration:none;color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
  background:linear-gradient(135deg,#ff7a1a,#ff4d00);box-shadow:0 18px 40px -10px rgba(255,77,0,.6);transform:translateY(120px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
#fx-callpill.on{transform:none;opacity:1}
#fx-callpill b{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2)}
#fx-callpill b::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;animation:fx-sonar2 1.8s ease-out infinite}
@keyframes fx-sonar2{to{transform:scale(1.8);opacity:0}}
#fx-callpill small{display:block;font-size:11px;font-weight:600;opacity:.85;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){#fx-callpill{display:none}}

/* glowing section seams */
.services+.services,.blog-section,.reviews,.contact{position:relative}
.blog-section::before,.contact::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--ice),var(--fire),transparent);opacity:.5}

@media (prefers-reduced-motion:reduce){
  .fx-w,.fx-wi{opacity:1;transform:none;filter:none}
  .fx-track{animation:none}
  #fx-progress{display:none}
}

/* =========================================================
   FX LAYER v3 — San Antonio → Austin night flyover
   Replaces the white section backgrounds with a fixed,
   scroll-linked aerial skyline canvas (#fx-flyover).
   ========================================================= */
html{background:#04070d!important}
body{background:transparent!important}
#fx-flyover{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
/* former white / light sections become dark glass over the flyover */
.services,.blog-section,.reviews,.contact{
  background:linear-gradient(180deg,rgba(4,7,13,.78) 0%,rgba(4,7,13,.36) 22%,rgba(4,7,13,.36) 78%,rgba(4,7,13,.78) 100%)!important;
  color:#e2e8f0;--text:#f8fafc;--muted:#cbd5e1;--border:rgba(255,255,255,.14);--surface:transparent;--light:rgba(255,255,255,.06)}
.services .section-title,.blog-section .section-title,.reviews .section-title,.contact .section-title{color:#fff!important;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.services::before,.reviews::before{opacity:.6}
/* cards stay crisp white */
.svc-card,.blog-card,.review-card,.form-card{--text:#05080f;--muted:#4b5563;--border:#e2e8f0;--surface:#f8fafc;--light:#f1f5f9;color:#05080f}
.form-card{background:#fff!important;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
/* FAQ: glass cards */
#faq .faq-item{background:rgba(11,17,32,.62)!important;border:1px solid rgba(255,255,255,.1)!important;border-left:3px solid var(--ice)!important;border-radius:14px;padding:18px 22px!important;margin-bottom:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#faq .faq-item h3{color:#fff}
#faq .faq-item p{color:#cbd5e1}
/* contact info column */
.contact .contact-info h3,.contact .ci-text strong{color:#fff}
.contact .ci{background:rgba(11,17,32,.55);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.contact .ci-icon{background:rgba(0,180,255,.18)!important}
/* dark buttons sitting on dark glass → ghost */
.blog-section .btn-dark{background:transparent!important;border:2px solid rgba(255,255,255,.75)!important;color:#fff!important}
.blog-section .btn-dark:hover{background:rgba(255,255,255,.08)!important}
@media (max-width:700px){
  .services,.blog-section,.reviews,.contact{background:linear-gradient(180deg,rgba(4,7,13,.84),rgba(4,7,13,.5) 25%,rgba(4,7,13,.5) 75%,rgba(4,7,13,.84))!important}
}
/* v3.2 — keep intro copy crisp over the brighter skyline */
.services .container > p,.blog-section .container > p,.reviews .container > p,.contact .container > p,
.services .section-label,.blog-section .section-label,.reviews .section-label,.contact .section-label,
.contact .contact-info > p,.contact .contact-info > h3{text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.85)}