@import "tailwindcss";

/* Themed faces (loaded in index.html): a noir display for the title, a typewriter for the case
 * files, and an old-style serif for the detective-agency byline. */
@theme {
  --font-noir: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-case: "Special Elite", "Courier New", monospace;
  --font-agency: "EB Garamond", "Times New Roman", Times, serif;
}

/* Hovering the *back* case file: it can't just raise its z-index (the front file already covers it),
 * so it slides out from under (z stays low), then z steps to the front at the halfway point, then it
 * returns to its original xy — now on top. The resting fan rotation is baked into each keyframe so
 * the transform stays continuous. `-left` is the back-on-the-left variant (slides out to the left);
 * `-right` mirrors it. */
@keyframes folder-emerge-left {
  0% { transform: rotate(-6deg) translateX(0); z-index: 0; }
  45% { transform: rotate(-6deg) translateX(-2.75rem); z-index: 0; }
  50% { transform: rotate(-6deg) translateX(-2.75rem); z-index: 30; }
  100% { transform: rotate(-6deg) translateX(0); z-index: 30; }
}
@keyframes folder-emerge-right {
  0% { transform: rotate(6deg) translateX(0); z-index: 0; }
  45% { transform: rotate(6deg) translateX(2.75rem); z-index: 0; }
  50% { transform: rotate(6deg) translateX(2.75rem); z-index: 30; }
  100% { transform: rotate(6deg) translateX(0); z-index: 30; }
}

/* Dealing the next rap sheet off the stack: the new sheet slides in from the side it came from
 * (right when paging forward, left when paging back), tilting straight as it settles on top. */
@keyframes sheet-in-right {
  0% { transform: translateX(45%) rotate(5deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes sheet-in-left {
  0% { transform: translateX(-45%) rotate(-5deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}