/* =========================================================================
   ECO4 PRO — Visual Enhancements  (eco-enhance.css)
   Loaded LAST, after custom-polish.css. Purely additive & reversible.
   - Scroll-reveal animation system (activated by eco-enhance.js)
   - Premium SVG globe for the planet section
   - Glossy / glass sections with faint background imagery
   Nothing here removes existing functionality; if JS/CSS is stripped the
   page stays fully visible (reveal styles only apply when JS adds
   `html.eco-anim-ready`).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) SCROLL-REVEAL SYSTEM
   Elements get `.eco-reveal` (+ optional direction class) from JS.
   Until then — and if JS never runs — content is 100% visible (SEO-safe).
   ------------------------------------------------------------------------- */
html.eco-anim-ready .eco-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.eco-anim-ready .eco-reveal.eco-reveal-left   { transform: translateX(-46px); }
html.eco-anim-ready .eco-reveal.eco-reveal-right  { transform: translateX(46px); }
html.eco-anim-ready .eco-reveal.eco-reveal-scale  { transform: scale(0.9); }
html.eco-anim-ready .eco-reveal.eco-reveal-zoom   { transform: scale(1.06); }

html.eco-anim-ready .eco-reveal.eco-in { opacity: 1; transform: none; }

/* When JS is active we drive entrances via IntersectionObserver, so switch
   OFF the old load-time keyframe entrances (they fired on load regardless of
   scroll). If JS is absent these keep working — graceful degradation. */
html.eco-anim-ready .eco-trust-stat,
html.eco-anim-ready .eco-process-step,
html.eco-anim-ready .service-card,
html.eco-anim-ready .choose-card,
html.eco-anim-ready .eco-bus-card,
html.eco-anim-ready .ecorev-card,
html.eco-anim-ready .eco-rich-stat-card,
html.eco-anim-ready .eco-rich-step-card,
html.eco-anim-ready .eco-rich-benefit,
html.eco-anim-ready .eco-rich-grant-card,
html.eco-anim-ready .eco-compare-with,
html.eco-anim-ready .eco-compare-without { animation: none !important; }

/* -------------------------------------------------------------------------
   2) PREMIUM GLOBE  (planet / "smart choice for the environment" section)
   Replaces the missing /images/green-globe.png flat sphere with a crisp,
   detailed SVG earth + a slow light sweep.
   ------------------------------------------------------------------------- */
.eco-globe {
  background: url("/images/green-globe.svg") center / contain no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 42px 74px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 62px rgba(16, 185, 129, 0.3));
}
/* disable the old flat inner-rim overlay — the SVG carries its own depth */
.eco-globe::after { display: none !important; }
/* rotating specular sweep for a "living" planet */
.eco-globe::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(190, 252, 228, 0.12) 55deg,
      rgba(255, 255, 255, 0) 130deg,
      rgba(255, 255, 255, 0) 360deg);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: ecoGlobeSweep 16s linear infinite;
}
@keyframes ecoGlobeSweep { to { transform: rotate(360deg); } }

/* brighten the orbit rings a touch so they read on the dark bg */
.eco-orbit      { border-color: rgba(94, 234, 212, 0.22) !important; }
.eco-orbit.two  { border-color: rgba(94, 234, 212, 0.13) !important; }

/* glassier planet cards */
.eco-planet-card {
  background: rgba(255, 255, 255, 0.045) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.eco-planet-card:hover {
  background: rgba(94, 234, 212, 0.08) !important;
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------------------------------------
   3) GLOSSY SECTIONS + FAINT BACKGROUND IMAGERY
   ------------------------------------------------------------------------- */

/* ---- Process ("How it works") : faint photo bg + frosted-glass steps ---- */
.eco-process {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf7 100%) !important;
  overflow: hidden;
}
.eco-process::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/services/ASHP03.jpg") center / cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.eco-process-container { position: relative; z-index: 1; }
.eco-process-step {
  position: relative;
  background: rgba(255, 255, 255, 0.66) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 24px 50px -28px rgba(6, 78, 59, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  overflow: hidden;
}
/* glossy diagonal sheen across each step card */
.eco-process-step::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
  border-radius: inherit;
}

