@layer utilities {
  @keyframes appear-then-fade {
    0%,100% { opacity: 0; }
    5%,60%  { opacity: 1; }
  }

  @keyframes fade-in {
    0%, 50% { opacity: 0 }
    50%, 100% { opacity: 1 }
  }

  @keyframes fade-out {
    0%, 50% { opacity: 1 }
    50%, 100% { opacity: 0 }
  }

  @keyframes slide-down {
    from { max-height: 0; opacity: 0; }
    to   { max-height: 300px; opacity: 1; }
  }

  @keyframes slide-up {
    from { max-height: 300px; opacity: 1; }
    to   { max-height: 0; opacity: 0; }
  }

  /*@keyframes slide-up {*/
  /*  from { transform: translateY(2rem); }*/
  /*  to   { transform: translateY(0); }*/
  /*}*/

  /*@keyframes slide-down {*/
  /*  from { transform: translateY(0); }*/
  /*  to   { transform: translateY(2rem); }*/
  /*}*/
}