/* Small, one-time entrances are added progressively by main.js. */
.highlight{background-size:100% 100%;background-repeat:no-repeat}

@media (prefers-reduced-motion:no-preference){
  .button,.app-link{transition:background .25s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
  .button .icon,.app-link .icon,.text-link>.icon:last-child{transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .thumbnail-link .media{transition:transform .8s cubic-bezier(.22,1,.36,1),filter .4s ease}
  .tutorial-card,.case-card{transition:box-shadow .4s ease,border-color .4s ease}
  .video-dialog[open]{animation:ar-dialog-arrive .3s cubic-bezier(.22,1,.36,1)}
  @keyframes ar-dialog-arrive{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .thumbnail-link:hover .media{transform:scale(1.025)}
  .tutorial-card:hover,.case-card:hover{border-color:#cbd5bd;box-shadow:0 10px 28px #2735160a}
  .button:hover>.icon:last-child:not(.play-icon),.app-link:hover>.icon,.text-link:hover>.icon:last-child:not(.youtube-icon){transform:translate(2px,-2px)}
  .button:active,.app-link:active{transform:translateY(0) scale(.985)}
}

@media (prefers-reduced-motion:reduce){
  .thumbnail-link:hover .media,.button:hover,.app-link:hover{transform:none}
}