/* Sunstorm top-of-page motion (proposal, October 5 2026).
 * Header, menu and hero polish for sunstorm.energy and sunstormhome.com.
 * CSS only changes how existing elements move; no copy, markup, forms or
 * links change. The small companion script only toggles classes and CSS
 * variables on <html>. Everything here switches off for visitors who ask for
 * reduced motion.
 */
:root{--ssm-ease:cubic-bezier(.2,.7,.2,1);--ssm-progress:0;--ssm-px:0px;--ssm-py:0px}

/* ---------- Smart header (needs the script: html.ssm-on / html.ssm-scrolled) ---------- */
html.ssm-on body .site-header{position:sticky;top:0;transition:box-shadow .35s,background-color .35s}
html.ssm-scrolled body .site-header{box-shadow:0 12px 30px -20px rgba(19,36,58,.5)}
html.ssm-on body .site-header::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--ssm-progress) * 100%);background:#ffc34c;opacity:0;transition:opacity .3s;pointer-events:none}
html.ssm-scrolled body .site-header::after{opacity:1}
/* Energy: the family row tucks away and the nav row slims down */
html.ssm-on body .site-header .family-switcher{max-height:64px;overflow:hidden;transition:max-height .35s var(--ssm-ease),opacity .25s}
html.ssm-scrolled body .site-header .family-switcher{max-height:0;opacity:0}
html.ssm-scrolled body .site-header .family-switcher details[open]{display:none}
html.ssm-on body .site-header .nav-row{transition:min-height .35s var(--ssm-ease)}
html.ssm-scrolled body .site-header .nav-row{min-height:64px}
html.ssm-on body .site-header .brand img{transition:transform .35s var(--ssm-ease);transform-origin:left center}
html.ssm-scrolled body .site-header .brand img{transform:scale(.84)}
/* Water: the header slims down; the blue line marks progress */
html.ssm-on body .wf-header::after{background:#187fb5}
html.ssm-on body .wf-header .wf-shell{transition:min-height .35s var(--ssm-ease)}
html.ssm-scrolled body .wf-header .wf-shell{min-height:66px}
html.ssm-on body .wf-header .wf-brand img{transition:transform .35s var(--ssm-ease);transform-origin:left center}
html.ssm-scrolled body .wf-header .wf-brand img{transform:scale(.84)}

@media (prefers-reduced-motion:no-preference){
  /* ---------- Menus ---------- */
  .desktop-nav>a,.desktop-nav .nav-dropdown>summary,.wf-nav>a,.wf-nav .wf-dropdown>summary{position:relative}
  .desktop-nav>a::after,.desktop-nav .nav-dropdown>summary::after,.wf-nav>a::after,.wf-nav .wf-dropdown>summary::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#ffc34c;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ssm-ease);pointer-events:none}
  .wf-nav>a::after,.wf-nav .wf-dropdown>summary::before{background:#187fb5}
  .desktop-nav>a:hover::after,.desktop-nav .nav-dropdown>summary:hover::after,.desktop-nav .nav-dropdown[open]>summary::after,.wf-nav>a:hover::after,.wf-nav>a[aria-current="page"]::after,.wf-nav .wf-dropdown>summary:hover::before,.wf-nav .wf-dropdown[open]>summary::before{transform:scaleX(1)}
  .desktop-nav .nav-dropdown>summary>span{display:inline-block;transition:transform .25s var(--ssm-ease)}
  .desktop-nav .nav-dropdown[open]>summary>span{transform:rotate(180deg)}
  .nav-dropdown[open]>.nav-dropdown-panel,.wf-dropdown[open]>.wf-panel{animation:ssm-drop .24s var(--ssm-ease) both}
  .nav-dropdown[open]>.nav-dropdown-panel>a,.wf-dropdown[open]>.wf-panel>a{animation:ssm-in .32s var(--ssm-ease) both}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(2),.wf-dropdown[open]>.wf-panel>a:nth-child(2){animation-delay:.03s}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(3),.wf-dropdown[open]>.wf-panel>a:nth-child(3){animation-delay:.06s}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(4),.wf-dropdown[open]>.wf-panel>a:nth-child(4){animation-delay:.09s}
  .nav-dropdown[open]>.nav-dropdown-panel>a:nth-child(n+5),.wf-dropdown[open]>.wf-panel>a:nth-child(n+5){animation-delay:.12s}
  /* phone menus: the panel drops in and the links follow one by one */
  .mobile-menu[open]>nav{animation:ssm-drop .26s var(--ssm-ease) both}
  .mobile-menu[open]>nav>a{animation:ssm-in .34s var(--ssm-ease) both}
  .wf-header #main-nav.is-open,.wf-header #main-nav.open{animation:ssm-drop .26s var(--ssm-ease) both}
  .wf-header #main-nav.is-open>*,.wf-header #main-nav.open>*{animation:ssm-in .34s var(--ssm-ease) both}
  .mobile-menu[open]>nav>a:nth-child(2),.wf-header #main-nav.is-open>:nth-child(2){animation-delay:.03s}
  .mobile-menu[open]>nav>a:nth-child(3),.wf-header #main-nav.is-open>:nth-child(3){animation-delay:.06s}
  .mobile-menu[open]>nav>a:nth-child(4),.wf-header #main-nav.is-open>:nth-child(4){animation-delay:.09s}
  .mobile-menu[open]>nav>a:nth-child(5),.wf-header #main-nav.is-open>:nth-child(5){animation-delay:.12s}
  .mobile-menu[open]>nav>a:nth-child(6){animation-delay:.15s}
  .mobile-menu[open]>nav>a:nth-child(7){animation-delay:.18s}
  .mobile-menu[open]>nav>a:nth-child(n+8){animation-delay:.21s}

  /* ---------- Energy homepage hero ---------- */
  .studio-home-hero{overflow:hidden}
  .studio-home-hero .studio-home-scene{animation:ssm-push 16s var(--ssm-ease) both;transform-origin:62% 45%;translate:var(--ssm-px) var(--ssm-py);transition:translate 1.4s var(--ssm-ease);will-change:transform}
  .sun-hero-message>*{animation:ssm-rise .8s var(--ssm-ease) both}
  .sun-hero-message>:nth-child(1){animation-delay:.05s}
  .sun-hero-message>:nth-child(2){animation-delay:.15s}
  .sun-hero-message>:nth-child(3){animation-delay:.3s}
  .sun-hero-message>:nth-child(4){animation-delay:.42s}
  .sun-hero-message h1>span{background:linear-gradient(100deg,#096caa 0%,#096caa 40%,#8fd6ff 50%,#096caa 60%,#096caa 100%);background-size:240% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ssm-glint 1.6s ease-in-out 1.1s 1 both}
  .calculator-hero-card{animation:ssm-float .9s var(--ssm-ease) .3s both}
  .calculator-mini-steps>li{animation:ssm-in .45s var(--ssm-ease) both}
  .calculator-mini-steps>li:nth-child(1){animation-delay:.75s}
  .calculator-mini-steps>li:nth-child(2){animation-delay:.9s}
  .calculator-mini-steps>li:nth-child(3){animation-delay:1.05s}
  .calculator-mini-steps>li>b{animation:ssm-pop .5s cubic-bezier(.3,1.6,.5,1) both}
  .calculator-mini-steps>li:nth-child(1)>b{animation-delay:.8s}
  .calculator-mini-steps>li:nth-child(2)>b{animation-delay:.95s}
  .calculator-mini-steps>li:nth-child(3)>b{animation-delay:1.1s}
  .calculator-hero-card .calculator-button{position:relative;overflow:hidden}
  .calculator-hero-card .calculator-button::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg);animation:ssm-shine 1.1s ease-in-out 1.6s 1 both;pointer-events:none}
  .calculator-live-dot{animation:ssm-live 2.4s ease-in-out infinite}

  /* ---------- Energy inner page headers ---------- */
  .studio-hero-copy>*{animation:ssm-rise .75s var(--ssm-ease) both}
  .studio-hero-copy>:nth-child(2){animation-delay:.08s}
  .studio-hero-copy>:nth-child(3){animation-delay:.16s}
  .studio-hero-copy>:nth-child(4){animation-delay:.28s}
  .studio-hero-copy>:nth-child(n+5){animation-delay:.38s}
  .studio-hero-visual{overflow:hidden;animation:ssm-wipe 1s cubic-bezier(.6,0,.2,1) .15s both}
  .studio-hero-visual img{animation:ssm-push 14s var(--ssm-ease) both}

  /* ---------- Water homepage hero ---------- */
  .w-home-opening .w-title>*,.w-home-opening .r-hero-lede,.w-home-opening .h-journeys>a{animation:ssm-rise .8s var(--ssm-ease) both}
  .w-home-opening .w-title>:nth-child(2){animation-delay:.12s}
  .w-home-opening .r-hero-lede{animation-delay:.26s}
  .w-home-opening .h-journeys>a:nth-child(1){animation-delay:.38s}
  .w-home-opening .h-journeys>a:nth-child(2){animation-delay:.46s}
  .w-home-opening .h-journeys>a:nth-child(3){animation-delay:.54s}
  .w-home-opening .h-journeys>a{transition:transform .25s var(--ssm-ease),box-shadow .25s}
  .w-home-opening .h-journeys>a:hover{transform:translateX(4px)}
  .w-home-opening .h-journeys>a .h-path-arrow{display:inline-block;transition:transform .25s var(--ssm-ease)}
  .w-home-opening .h-journeys>a:hover .h-path-arrow{transform:translateX(4px)}
  .w-home-opening .w-title h1 em{background:linear-gradient(100deg,#19789b 0%,#19789b 40%,#9be3ff 50%,#19789b 60%,#19789b 100%);background-size:240% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ssm-glint 1.6s ease-in-out 1s 1 both}
  .w-home-opening .w-water-image{overflow:hidden;animation:ssm-float .9s var(--ssm-ease) .2s both}
  .w-home-opening .w-water-image>img{animation:ssm-push 16s var(--ssm-ease) both;translate:var(--ssm-px) var(--ssm-py);transition:translate 1.4s var(--ssm-ease)}
}

@keyframes ssm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ssm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ssm-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ssm-float{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ssm-pop{from{transform:scale(.4)}to{transform:none}}
@keyframes ssm-push{from{transform:scale(1.1)}to{transform:scale(1.02)}}
@keyframes ssm-glint{from{background-position:100% 0}to{background-position:0 0}}
@keyframes ssm-shine{to{transform:translateX(320%) skewX(-18deg)}}
@keyframes ssm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ssm-live{0%,100%{box-shadow:0 0 0 0 rgba(31,170,110,.45)}50%{box-shadow:0 0 0 6px rgba(31,170,110,0)}}

/* Publisher review: the sticky-header transitions also respect reduced motion. */
@media (prefers-reduced-motion:reduce){
 html.ssm-on body .site-header,html.ssm-on body .site-header::after,
 html.ssm-on body .site-header .family-switcher,html.ssm-on body .site-header .nav-row,
 html.ssm-on body .site-header .brand img,html.ssm-on body .wf-header .wf-shell,
 html.ssm-on body .wf-header .wf-brand img{transition:none!important}
}