/* ---- Boiler Upgrade Scheme : faint photo bg + glossy cards ---- */
.eco-bus { position: relative; overflow: hidden; }
.eco-bus::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/services/ASHP02.jpg") center / cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.eco-bus-container { position: relative; z-index: 1; }
.eco-bus-card {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 26px 54px -30px rgba(15, 43, 38, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.eco-bus-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}
.eco-bus-card > * { position: relative; z-index: 1; }

/* ---- Hero image : add a soft glass reflection sweep ---- */
.eco-h21-image-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-16deg);
  pointer-events: none;
  z-index: 4;
  animation: ecoHeroSheen 7s ease-in-out 1.2s infinite;
}
@keyframes ecoHeroSheen {
  0%   { left: -60%; }
  22%  { left: 130%; }
  100% { left: 130%; }
}

/* -------------------------------------------------------------------------
   4) ACCESSIBILITY — honour reduced-motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.eco-anim-ready .eco-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .eco-globe::before,
  .eco-h21-image-wrap::before { animation: none !important; }
}

/* =========================================================================
   5) FEATURED PROJECT VIDEO  (eco-video)  — added for homepage showcase
   Dark premium band so the vertical project video pops with a soft glow.
   ========================================================================= */
.eco-video {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(16,185,129,0.16), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(6,120,95,0.16), transparent 58%),
    linear-gradient(158deg, #05271f 0%, #073a2e 52%, #04201a 100%);
  color: #e7f3ee;
  isolation: isolate;
}
.eco-video::after {           /* hairline top divider */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94,234,212,0.30), transparent);
  pointer-events: none;
}
.eco-video-glow {
  position: absolute; top: 40%; right: 8%;
  width: 460px; height: 460px; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.30), transparent 66%);
  filter: blur(22px); opacity: 0.5; pointer-events: none; z-index: -1;
  animation: ecoVideoGlow 9s ease-in-out infinite;
}
@keyframes ecoVideoGlow {
  0%,100% { opacity: 0.42; transform: translateY(-50%) scale(1); }
  50%     { opacity: 0.6;  transform: translateY(-50%) scale(1.06); }
}
.eco-video-container {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  padding: 0 clamp(1.15rem, 4vw, 2.5rem);
}
.eco-video-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* ---- left column ---- */
.eco-video-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: #5eead4; margin-bottom: 1.3rem;
}
.eco-video-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, #5eead4, rgba(94,234,212,0.15));
}
.eco-video-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.028em;
  color: #ffffff; margin: 0 0 1.3rem;
}
.eco-video-title .accent {
  background: linear-gradient(92deg, #5eead4, #34d399);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #34d399;
}
.eco-video-sub {
  font-size: 1.04rem; line-height: 1.75; color: #a6c2b6;
  margin: 0 0 1.8rem; max-width: 38rem;
}
.eco-video-points { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; gap: 0.75rem; }
.eco-video-points li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.96rem; font-weight: 500; color: #d7e8e0;
}
.eco-video-tick {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #04231c; background: linear-gradient(180deg, #5eead4, #34d399);
  box-shadow: 0 6px 14px -6px rgba(52,211,153,0.7);
}
.eco-video-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.eco-video-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.7rem; border-radius: 12px;
  font-weight: 600; font-size: 0.95rem; color: #04231c;
  background: linear-gradient(180deg, #34d399, #0f9d70);
  box-shadow: 0 12px 28px -14px rgba(16,185,129,0.65);
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.eco-video-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(16,185,129,0.8); }
.eco-video-cta svg { transition: transform 280ms ease; }
.eco-video-cta:hover svg { transform: translateX(4px); }
.eco-video-note {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; font-weight: 500; color: #a6c2b6;
}
.eco-video-note svg { color: #34d399; flex-shrink: 0; }

/* ---- right column: framed vertical video ---- */
.eco-video-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.eco-video-frame {
  position: relative;
  width: min(78vw, 360px);
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  padding: 8px;
  background: linear-gradient(150deg, rgba(94,234,212,0.5), rgba(16,185,129,0.12) 45%, rgba(4,31,25,0.4));
  box-shadow:
    0 44px 90px -34px rgba(0,0,0,0.8),
    0 0 70px -12px rgba(16,185,129,0.45);
  animation: ecoVideoFloat 8s ease-in-out infinite;
}
@keyframes ecoVideoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.eco-video-frame::before {            /* rotating conic glow ring */
  content: ""; position: absolute; inset: -2px; border-radius: 28px; z-index: -1;
  background: conic-gradient(from 0deg, transparent, rgba(94,234,212,0.55), transparent 40%, transparent 60%, rgba(52,211,153,0.5), transparent);
  animation: ecoVideoRing 6s linear infinite; filter: blur(2px);
}
@keyframes ecoVideoRing { to { transform: rotate(360deg); } }
.eco-video-player {
  width: 100%; height: 100%; display: block;
  border-radius: 19px; object-fit: cover;
  background: #04201a;
}
.eco-video-badge {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #e7f3ee;
  background: rgba(4,28,22,0.82);
  border: 1px solid rgba(94,234,212,0.26);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eco-video-badge svg { color: #34d399; }
.eco-video-badge.top { top: 1rem; left: -1.1rem; animation: ecoVideoFloatB 6s ease-in-out infinite; }
.eco-video-badge.bottom { bottom: 1rem; right: -1.1rem; animation: ecoVideoFloatB 6s ease-in-out infinite 3s; }
.eco-video-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: ecoVideoPing 2s ease-out infinite;
}
@keyframes ecoVideoPing { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55);} 70%,100% { box-shadow: 0 0 0 8px rgba(52,211,153,0);} }
@keyframes ecoVideoFloatB { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }

