/* Original motion choreography informed by Rendani and Lightship.
   Native scrolling stays in charge. Nothing is hidden until JS is ready. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.hero-scene { position: relative; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media .hero-image { z-index: 0; }
.hero-media .hero-shade { z-index: 1; }
.hero-line { overflow: clip; padding: 0 .65em .12em 0; margin: 0 -.65em -.12em 0; }
.motion-line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.motion-line-inner { display: block; }
@media(max-width:560px) {
  .faq-heading h2 .motion-line:nth-child(n+2) { display: inline-block; vertical-align: top; }
}

@media(prefers-reduced-motion:no-preference) {
  .motion-ready .hero-image { animation: winter-arrive 1.65s var(--motion-ease) both; }
  .motion-ready .site-header { animation: settle-in .75s var(--motion-ease) .12s both; }
  .motion-ready .hero-topline { animation: settle-in .8s var(--motion-ease) .24s both; }
  .motion-ready .hero-line > span { animation: title-arrive 1.05s var(--motion-ease) .2s both; }
  .motion-ready .hero-line:nth-child(2) > span { animation-delay: .34s; }
  .motion-ready .hero-description { animation: settle-in .85s var(--motion-ease) .5s both; }
  .motion-ready .hero-actions { animation: settle-in .85s var(--motion-ease) .64s both; }
  .motion-ready .hero-bottom { animation: settle-in .85s var(--motion-ease) .78s both; }
  .motion-ready .roof-marker { animation: settle-in .9s var(--motion-ease) .9s both; }
  .mobile-nav.open { animation: settle-in .3s var(--motion-ease) both; }

  .motion-ready .reveal {
    opacity: 0;
    transform: translate3d(0,26px,0);
    transition: opacity .8s var(--motion-ease) var(--reveal-delay,0ms),
      transform .95s var(--motion-ease) var(--reveal-delay,0ms);
  }
  .motion-ready .reveal.is-visible,
  .motion-ready .reveal:focus-within { opacity: 1; transform: none; }
  .motion-ready .reveal:focus-within,
  .motion-ready .reveal-heading:focus-within .motion-line-inner { transition: none; }
  .motion-ready .reveal-heading { opacity: 1; transform: none; }
  .motion-ready .reveal-heading .motion-line-inner {
    transform: translate3d(0,110%,0);
    opacity: 0;
    transition: transform 1s var(--motion-ease), opacity .8s var(--motion-ease);
    transition-delay: calc(var(--line-index,0) * 100ms);
  }
  .motion-ready .reveal-heading.is-visible .motion-line-inner,
  .motion-ready .reveal-heading:focus-within .motion-line-inner { transform: none; opacity: 1; }
  .motion-ready .reveal-image {
    transform: none;
    clip-path: inset(10% 0 0 0 round 6px);
    transition: clip-path 1.15s var(--motion-ease), opacity .9s var(--motion-ease);
  }
  .motion-ready .reveal-image.is-visible,
  .motion-ready .reveal-image:focus-within { clip-path: inset(0 0 0 0 round 6px); }
  .motion-ready .savings-result .comparison-track > span {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s var(--motion-ease) .2s;
  }
  .motion-ready .savings-result.is-visible .comparison-track > span { transform: scaleX(1); }
  .faq-list details[open] > p { animation: answer-arrive .35s ease-out both; }

  /* The image and foreground travel at different speeds, without a scroll proxy. */
  .scroll-motion .hero-media {
    transform: translate3d(0,var(--hero-image-y,0px),0) scale(var(--hero-image-scale,1));
  }
  .scroll-motion .hero-content { translate: 0 var(--hero-copy-y,0px); }
  .scroll-motion .hero { border-radius: calc(14px + var(--hero-progress,0) * 12px); }
  .scroll-motion .landscape-card > img,
  .scroll-motion .impact-image > img {
    transform: translate3d(0,var(--image-y,0px),0) scale(var(--image-scale,1.1));
    transition: none;
  }
  .hero-pinned .hero-scene { height: calc(min(100svh - 20px,1000px) + 42svh); }
  .hero-pinned .hero {
    position: sticky; top: 10px;
    height: calc(100svh - 20px); min-height: 0; max-height: 1000px;
    scale: calc(1 - var(--hero-progress,0) * .035);
    transform-origin: center center;
  }

  @keyframes winter-arrive { from { transform: scale(1.16); opacity: .45; } to { transform: scale(1); opacity: 1; } }
  @keyframes title-arrive { from { transform: translate3d(0,112%,0); } to { transform: translate3d(0,0,0); } }
  @keyframes settle-in { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
  @keyframes answer-arrive { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
}

@media(max-width:820px) and (prefers-reduced-motion:no-preference) {
  .motion-ready .hero-image { animation-name: winter-arrive-mobile; animation-duration: 1.1s; }
  .motion-ready .reveal { transition-duration: .7s; }
  .motion-ready .reveal-heading .motion-line-inner { transition-duration: .75s; }
  @keyframes winter-arrive-mobile { from { opacity: .5; } to { opacity: 1; } }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal, .motion-ready .motion-line-inner { opacity: 1; transform: none; clip-path: none; }
  .hero-pinned .hero-scene { height: auto; }
  .hero-pinned .hero { position: relative; top: auto; scale: none; }
  .hero-media, .landscape-card > img, .impact-image > img { transform: none !important; }
  .hero-content { translate: none !important; }
}