/* Sunstorm Home family motion and polish for Air and Insulation (Claude, October 6 2026).
 * Smart header, menu motion and hero entrances for /air/ and /insulation/.
 * Decoration only: no copy, links, forms or tracking change. All movement
 * stops for visitors who ask for reduced motion.
 */
.air-page{--fm-accent:#227598;--fm-accent2:#7fd3f5}
.ins-page{--fm-accent:#ba7817;--fm-accent2:#f3bf58}

/* ---------- smart header ---------- */
html.fm-on .family-header{--fm-h0:94px;--fm-h1:70px}
html.fm-on .family-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fm-accent);transform-origin:left center;transform:scaleX(var(--fm-progress,0));opacity:.85;pointer-events:none}
html.fm-scrolled .family-header{box-shadow:0 12px 30px -20px rgba(19,36,58,.45);margin-bottom:calc(var(--fm-h0) - var(--fm-h1))}
html.fm-scrolled .family-header .navline{height:var(--fm-h1)}
html.fm-scrolled .family-header .home-logo img{transform:scale(.8)}
html.fm-on .family-header .home-logo img{transform-origin:left center}
@media (max-width:700px){
 html.fm-on .family-header{--fm-h0:79px;--fm-h1:62px}
 html.fm-scrolled .family-header .home-logo img{transform:scale(.84)}
}

/* ---------- menus ---------- */
@media (min-width:701px){
 .family-main-nav>a,.family-main-nav .service-menu>summary{position:relative}
 .family-main-nav>a::after,.family-main-nav .service-menu>summary::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:var(--fm-accent);transform:scaleX(0);transform-origin:left center}
 .family-main-nav>a:hover::after,.family-main-nav>a:focus-visible::after,.family-main-nav .service-menu>summary:hover::after,.family-main-nav .service-menu[open]>summary::after{transform:scaleX(1)}
 /* plain links are only as tall as their text, so their line sits just below it, level with the Our services line */
 .family-main-nav>a::after{bottom:-6px}
 .service-menu[open]>summary>span{transform:rotate(180deg)}
 .service-menu>summary>span{display:inline-block}
}
.header-contact a{transition:background-color .2s,border-color .2s,transform .2s}
@media (hover:hover){.header-contact a:hover{transform:translateY(-1px)}}

