/* Sunstorm page motion layer (Claude, October 10 2026).
 * One language for every page on sunstormhome.com and sunstorm.energy: a hero
 * entrance where a page has none, section and card reveals as the reader
 * scrolls, counters on fact bands, a slow push on revealed figures and a lift on
 * cards under a fine pointer. The script only adds classes and CSS variables;
 * it never moves, adds or removes content and never touches forms, tracking,
 * the header, the footer or the existing motion pieces. With no script, or with
 * prefers-reduced-motion, pages look exactly as they do today.
 */
:root{--pm-ease:cubic-bezier(.2,.7,.2,1);--pm-rise:18px;--pm-dur:.72s}

/* ---------- scroll reveals ---------- */
html.pm-on .pm-reveal{opacity:0;transform:translateY(var(--pm-rise));will-change:opacity,transform}
html.pm-on .pm-reveal.pm-in{opacity:1;transform:none;transition:opacity var(--pm-dur) var(--pm-ease),transform var(--pm-dur) var(--pm-ease);transition-delay:calc(var(--pm-i,0) * 70ms);will-change:auto}
html.pm-on .pm-reveal.pm-soft{--pm-rise:12px;--pm-dur:.55s}
html.pm-on .pm-reveal.pm-in .pm-fig{animation:pm-push-soft 1.8s var(--pm-ease) both}

/* ---------- counters: keep digits steady while they count ---------- */
html.pm-on .pm-count{font-variant-numeric:tabular-nums}

/* ---------- card lift under a fine pointer ---------- */
@media (hover:hover) and (pointer:fine){
  html.pm-on .pm-card{transition:transform .35s var(--pm-ease),box-shadow .35s var(--pm-ease)}
  html.pm-on .pm-card:hover{transform:translateY(-3px)}
}

