@import "tailwindcss";

@layer base {
  body {
    background-color: #f5f0e8;
  }
}

@theme {
  --font-title: "Alfa Slab One", sans-serif;
  --animate-pair-in: pair-in 300ms ease-out;
}

@keyframes pair-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.font-title {
  font-weight: 400;
  font-style: normal;
}

/* micromodal */
.modal__overlay {
  @apply fixed inset-0 flex justify-center items-center z-[100];
  background: rgba(0,0,0,0.6);
}

.micromodal-slide { @apply hidden; }
.micromodal-slide.is-open { @apply block; }

@keyframes mmfadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mmslideIn { from { transform: translateY(-5%); } to { transform: translateY(0); } }
@keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-5%); } }

.micromodal-slide[aria-hidden="false"] .modal__overlay  { animation: mmfadeIn  .3s cubic-bezier(0,0,.2,1); }
.micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn .3s cubic-bezier(0,0,.2,1); }
.micromodal-slide[aria-hidden="true"]  .modal__overlay  { animation: mmfadeOut  .3s cubic-bezier(0,0,.2,1); }
.micromodal-slide[aria-hidden="true"]  .modal__container { animation: mmslideOut .3s cubic-bezier(0,0,.2,1); }
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay { will-change: transform; }