/* Layout stays in styles.css. These effects never change document flow. */
.hero-image{animation:none}
.has-motion .reveal{transition:none}
.header{transition:background-color .3s ease,box-shadow .3s ease}
.header.is-scrolled{background:rgba(255,255,255,.94);box-shadow:0 3px 20px rgba(20,46,73,.06);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.home-story picture{position:relative;z-index:0}
.has-motion .home-story picture,.has-motion .benefit-photo img,.has-motion .funding-photo img{
  transform:translate3d(0,var(--motion-y,0%),0) scale(var(--motion-scale,1));
}
.has-motion .hero-image{transform:translate3d(0,var(--motion-y,0%),0) scale(var(--motion-scale,1.04))}
.has-motion .home-story{clip-path:inset(0 var(--motion-inset,0%))}
.has-motion .motion-active picture,.has-motion .hero.motion-active .hero-image,.has-motion .motion-active>img{will-change:transform}
.has-motion .process li{position:relative}
.has-motion .process li:before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .85s cubic-bezier(.22,1,.36,1) var(--motion-delay,0ms);
}
.has-motion .process li.motion-seen:before{transform:scaleX(1)}

/* Native scroll timelines keep image motion off the main JavaScript scroll path. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .has-motion:not(.js-scroll) .hero-image{
      animation:hero-scroll linear both;
      animation-timeline:scroll(root block);
      animation-range:0px 85vh;
    }
    .has-motion:not(.js-scroll) .home-story picture{
      animation:home-depth linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 100%;
    }
    .has-motion:not(.js-scroll) .home-story{
      animation:home-open linear both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 100%;
    }
    .has-motion:not(.js-scroll) .benefit-photo img,.has-motion:not(.js-scroll) .funding-photo img{
      animation:detail-depth linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes hero-scroll{
  from{transform:translate3d(0,0,0) scale(1.04)}
  to{transform:translate3d(0,5%,0) scale(1.14)}
}
@keyframes home-depth{
  from{transform:translate3d(0,3%,0) scale(1.13)}
  to{transform:translate3d(0,-3%,0) scale(1.07)}
}
@keyframes detail-depth{
  from{transform:translate3d(0,2%,0) scale(1.09)}
  to{transform:translate3d(0,-2%,0) scale(1.06)}
}
@keyframes home-open{from{clip-path:inset(0 4%)}to{clip-path:inset(0 0%)}}
@media(max-width:850px){
  .has-motion.mobile-motion .header:after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
    transform:scaleX(var(--scroll-progress,0));transform-origin:left;pointer-events:none;
  }
  .has-motion.mobile-motion.motion-intro .hero picture{
    animation:mobile-hero-arrive 1800ms cubic-bezier(.22,1,.36,1) both;
  }
  .has-motion.mobile-motion .home-story{contain:paint}
}
@keyframes mobile-hero-arrive{from{transform:scale(1.09)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .has-motion .home-story,.has-motion .home-story picture,.has-motion .hero-image,.has-motion .hero picture,
  .has-motion .benefit-photo img,.has-motion .funding-photo img{
    animation:none!important;transform:none!important;clip-path:none!important;will-change:auto!important;
  }
  .has-motion .process li:before{transform:none;transition:none}
}
@media print{
  .has-motion .home-story,.has-motion .home-story picture,.has-motion .hero-image,.has-motion .hero picture,
  .has-motion .benefit-photo img,.has-motion .funding-photo img{animation:none!important;transform:none!important;clip-path:none!important}
}