@keyframes pm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pm-push{from{transform:scale(1.06)}to{transform:none}}
@keyframes pm-push-soft{from{transform:scale(1.045)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  html.pm-on .pm-reveal{opacity:1;transform:none}
  html.pm-on .pm-reveal.pm-in .pm-fig{animation:none}
  html.pm-on .pm-card{transition:none}
}
@media print{html.pm-on .pm-reveal{opacity:1!important;transform:none!important}}

/* ---------- hero entrances written as plain CSS so they start on the first paint and need no script ----------
 * Only heroes that have no entrance today. Energy heroes (.studio-hero, .page-hero) and the Water, Air,
 * Insulation and hub heroes keep their own kits and are not listed here, and so does the panel
 * cleaning hero, which the top motion kit already choreographs. */
.inner-hero.atelier-page-hero .page-hero-copy > *,
.inner-hero.atelier-page-hero .atelier-page-copy > *,
.inner-hero.atelier-page-hero .atelier-product-heading > *,
.inner-hero.atelier-page-hero > .shell > :is(p,h1,.btn-row,.lead),
.contact-page-intro .contact-intro-copy > *,
article.section .gd-head-copy > *,
.wg-lib-hero > .shell > *,
.wr-guide-intro > .wr-copy > *,
.campaign-hero .campaign-form-card > :is(.campaign-eyebrow,h1,.campaign-form-intro),
.project-journal-hero-copy > *{animation:pm-rise .75s var(--pm-ease) .04s both}
.inner-hero.atelier-page-hero .page-hero-copy > :nth-child(2),.inner-hero.atelier-page-hero .atelier-page-copy > :nth-child(2),.inner-hero.atelier-page-hero .atelier-product-heading > :nth-child(2),.inner-hero.atelier-page-hero > .shell > :is(p,h1,.btn-row,.lead):nth-child(2),.contact-page-intro .contact-intro-copy > :nth-child(2),article.section .gd-head-copy > :nth-child(2),.wg-lib-hero > .shell > :nth-child(2),.wr-guide-intro > .wr-copy > :nth-child(2),.campaign-hero .campaign-form-card > :is(.campaign-eyebrow,h1,.campaign-form-intro):nth-child(2),.project-journal-hero-copy > :nth-child(2){animation-delay:.12s}
.inner-hero.atelier-page-hero .page-hero-copy > :nth-child(3),.inner-hero.atelier-page-hero .atelier-page-copy > :nth-child(3),.inner-hero.atelier-page-hero .atelier-product-heading > :nth-child(3),.inner-hero.atelier-page-hero > .shell > :is(p,h1,.btn-row,.lead):nth-child(3),.contact-page-intro .contact-intro-copy > :nth-child(3),article.section .gd-head-copy > :nth-child(3),.wg-lib-hero > .shell > :nth-child(3),.wr-guide-intro > .wr-copy > :nth-child(3),.campaign-hero .campaign-form-card > :is(.campaign-eyebrow,h1,.campaign-form-intro):nth-child(3),.project-journal-hero-copy > :nth-child(3){animation-delay:.2s}
.inner-hero.atelier-page-hero .page-hero-copy > :nth-child(4),.inner-hero.atelier-page-hero .atelier-page-copy > :nth-child(4),.inner-hero.atelier-page-hero .atelier-product-heading > :nth-child(4),.inner-hero.atelier-page-hero > .shell > :is(p,h1,.btn-row,.lead):nth-child(4),.contact-page-intro .contact-intro-copy > :nth-child(4),article.section .gd-head-copy > :nth-child(4),.wg-lib-hero > .shell > :nth-child(4),.wr-guide-intro > .wr-copy > :nth-child(4),.project-journal-hero-copy > :nth-child(4){animation-delay:.3s}
.inner-hero.atelier-page-hero .page-hero-copy > :nth-child(5),.inner-hero.atelier-page-hero .atelier-page-copy > :nth-child(5),.inner-hero.atelier-page-hero .atelier-product-heading > :nth-child(5),.inner-hero.atelier-page-hero > .shell > :is(p,h1,.btn-row,.lead):nth-child(5),.contact-page-intro .contact-intro-copy > :nth-child(5),article.section .gd-head-copy > :nth-child(5),.wr-guide-intro > .wr-copy > :nth-child(5),.project-journal-hero-copy > :nth-child(5){animation-delay:.4s}
.inner-hero.atelier-page-hero .page-hero-copy > :nth-child(n+6),.inner-hero.atelier-page-hero .atelier-page-copy > :nth-child(n+6),.inner-hero.atelier-page-hero .atelier-product-heading > :nth-child(n+6),.contact-page-intro .contact-intro-copy > :nth-child(n+6),article.section .gd-head-copy > :nth-child(n+6),.wr-guide-intro > .wr-copy > :nth-child(n+6){animation-delay:.48s}
/* the picture beside the copy wipes in and keeps a slow push for a few seconds */
.inner-hero.atelier-page-hero figure.page-hero-photo,
.inner-hero.atelier-page-hero figure.atelier-page-picture,
.inner-hero.atelier-page-hero figure.atelier-product-render,
.contact-page-intro figure.contact-intro-photo,
article.section figure.article-hero,
.campaign-hero figure.water-brand-frame{animation:pm-wipe .9s var(--pm-ease) .22s both}
.inner-hero.atelier-page-hero figure.page-hero-photo > img,
.inner-hero.atelier-page-hero figure.atelier-page-picture > img,
.inner-hero.atelier-page-hero figure.atelier-product-render > img,
.contact-page-intro figure.contact-intro-photo > img,
article.section figure.article-hero > img,
.campaign-hero figure.water-brand-frame > img{animation:pm-push 14s var(--pm-ease) both;transform-origin:60% 45%}
@media (prefers-reduced-motion:reduce){
  .inner-hero.atelier-page-hero .page-hero-copy > *,.inner-hero.atelier-page-hero .atelier-page-copy > *,.inner-hero.atelier-page-hero .atelier-product-heading > *,.inner-hero.atelier-page-hero > .shell > :is(p,h1,.btn-row,.lead),.contact-page-intro .contact-intro-copy > *,article.section .gd-head-copy > *,.wg-lib-hero > .shell > *,.wr-guide-intro > .wr-copy > *,.campaign-hero .campaign-form-card > :is(.campaign-eyebrow,h1,.campaign-form-intro),.project-journal-hero-copy > *,
  .inner-hero.atelier-page-hero figure.page-hero-photo,.inner-hero.atelier-page-hero figure.atelier-page-picture,.inner-hero.atelier-page-hero figure.atelier-product-render,.contact-page-intro figure.contact-intro-photo,article.section figure.article-hero,.campaign-hero figure.water-brand-frame,
  .inner-hero.atelier-page-hero figure.page-hero-photo > img,.inner-hero.atelier-page-hero figure.atelier-page-picture > img,.inner-hero.atelier-page-hero figure.atelier-product-render > img,.contact-page-intro figure.contact-intro-photo > img,article.section figure.article-hero > img,.campaign-hero figure.water-brand-frame > img{animation:none}
}