/* Motion is layered over fully visible, server-rendered content. */
@media (prefers-reduced-motion:no-preference) {
  @view-transition {navigation:auto}
  ::view-transition-old(root){animation:page-out .16s ease-in both}
  ::view-transition-new(root){animation:page-in .34s cubic-bezier(.18,.78,.2,1) both}
  @keyframes page-out{to{opacity:0}}
  @keyframes page-in{from{opacity:0;transform:translateY(6px)}}
  .navbar>.brand,.navbar nav>*,.navbar>.search-btn{animation:nav-appear .44s ease-out backwards}
  .navbar nav>:nth-child(2){animation-delay:35ms}.navbar nav>:nth-child(3){animation-delay:70ms}
  .navbar nav>:nth-child(4){animation-delay:100ms}.navbar nav>:nth-child(n+5){animation-delay:130ms}
  @keyframes nav-appear{from{opacity:0;translate:0 -7px}}
  .navbar summary>span,.ref-question summary svg{transition:rotate .24s ease}
  .navbar details[open] summary>span{rotate:180deg}.ref-question[open] summary svg{rotate:45deg}
  .hm-pixels::after,.of-hero::after{
    content:"";pointer-events:none;position:absolute;inset:0;
    background:linear-gradient(108deg,transparent 38%,#63d3ff85 49%,transparent 60%) 100% center/250% 100%;
    mask:url('/pixels.svg') center bottom/cover no-repeat;
    animation:signal-sweep 4.6s ease-in-out 1 both;
  }
  .of-hero::after{z-index:-1}
  @keyframes signal-sweep{0%{background-position:100% 50%;opacity:0}20%,75%{opacity:1}100%{background-position:0 50%;opacity:0}}
  .ref-banner-inner h1,.ref-contact-intro h1,.of-intro h1{animation:heading-rise .72s cubic-bezier(.16,1,.3,1) both}
  .ref-banner-inner>p,.ref-form-panel>h2,.ref-form-panel>p{animation:body-rise .6s .09s ease-out backwards}
  @keyframes heading-rise{from{clip-path:inset(0 0 90% 0);translate:0 22px}to{clip-path:inset(0);translate:0 0}}
  @keyframes body-rise{from{opacity:.1;translate:0 12px}}
  .scope-list b{font-variant-numeric:tabular-nums}
  .publication,.ref-resource,.service-panel,.cyan-button,.navy-button,.ref-cta,.of-action{
    transition:translate .26s ease,box-shadow .26s ease,border-color .24s,background-color .24s
  }
  .editorial-cover img,.service-photo img{transition:scale .65s cubic-bezier(.2,.8,.2,1)}
  .text-action svg,.ref-related-grid svg,.ref-more svg{transition:translate .25s}
  .ref-form-panel :is(input,select,textarea){transition:box-shadow .2s,border-color .2s}
  .ref-form-panel :is(input,select,textarea):focus-visible{box-shadow:0 0 0 4px #50eaff26}
  .ref-question[open]>p,.nav-group[open] .mega a,.menu-open #main-nav{animation:body-rise .25s ease-out backwards}
  #search-dialog[open]{animation:dialog-in .24s cubic-bezier(.2,.8,.2,1) both}
  @keyframes dialog-in{from{opacity:0;transform:translateY(-10px) scale(.985)}}
  @supports(animation-timeline:scroll()) {
    body::after{content:"";position:fixed;pointer-events:none;z-index:30;left:0;top:0;width:100%;height:2px;
      background:var(--cyan);transform-origin:left;animation:read-progress 1s linear both;animation-timeline:scroll(root block)}
    @keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @media(min-width:750px){
      .hm-hero,.of-hero{view-timeline-name:--hero;view-timeline-axis:block}
      .hm-person>img,.of-stage>img{animation:hero-depth 1s linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
      @keyframes hero-depth{from{translate:0 0}to{translate:0 38px}}
    }
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(.publication,.ref-resource,.service-panel):hover{translate:0 -5px;box-shadow:0 12px 24px #07143133}
  :is(.publication,.ref-resource):hover .editorial-cover img,.service-photo:hover img{scale:1.045}
  :is(.cyan-button,.navy-button,.ref-cta,.of-action):hover{translate:0 -2px;box-shadow:0 6px 17px #00133633}
  :is(.text-action,.ref-related-grid a,.ref-resource):hover svg{translate:3px 0}
}