/* Sunstorm Home hub: header and hero motion (Claude, October 7 2026).
 * Uses the shared family-motion header from /family-motion-20261006/ and adds
 * the hub's own entrance, tile depth and scroll reveals. Decoration only:
 * no copy, links or forms change. Everything stays still for reduced motion.
 */
html.fm-on .family-header{--fm-accent:#187ca4}

/* Air and Insulation tiles get the same caption style as Energy and Water */
.mosaic-tile.air>div>small,.mosaic-tile.insulation>div>small{color:#f5fbff;border:0;background:none;border-radius:0;padding:0;font:600 11px/1.5 OpenSans,Arial,sans-serif;letter-spacing:.025em}
.mosaic-tile.air>div>small:before,.mosaic-tile.insulation>div>small:before{width:17px;height:3px;border-radius:2px}
@media(max-width:1100px){.mosaic-tile.air>div>small,.mosaic-tile.insulation>div>small{font-size:10px}}
@media(max-width:700px){.mosaic-tile.air>div>small,.mosaic-tile.insulation>div>small{font-size:10px;letter-spacing:0;padding:0}.mosaic-tile.air>div>small:before,.mosaic-tile.insulation>div>small:before{width:12px}}
@media(max-width:360px){.mosaic-tile.air>div>small,.mosaic-tile.insulation>div>small{font-size:9px;padding:0}}

/* depth for the cursor drift (desktop mouse only, set by hub.js) */
.home-mosaic .mosaic-tile{translate:var(--hm-x,0) var(--hm-y,0)}
.home-mosaic:before{translate:calc(var(--hm-x,0px) * -1.4) calc(var(--hm-y,0px) * -1.4)}

@media (prefers-reduced-motion:no-preference){
 /* hero copy rises in, then "better." catches the light once */
 .hero-copy>*{animation:fm-rise .8s cubic-bezier(.2,.7,.2,1) both}
 .hero-copy>:nth-child(1){animation-delay:.05s}.hero-copy>:nth-child(2){animation-delay:.12s}.hero-copy>:nth-child(3){animation-delay:.22s}.hero-copy>:nth-child(4){animation-delay:.32s}.hero-copy>:nth-child(5){animation-delay:.42s}
 .hero-copy h1 em{background:linear-gradient(100deg,#1d698e 0 40%,#7fd3f5 50%,#1995bf 60% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fm-glint 1.6s ease 1.05s both}
 .hero-copy .button{position:relative;overflow:hidden}
 .hero-copy .button::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,.65),rgba(255,255,255,0));transform:skewX(-18deg);animation:fm-shine 1.1s ease 1.5s both;pointer-events:none}
 .hero-local:before{animation:hm-ping 2.6s ease-out 1.9s 2}

 /* the four tiles open one after another, captions follow */
 .home-mosaic .mosaic-tile{animation:hm-tile .85s cubic-bezier(.2,.7,.2,1) backwards}
 .home-mosaic .mosaic-tile:nth-child(1){animation-delay:.18s}.home-mosaic .mosaic-tile:nth-child(2){animation-delay:.3s}.home-mosaic .mosaic-tile:nth-child(3){animation-delay:.42s}.home-mosaic .mosaic-tile:nth-child(4){animation-delay:.54s}
 .home-mosaic .mosaic-tile>img{animation:hm-settle 1.6s cubic-bezier(.2,.7,.2,1) backwards}
 .home-mosaic .mosaic-tile>div{animation:fm-rise .7s cubic-bezier(.2,.7,.2,1) backwards}
 .home-mosaic .mosaic-tile:nth-child(1)>div{animation-delay:.6s}.home-mosaic .mosaic-tile:nth-child(2)>div{animation-delay:.72s}.home-mosaic .mosaic-tile:nth-child(3)>div{animation-delay:.84s}.home-mosaic .mosaic-tile:nth-child(4)>div{animation-delay:.96s}
 .home-mosaic .mosaic-tile>div>small:before{transform-origin:left center;animation:hm-bar .6s cubic-bezier(.2,.7,.2,1) backwards}
 .home-mosaic .mosaic-tile:nth-child(1)>div>small:before{animation-delay:.9s}.home-mosaic .mosaic-tile:nth-child(2)>div>small:before{animation-delay:1.02s}.home-mosaic .mosaic-tile:nth-child(3)>div>small:before{animation-delay:1.14s}.home-mosaic .mosaic-tile:nth-child(4)>div>small:before{animation-delay:1.26s}
 .home-mosaic:before{animation:hm-ring 1.4s cubic-bezier(.2,.7,.2,1) .1s both, hm-breathe 9s ease-in-out 1.6s infinite alternate}
 .home-mosaic .mosaic-tile,.home-mosaic:before{transition:translate .7s cubic-bezier(.2,.7,.2,1)}
 @media (hover:hover) and (pointer:fine){
  .mosaic-tile{isolation:isolate}
  .mosaic-tile>div{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .mosaic-tile:hover>div{transform:translateY(-4px)}
 }

 /* sections below the hero reveal as they arrive (only once hub.js is running) */
 html.hm-on .hm-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
 html.hm-on .hm-reveal.hm-in{opacity:1;transform:none}
 html.hm-on .service-card.hm-reveal .card-body{border-top-color:transparent;transition:border-color .4s ease .25s}
 html.hm-on .service-card.hm-reveal.hm-in .card-body{border-top-color:var(--accent)}
 .journey-photo img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
 @media (hover:hover) and (pointer:fine){.journey-card:hover .journey-photo img{transform:scale(1.04)}}
}
@keyframes hm-tile{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@keyframes hm-settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes hm-bar{from{transform:scaleX(0)}to{transform:none}}
@keyframes hm-ring{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1.18)}}
@keyframes hm-breathe{from{transform:scale(1.18)}to{transform:scale(1.23)}}
@keyframes hm-ping{0%{box-shadow:0 0 0 0 rgba(24,124,164,.4)}100%{box-shadow:0 0 0 10px rgba(24,124,164,0)}}