/* Base animation */
.os{
  opacity:0;
  transform:translate3d(0,0,0) scale(1);
  transition:
    opacity var(--os-d,700ms) cubic-bezier(.2,.8,.2,1) var(--os-del,120ms),
    transform var(--os-d,700ms) cubic-bezier(.2,.8,.2,1) var(--os-del,120ms);
  will-change:opacity,transform
}

.os.in{
  opacity:1;
  transform:none
}

/* Variants */
.os-fade{transform:none}
.os-left{transform:translate3d(-24px,0,0)}
.os-right{transform:translate3d(24px,0,0)}
.os-up{transform:translate3d(0,24px,0)}
.os-down{transform:translate3d(0,-24px,0)}
.os-zoom{transform:scale(.96)}

/* Typewriter */
.os-type{
  display:inline-block;
  white-space:pre-wrap
}

.os-type .os-c{
  margin-left:2px;
  animation:os-blink 1s steps(2,end) infinite
}

@keyframes os-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .os{
    opacity:1!important;
    transform:none!important;
    transition:none!important
  }
  .os-type .os-c{
    animation:none!important
  }
}