/* sound toggle */
.eco-video-sound {
  position: absolute; bottom: 0.85rem; left: 0.85rem; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #04231c; background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,0.6);
  transition: transform 220ms ease, background 220ms ease;
}
.eco-video-sound:hover { transform: scale(1.08); }
.eco-video-sound .ic-sound { display: none; }
.eco-video-sound.is-on { background: linear-gradient(180deg, #34d399, #0f9d70); color: #04231c; }
.eco-video-sound.is-on .ic-sound { display: block; }
.eco-video-sound.is-on .ic-muted { display: none; }

@media (max-width: 980px) {
  .eco-video-grid { grid-template-columns: 1fr; gap: 3rem; }
  .eco-video-visual { order: -1; }
  .eco-video-glow { top: 20%; right: 14%; width: 320px; height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-video-glow, .eco-video-frame, .eco-video-frame::before,
  .eco-video-badge.top, .eco-video-badge.bottom, .eco-video-badge .dot { animation: none !important; }
}

/* =========================================================================
   6) MINIMAL RESTYLE  — "simple & plain, premium" pass (added 2026-07-29)
   Loaded last so it calms the busy gradient/animated look site-wide on the
   homepage: removes decorative blobs & textures, flattens backgrounds,
   unifies colour to a single brand green, and simplifies cards.
   All override-only — nothing removed from markup; fully reversible.
   ========================================================================= */

/* --- a) Remove decorative clutter: floating blobs, glows & SVG textures --- */
[class*="mix-blend-multiply"] { display: none !important; }               /* blur blobs */
[class*="data:image/svg+xml"] { display: none !important; }               /* grid + noise overlays */

/* --- b) Flatten big background gradients to clean solids --- */
section[class*="from-slate-50"] { background: #ffffff !important; }        /* services band */
/* header top-bar, why-choose, footer -> flat dark. The section selector is
   raised in specificity to beat custom-polish's !important radial-gradient. */
[class*="from-slate-900"][class*="to-emerald-900"],
section[class*="from-slate-900"][class*="to-emerald-900"],
section[class*="bg-gradient-to-br"][class*="from-slate-900"],
footer[class*="from-slate-900"] { background: #0e241e !important; }
/* hide the green hover-overlay inside "Why Choose" cards (kept the icon tiles) */
.choose-card [class*="bg-gradient-to-r"] { display: none !important; }
[class*="from-emerald-600/20"] { background: rgba(255,255,255,0.05) !important; }

/* --- c) Unify multi-colour gradients (buttons, banners, icon tiles) to
         one brand green. Keeps foreground readable. --- */
[class*="from-emerald-6"][class*="to-teal-6"],
[class*="from-emerald-5"][class*="to-teal-5"],
[class*="from-emerald-6"][class*="to-cyan-6"],
[class*="from-emerald-5"][class*="to-cyan-5"],
[class*="from-cyan-5"][class*="to-blue-5"],
[class*="from-purple-5"][class*="to-pink-5"],
[class*="from-emerald-400"] {
  background-image: none !important;
  background-color: #0f9d70 !important;
}

/* --- d) Calm gradient TEXT to a single accent (runs after c so text wins) --- */
[class*="bg-clip-text"],
.eco-section-title .accent,
.eco-planet-title .accent,
.eco-video-title .accent,
.eco-bus-amount,
.eco-h21-stat-value {
  background-image: none !important;
  -webkit-text-fill-color: #0f9d70 !important;
  color: #0f9d70 !important;
}

/* --- e) Simplify cards: flat white, thin border, soft shadow (no glass) --- */
.service-card {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid #e6ece9 !important;
  box-shadow: 0 1px 2px rgba(15,43,38,0.04), 0 14px 34px -24px rgba(15,43,38,0.28) !important;
}
.service-card [class*="from-black"] { display: none !important; }         /* dark image overlay */
.service-card [class*="via-white/20"] { display: none !important; }       /* hover shine sweep */

/* my earlier glossy sections -> plain */
.eco-process::after, .eco-bus::after,
.eco-process-step::after, .eco-bus-card::after,
.eco-h21-image-wrap::before { display: none !important; }
.eco-process, .eco-bus { background: #ffffff !important; }
.eco-process-step, .eco-bus-card {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid #e6ece9 !important;
  box-shadow: 0 1px 2px rgba(15,43,38,0.04), 0 16px 38px -26px rgba(15,43,38,0.28) !important;
}
.eco-bus-card-featured { background: #f5faf8 !important; border-color: #cfe7dd !important; }

/* process number bubbles + icons -> single accent */
.eco-process-step .eco-process-num {
  background: #0f9d70 !important; box-shadow: none !important;
}
.eco-process-step .eco-process-icon {
  background: #eaf5f0 !important; color: #0f9d70 !important;
}

/* --- f) Dark feature sections -> flat solid, glows dialled down --- */
.eco-planet, .eco-video { background: #0e241e !important; }
.eco-planet::before, .eco-video::after { display: none !important; }
.eco-planet-glow, .eco-video-glow { opacity: 0.22 !important; animation: none !important; }
.eco-planet-card { background: rgba(255,255,255,0.04) !important; }

/* video frame: calmer (no rotating ring / float), still framed & premium */
.eco-video-frame { animation: none !important; background: #123a30 !important;
  box-shadow: 0 30px 60px -32px rgba(0,0,0,0.6) !important; }
.eco-video-frame::before { display: none !important; }
.eco-video-badge.top, .eco-video-badge.bottom { animation: none !important; }

/* --- g) Reduce heavy shadows globally on Tailwind cards --- */
[class*="shadow-2xl"] { box-shadow: 0 18px 40px -26px rgba(15,43,38,0.3) !important; }

/* --- h) BUS CTA banner: flat, calm (tame the amber glow) --- */
.eco-bus-cta { background: #0e3b2c !important; }
.eco-bus-cta::before { display: none !important; }
.eco-bus-cta-btn { box-shadow: 0 10px 24px -12px rgba(0,0,0,0.45) !important; }

/* --- i) Kill the alternating green/cyan/cream card tints -> clean white --- */
.service-card:nth-child(3n+1),
.service-card:nth-child(3n+2),
.service-card:nth-child(3n+3) { background: #ffffff !important; }