/* Keep browser navigation native; animate the loaded page without snapshots. */
@view-transition{navigation:none}
/* Clip motion at the viewport without creating a nested scrolling container. */
body{overflow-x:clip}
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:scroll()){
  body:after{content:'';position:fixed;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#d7ff00 0% 55%,#ff4c9e 80%,#58d9ff);z-index:100;pointer-events:none;transform-origin:left;animation:ing-reading-progress linear both;animation-timeline:scroll(root block)}
  @keyframes ing-reading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

 }
 @media(hover:hover){
  .directory-icon img,.directory-arrow,.button,.event,.release-card{transition:transform 240ms cubic-bezier(.2,1.8,.4,1)}
  .directory-link:hover .directory-icon img{transform:rotate(-13deg) scale(1.18)}
  .directory-link:hover .directory-arrow{transform:translate(5px,-4px) rotate(-12deg)}
  .button:hover{transform:translateY(-5px) rotate(-2deg)}
  .event:hover,.release-card:hover{transform:translateY(-7px) rotate(-1deg)}
 }
 .directory-link:active .directory-icon img{transform:scale(.8) rotate(10deg)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 main,main h1,.hero-content .eyebrow{animation:none!important}
 .button,.event,.release-card,.directory-icon img,.directory-arrow{transition:none!important}
}