/* A shared moving atmosphere, with local service identities and native scrolling. */
@property --atmosphere-color { syntax:'<color>'; inherits:true; initial-value:#08a7e8; }
@property --atmosphere-secondary { syntax:'<color>'; inherits:true; initial-value:#7bdbc2; }
body { isolation:isolate; }
.site-atmosphere {
  --atmosphere-color:var(--mood-color);
  --atmosphere-secondary:var(--mood-secondary);
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  contain:strict;
  transition:--atmosphere-color .8s ease,--atmosphere-secondary .8s ease;
}
html[data-service-preview=cooling] .site-atmosphere { --atmosphere-color:var(--brand-cooling); --atmosphere-secondary:#8499e4; }
html[data-service-preview=heating] .site-atmosphere { --atmosphere-color:var(--brand-accent); --atmosphere-secondary:#d9828c; }
html[data-service-preview=air] .site-atmosphere { --atmosphere-color:var(--brand-air); --atmosphere-secondary:#bfdc95; }
.site-atmosphere-radiance {
  position:absolute; inset:-20%;
  transform:translate3d(calc(var(--atmosphere-shift-x,0px) * -.4),var(--atmosphere-halo-y,0px),0);
}
.site-atmosphere-halo {
  position:absolute; width:80%; height:100%; left:38%; top:-10%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--atmosphere-color) 11%,transparent),transparent 64%);
  animation:site-halo-breathe 24s ease-in-out infinite alternate;
}
.site-atmosphere-halo--warm {
  left:-35%; top:15%; width:90%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--atmosphere-secondary) 8%,transparent),transparent 64%);
  animation-duration:31s; animation-direction:alternate-reverse;
}
.site-airflow {
  position:absolute; inset:-15%; width:130%; height:130%; overflow:visible;
  color:var(--atmosphere-color);
  transform:translate3d(var(--atmosphere-shift-x,0px),var(--atmosphere-shift-y,0px),0) rotate(var(--atmosphere-turn,0deg));
}
.site-airflow path { fill:none; stroke:currentColor; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.site-airflow-lines { stroke-width:1; opacity:.14; }
.site-airflow-lines path:nth-child(2) { opacity:.65; }
.site-airflow-lines path:nth-child(3) { opacity:.35; }
.site-airflow-secondary { color:var(--atmosphere-secondary); }
.site-airflow-traces path { stroke-width:1.8; stroke-dasharray:30 970; opacity:.5; animation:site-airflow-pass 25s linear infinite; }
.site-airflow-traces .site-airflow-secondary { animation-duration:34s; animation-direction:reverse; stroke-dasharray:18 982; opacity:.36; }
.site-atmosphere-texture {
  position:absolute; inset:0; opacity:.32;
  background-image:radial-gradient(color-mix(in srgb,var(--atmosphere-color) 23%,transparent) .6px,transparent .6px);
  background-size:34px 34px;
  mask-image:linear-gradient(110deg,#000,transparent 40%,transparent 65%,#000);
}
@keyframes site-halo-breathe { from { transform:translate3d(-2%,-2%,0) scale(.96); } to { transform:translate3d(3%,3%,0) scale(1.06); } }
@keyframes site-airflow-pass { to { stroke-dashoffset:-1000; } }

/* The announcement has one soft sweep and a spaced double heartbeat, never a flash. */
.announcement { position:relative; isolation:isolate; overflow:hidden; background:color-mix(in srgb,var(--brand-primary) 64%,var(--brand-background)); }
.announcement .wrap { position:relative; z-index:1; min-height:42px; gap:11px; font-size:11px; }
.announcement::after {
  content:''; position:absolute; z-index:0; pointer-events:none; inset:0 auto 0 0; width:26%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--brand-cooling) 12%,transparent),color-mix(in srgb,var(--brand-accent) 8%,transparent),transparent);
  transform:translateX(-110%) skewX(-18deg); animation:announcement-sweep 11s ease-in-out infinite;
}
.announcement .wrap>span.announcement-bolt:first-child {
  display:grid; flex:0 0 27px; place-items:center; width:27px; height:27px;
  border:1px solid color-mix(in srgb,var(--brand-accent) 34%,transparent); border-radius:50%;
  background:color-mix(in srgb,var(--brand-accent) 9%,transparent); color:var(--brand-accent);
  box-shadow:0 0 17px -7px var(--brand-accent);
  animation:announcement-heartbeat 4.8s ease-in-out infinite;
}
.announcement-bolt svg { width:18px; height:18px; fill:currentColor; }
.announcement a { color:var(--ink); }
@keyframes announcement-heartbeat {
  0%,30%,100% { transform:scale(1); }
  8% { transform:scale(1.15); }
  15% { transform:scale(1); }
  22% { transform:scale(1.09); }
}
@keyframes announcement-sweep { 0%,18% { transform:translateX(-110%) skewX(-18deg); } 70%,100% { transform:translateX(500%) skewX(-18deg); } }

