@media(prefers-reduced-motion:no-preference){
  html.preloader-show .motet-hero-copy{animation:motet-intro-copy 700ms cubic-bezier(.16,1,.3,1) 1050ms both}
  html.preloader-show .hero__threads{animation:motet-intro-threads 900ms ease-out 1150ms both}
  html.preloader-show .motet-hero-art img{animation:motet-intro-mark 750ms cubic-bezier(.16,1,.3,1) 1000ms both}
}
@keyframes motet-intro-copy{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes motet-intro-threads{from{opacity:0}to{opacity:1}}
@keyframes motet-intro-mark{from{opacity:.45;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.motet-hero{position:relative;isolation:isolate;overflow:clip}
.hero__threads{position:absolute;inset:0;z-index:-1;pointer-events:none;mask-image:linear-gradient(to right,#000 0%,#0003 15%,#0003 43%,#000 65%)}
.hero__threads canvas{display:block;width:100%;height:100%}
.motet-hero-copy{position:relative;z-index:2}
.motet-hero-art{position:relative;z-index:1}
.motet-hero-art img{animation:none}
.motet-hero-foot{position:relative;align-items:center}
@supports(animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference) and (min-width:801px){
    .motet-hero-art{animation:motet-depth linear both;animation-timeline:scroll(root block);animation-range:0px 680px}
  }
}
@keyframes motet-depth{from{transform:translateY(0) rotate(0)}to{transform:translateY(42px) rotate(2deg)}}

@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  .site-header{view-transition-name:motet-header}
  ::view-transition-old(root){animation:motet-page-out 160ms ease-out both}
  ::view-transition-new(root){animation:motet-page-in 240ms ease-out both}
  ::view-transition-group(motet-header){animation-duration:240ms}
  .button .icon,.brand-card-info .icon{transition:transform 220ms cubic-bezier(.16,1,.3,1)}
  .button:hover .icon,.button:focus-visible .icon,.brand-card:hover .icon,.brand-card:focus-visible .icon{transform:translateX(4px)}
  .brand-roster a{transition:background 220ms ease}
}
@keyframes motet-page-out{to{opacity:0}}
@keyframes motet-page-in{from{opacity:0}to{opacity:1}}
@media(max-width:560px){
  .hero__threads{inset:38% 0 0;mask-image:linear-gradient(to bottom,transparent,#000 40%,#000)}
  .motet-hero-foot{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .hero__threads{display:none}
  .motet-hero-art{animation:none;transform:none}
  ::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation:none!important}
}