/* ==================== animations.css ==================== */
/* Transition/fade behavior for show/hide UI states and reduced-motion support. */

.loader{transition:opacity .5s,visibility .5s}
.loader.out{opacity:0;visibility:hidden;pointer-events:none}

.lp{transition:width .2s}

.intro{transition:opacity .4s,visibility .4s}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none}

.btn{transition:transform .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}

.hud.hide{opacity:0;visibility:hidden;pointer-events:none}

.ib{transition:transform .15s,background .2s}
.hero-tags span{transition:transform .2s}

.mb:active,.mb.on{transform:scale(.93)}

.prompt{transition:opacity .2s}
.prompt.hide{opacity:0;pointer-events:none}

.card{transition:opacity .2s}
.card.hide{opacity:0;pointer-events:none}

.dir{transition:opacity .2s}
.dir.hide{opacity:0;pointer-events:none}

.dir li{transition:background .15s}

.cover{transition:opacity .25s}
.cover.hide{opacity:0;pointer-events:none}

.toast{transition:opacity .2s}
.toast.hide{opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .loader,.intro,.card,.cover,.toast,.prompt{transition:none!important}
}