/* ---------- Air hero ---------- */
.air-hero{position:relative;isolation:isolate}
.air-hero>.wrap{position:relative;z-index:1}
.air-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='240' viewBox='0 0 900 240'%3E%3Cg fill='none' stroke='%237fd3f5' stroke-linecap='round'%3E%3Cpath d='M0 60 C150 20 300 100 450 60 S750 20 900 60' stroke-width='2' stroke-opacity='.55'/%3E%3Cpath d='M0 120 C150 80 300 160 450 120 S750 80 900 120' stroke-width='1.5' stroke-opacity='.4'/%3E%3Cpath d='M0 180 C150 140 300 220 450 180 S750 140 900 180' stroke-width='2' stroke-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 62%/900px 240px repeat-x}
.air-page .air-hero-visual>img{transform:translate(var(--fm-px,0),var(--fm-py,0))}
.air-page .air-page-nav a[aria-current="true"]{color:#18384b;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--fm-accent)}
@media (min-width:761px){
 html.fm-on .air-page .air-page-nav{position:sticky;top:var(--fm-header-h,94px);z-index:20;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 100vmax rgba(255,255,255,.94);clip-path:inset(0 -100vmax)}
 html.fm-on .air-page .air-main section[id]{scroll-margin-top:calc(var(--fm-header-h,94px) + 78px)}
}

/* ---------- Insulation hero ---------- */
.ins-hero{position:relative;isolation:isolate}
.ins-hero>.wrap{position:relative;z-index:1}
.ins-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(34% 55% at 84% 18%,rgba(243,191,88,.26),rgba(243,191,88,0) 70%),radial-gradient(28% 45% at 62% 92%,rgba(186,120,23,.12),rgba(186,120,23,0) 70%);background-size:140% 140%}
.ins-page .ins-hero-gallery{transform:translate(var(--fm-px,0),var(--fm-py,0))}
.ins-hero-option{isolation:isolate}
.ins-hero-option::before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0;pointer-events:none}
.ins-hero-option:focus-visible{outline:3px solid #aa6a0c;outline-offset:3px}

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
 html.fm-on .family-header,html.fm-on .family-header .navline,html.fm-on .family-header .home-logo img{transition:height .3s ease,margin .3s ease,transform .3s ease,box-shadow .3s ease}
 html.fm-on .family-header::after{transition:transform .1s linear}
 .family-main-nav>a::after,.family-main-nav .service-menu>summary::after{transition:transform .25s ease}
 .service-menu>summary>span{transition:transform .25s ease}
 .service-menu[open]>.service-panel{animation:fm-drop .28s cubic-bezier(.2,.7,.2,1) both}
 .service-menu[open]>.service-panel>*{animation:fm-in .32s cubic-bezier(.2,.7,.2,1) both}
 .service-menu[open]>.service-panel>*:nth-child(2){animation-delay:.04s}.service-menu[open]>.service-panel>*:nth-child(3){animation-delay:.08s}.service-menu[open]>.service-panel>*:nth-child(4){animation-delay:.12s}
 .family-main-nav.is-open{animation:fm-drop .3s cubic-bezier(.2,.7,.2,1) both}
 .family-main-nav.is-open>*{animation:fm-in .34s cubic-bezier(.2,.7,.2,1) both}
 .family-main-nav.is-open>*:nth-child(2){animation-delay:.04s}.family-main-nav.is-open>*:nth-child(3){animation-delay:.08s}.family-main-nav.is-open>*:nth-child(4){animation-delay:.12s}

 /* Air */
 .air-hero::before{animation:fm-drift 40s linear infinite}
 .air-hero-copy>*{animation:fm-rise .8s cubic-bezier(.2,.7,.2,1) both}
 .air-hero-copy>:nth-child(1){animation-delay:.05s}.air-hero-copy>:nth-child(2){animation-delay:.12s}.air-hero-copy>:nth-child(3){animation-delay:.2s}.air-hero-copy>:nth-child(4){animation-delay:.3s}.air-hero-copy>:nth-child(5){animation-delay:.4s}.air-hero-copy>:nth-child(6){animation-delay:.5s}
 .air-page .air-main h1 em{background:linear-gradient(100deg,var(--fm-accent) 0 42%,var(--fm-accent2) 50%,var(--fm-accent) 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fm-glint 1.6s ease 1s both}
 .air-hero-visual{animation:fm-rise 1s cubic-bezier(.2,.7,.2,1) .15s both}
 .air-page .air-hero-visual>img{animation:fm-wipe 1.2s cubic-bezier(.2,.7,.2,1) .2s backwards;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
 .air-photo-caption{animation:fm-rise .8s cubic-bezier(.2,.7,.2,1) .9s both}
 .air-caption-mark{animation:fm-ping 2.8s ease-out 1.8s 2}
 .air-page .air-actions .air-primary{position:relative;overflow:hidden}
 .air-page .air-actions .air-primary::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:35%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:skewX(-18deg);animation:fm-shine 1.1s ease 1.4s both;pointer-events:none}

 /* Insulation */
 .ins-hero::before{animation:fm-warm 16s ease-in-out infinite alternate}
 .ins-hero-copy>*{animation:fm-rise .8s cubic-bezier(.2,.7,.2,1) both}
 .ins-hero-copy>:nth-child(1){animation-delay:.05s}.ins-hero-copy>:nth-child(2){animation-delay:.12s}.ins-hero-copy>:nth-child(3){animation-delay:.2s}.ins-hero-copy>:nth-child(4){animation-delay:.3s}.ins-hero-copy>:nth-child(5){animation-delay:.4s}
 .ins-page .ins-hero h1 em{background:linear-gradient(100deg,#a9690a 0 42%,var(--fm-accent2) 50%,#a9690a 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fm-glint 1.6s ease 1s both}
 .ins-hero-option{animation:fm-pop .7s cubic-bezier(.2,.7,.2,1) both}
 .ins-hero-option:nth-child(1){animation-delay:.25s}.ins-hero-option:nth-child(2){animation-delay:.4s}.ins-hero-option:nth-child(3){animation-delay:.55s}
 .ins-gallery-note{animation:fm-fade .6s ease .9s both}
 .ins-page .ins-hero-gallery{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
 .ins-hero-option img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s}
 @media (hover:hover) and (min-width:701px){
  .ins-hero-option{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .ins-hero-option:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(16,23,45,.6)}
  .ins-hero-option:hover img{transform:scale(1.05)}
  .ins-hero-option:hover::before{animation:fm-sweep .9s ease}
 }
}
@keyframes fm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fm-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fm-fade{from{opacity:0}to{opacity:1}}
@keyframes fm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes fm-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fm-glint{from{background-position:100% 0}to{background-position:0 0}}
@keyframes fm-wipe{from{clip-path:inset(0 0 0 100% round 80px 20px 20px 20px);transform:scale(1.06)}to{clip-path:inset(0 0 0 0 round 80px 20px 20px 20px);transform:translate(var(--fm-px,0),var(--fm-py,0))}}
@keyframes fm-ping{0%{box-shadow:0 0 0 0 rgba(34,117,152,.35)}100%{box-shadow:0 0 0 14px rgba(34,117,152,0)}}
@keyframes fm-shine{from{left:-50%}to{left:130%}}
@keyframes fm-sweep{from{left:-60%;opacity:1}to{left:130%;opacity:1}}
@keyframes fm-drift{from{background-position:0 62%}to{background-position:-900px 62%}}
@keyframes fm-warm{from{background-position:0 0}to{background-position:100% 60%}}
@media (max-width:760px){
 @keyframes fm-wipe{from{clip-path:inset(0 0 0 100% round 40px 14px 14px 14px);transform:scale(1.06)}to{clip-path:inset(0 0 0 0 round 40px 14px 14px 14px);transform:none}}
}