/* Mist lives in the valleys and above the lake, beneath all page copy. */
.cloud-drift{mask-image:linear-gradient(transparent 22%,#000 40%,#000 70%,transparent 88%);-webkit-mask-image:linear-gradient(transparent 22%,#000 40%,#000 70%,transparent 88%)}
.cloud-drift span{inset:27% -25% auto;width:150%;height:35%;background:url(mist.svg) center/100% 100% no-repeat;filter:none;opacity:.65;animation:valley-mist 24s linear infinite alternate;animation-delay:-8s;will-change:transform}
.cloud-drift span+span{inset:43% -30% auto;width:160%;height:32%;background:url(mist.svg) center/100% 100% no-repeat;filter:blur(2px);opacity:.52;animation:lake-mist 32s linear infinite alternate;animation-delay:-16s}
.cloud-drift span:nth-child(3){inset:57% -20% auto;width:140%;height:24%;background:url(mist.svg) center/100% 100% no-repeat;filter:blur(3px);opacity:.33;animation:water-mist 27s linear infinite alternate;animation-delay:-5s}
@keyframes valley-mist{from{transform:translate3d(-9%,-3%,0)}to{transform:translate3d(10%,5%,0)}}
@keyframes lake-mist{from{transform:translate3d(11%,3%,0) scaleX(-1)}to{transform:translate3d(-10%,-4%,0) scaleX(-1)}}
@keyframes water-mist{from{transform:translate3d(-10%,0,0)}to{transform:translate3d(12%,-5%,0)}}
.motion-paused .cloud-drift span{animation-play-state:paused}
@media(max-width:720px){.cloud-drift span{inset:30% -50% auto;width:200%;height:32%;opacity:.53}.cloud-drift span+span{inset:48% -50% auto;width:200%;height:27%;opacity:.43}.cloud-drift span:nth-child(3){inset:61% -40% auto;width:180%;height:22%;opacity:.3}}
@media(prefers-reduced-motion:reduce){.cloud-drift span{animation:none!important;will-change:auto}}
/* Keep all mist below the actual headline, including when it wraps on phones. */
/* A separate, narrow layer follows the photographed mountain-valley mist. */
.ridge-mist{position:absolute;z-index:1;top:var(--ridge-top,32%);height:var(--ridge-height,140px);left:0;right:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent var(--ridge-clear-left,60%),#000 calc(var(--ridge-clear-left,60%) + 65px));-webkit-mask-image:linear-gradient(90deg,transparent var(--ridge-clear-left,60%),#000 calc(var(--ridge-clear-left,60%) + 65px))}
.ridge-mist span{position:absolute;inset:0 -20%;background:url(mist.svg) center/100% 100% no-repeat;opacity:.68;filter:sepia(.22);animation:ridge-breeze 29s linear infinite alternate;animation-delay:-9s;will-change:transform}
.ridge-mist span+span{inset:12% -30% -12%;opacity:.38;animation:ridge-breeze-back 38s linear infinite alternate;animation-delay:-19s;filter:blur(1px) sepia(.18)}
@keyframes ridge-breeze{from{transform:translate3d(-8%,-4%,0)}to{transform:translate3d(9%,4%,0)}}
@keyframes ridge-breeze-back{from{transform:translate3d(8%,3%,0) scaleX(-1)}to{transform:translate3d(-8%,-3%,0) scaleX(-1)}}
.motion-paused .ridge-mist span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ridge-mist span{animation:none!important;will-change:auto}}
.cloud-drift{top:var(--mist-clear-top,57%);bottom:50px;mask-image:linear-gradient(transparent,#000 18%,#000 76%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 76%,transparent)}
.cloud-drift span{inset:0 -25% auto;width:150%;height:58%;opacity:.52}
.cloud-drift span+span{inset:24% -30% auto;width:160%;height:52%;opacity:.43}
.cloud-drift span:nth-child(3){inset:49% -20% auto;width:140%;height:44%;opacity:.28}
.hero .motion-toggle,.about-hero .motion-toggle{position:relative;inset:auto;align-self:flex-start;margin-top:28px;flex-shrink:0}
.hero-copy{padding-bottom:80px}.about-hero-inner{padding-bottom:70px}
@media(max-width:720px){.cloud-drift span{inset:0 -50% auto;width:200%;height:58%;opacity:.43}.cloud-drift span+span{inset:25% -50% auto;width:200%;height:52%;opacity:.35}.cloud-drift span:nth-child(3){inset:50% -40% auto;width:180%;height:44%;opacity:.24}.hero-copy{padding-bottom:85px}.hero .motion-toggle,.about-hero .motion-toggle{margin-top:28px}}