/* Cards keep their own identity on touch screens and when motion is disabled. */
.service-card[data-service-atmosphere] {
  --service-color:var(--brand-cooling); --service-link:var(--brand-link);
  background:linear-gradient(135deg,#ffffff07,#ffffff02),color-mix(in srgb,var(--brand-primary) 63%,var(--brand-background));
  border-color:color-mix(in srgb,var(--service-color) 24%,var(--line));
  transition:transform .4s var(--ease),box-shadow .4s ease,border-color .4s ease;
}
html[data-motion=ready] .service-card[data-service-atmosphere].reveal { transition:opacity .8s var(--ease),translate .8s var(--ease),transform .4s var(--ease),box-shadow .4s ease,border-color .4s ease; }
.service-card[data-service-atmosphere=heating] { --service-color:var(--brand-accent); --service-link:var(--heating-link); }
.service-card[data-service-atmosphere=air] { --service-color:var(--brand-air); --service-link:var(--air-link); }
.service-card[data-service-atmosphere]::after { display:none; }
.service-card[data-service-atmosphere]::before { background:radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--service-color) 19%,transparent),transparent 66%); }
.service-card-atmosphere {
  position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.6;
  background:radial-gradient(ellipse at 105% 0%,color-mix(in srgb,var(--service-color) 19%,transparent),transparent 64%);
  transition:opacity .5s ease,transform .7s var(--ease);
}
.service-card-atmosphere::after {
  content:''; position:absolute; inset:45% -30% -65% 12%; border:1px solid color-mix(in srgb,var(--service-color) 17%,transparent); border-radius:50%;
  box-shadow:0 0 0 20px color-mix(in srgb,var(--service-color) 4%,transparent),0 0 0 40px color-mix(in srgb,var(--service-color) 2%,transparent);
  transform:rotate(-22deg);
}
.service-card[data-service-atmosphere=heating] .service-card-atmosphere { background:radial-gradient(ellipse at 100% 10%,color-mix(in srgb,var(--service-color) 21%,transparent),transparent 68%); }
.service-card[data-service-atmosphere=air] .service-card-atmosphere::after { inset:38% -25% -65% -25%; transform:rotate(15deg); }
.service-card-orbit {
  position:absolute; width:150px; height:150px; right:-58px; top:-65px; border:1px solid color-mix(in srgb,var(--service-color) 27%,transparent); border-radius:50%;
  pointer-events:none; opacity:.55; transition:opacity .5s ease,transform .7s var(--ease);
  box-shadow:0 0 0 16px color-mix(in srgb,var(--service-color) 4%,transparent),0 0 0 32px color-mix(in srgb,var(--service-color) 2%,transparent);
}
.service-card-orbit::after {
  content:''; position:absolute; inset:0; border:1px solid transparent; border-right-color:var(--service-color); border-radius:inherit;
  animation:service-orbit-turn 16s linear infinite;
}
.service-card[data-service-atmosphere] .icon-disc { color:var(--service-link); background:color-mix(in srgb,var(--service-color) 12%,var(--brand-background)); border:1px solid color-mix(in srgb,var(--service-color) 25%,transparent); }
.service-card[data-service-atmosphere] .text-link { color:var(--service-link); }
.service-card[data-service-atmosphere]:is(:hover,:focus-within) { border-color:color-mix(in srgb,var(--service-color) 60%,transparent); box-shadow:0 24px 60px #0006,0 0 42px -20px var(--service-color),var(--glass-shine); }
.service-card[data-service-atmosphere]:focus-visible { outline-color:var(--service-link); }
.service-card[data-service-atmosphere]:is(:hover,:focus-within) .service-card-atmosphere { opacity:1; transform:scale(1.06); }
.service-card[data-service-atmosphere]:is(:hover,:focus-within) .service-card-orbit { opacity:1; transform:translate(-5px,5px); }
.service-card[data-service-atmosphere]:focus-within::before { opacity:1; }
@keyframes service-orbit-turn { to { transform:rotate(360deg); } }

/* Pause holds animation frames; reduced motion uses a fully static treatment. */
:root { --apex-animation-play-state:paused; }
html[data-ambient-motion=running] { --apex-animation-play-state:running; }
/* Explicit selectors outrank animation shorthands, including SVG path rules. */
.site-atmosphere .site-atmosphere-halo,
.site-atmosphere .site-airflow-traces path,
.announcement .wrap>span.announcement-bolt:first-child,
.announcement::after,
.service-card-orbit::after { animation-play-state:var(--apex-animation-play-state); }
html[data-ambient-motion=paused] .site-atmosphere,
html[data-ambient-motion=paused] .service-card[data-service-atmosphere],
html[data-ambient-motion=paused] .service-card[data-service-atmosphere]::before,
html[data-ambient-motion=paused] .service-card-atmosphere,
html[data-ambient-motion=paused] .service-card-orbit { transition:none; }
html[data-ambient-motion=paused] .service-card[data-service-atmosphere]:hover,
html[data-ambient-motion=paused] .service-card-atmosphere,
html[data-ambient-motion=paused] .service-card-orbit { transform:none; }
@media(max-width:767px) {
  .site-airflow-lines { opacity:.12; }
  .site-airflow-traces path { opacity:.3; }
  .site-atmosphere-texture { opacity:.2; }
  .announcement .wrap { font-size:10px; line-height:1.5; gap:9px; padding-block:7px; }
  .announcement .wrap>span.announcement-bolt:first-child { display:grid; flex-basis:23px; width:23px; height:23px; color:var(--brand-accent); }
  .announcement-bolt svg { width:15px; height:15px; }
  .announcement a { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-atmosphere, .site-atmosphere *, .announcement::after, .announcement-bolt,
  .service-card[data-service-atmosphere], .service-card[data-service-atmosphere]::before,
  .service-card-atmosphere, .service-card-orbit, .service-card-orbit::after { animation:none!important; transition:none!important; }
  .site-airflow, .site-atmosphere-radiance, .service-card-atmosphere, .service-card-orbit { transform:none!important; }
  .announcement::after { display:none; }
}
