/* Short, non-blocking entrances keep each part of the game feeling tangible. */
:root {
  --transition-plate: 420ms;
  --transition-detail: 360ms;
  --transition-ease: cubic-bezier(0.2, 0.8, 0.25, 1);
}
.screen.entering:not(.finish-screen) {
  animation: none;
}
.category-screen.entering .heading,
.drawing-screen.entering .heading {
  animation: plate-arrive var(--transition-detail) var(--transition-ease) backwards;
}
.category-screen.entering .book,
.drawing-screen.entering .drawing-choice,
.home.entering .home-art {
  animation: paper-arrive var(--transition-plate) var(--transition-ease) backwards;
}
.studio.entering .paper-wrap {
  animation: paper-appear var(--transition-detail) ease-out backwards;
}
.category-screen.entering .category-tile {
  animation: tile-arrive var(--transition-detail) var(--transition-ease) backwards;
}
.category-screen.entering .category-tile:nth-child(2) {
  animation-delay: 30ms;
}
.category-screen.entering .category-tile:nth-child(3) {
  animation-delay: 60ms;
}
.category-screen.entering .category-tile:nth-child(4) {
  animation-delay: 90ms;
}
.drawing-screen.entering .color-btn,
.home.entering .home-buttons,
.studio.entering .studio-tools {
  animation: tools-arrive var(--transition-plate) var(--transition-ease) backwards;
}
@keyframes plate-arrive {
  from {
    opacity: 0.85;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes paper-arrive {
  from {
    opacity: 0.9;
    translate: 0 16px;
    scale: 0.975;
  }
  70% {
    opacity: 1;
    translate: 0 -2px;
    scale: 1.005;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes tile-arrive {
  from {
    opacity: 0.85;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes paper-appear {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}
@keyframes tools-arrive {
  from {
    opacity: 0.9;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen.entering * {
    animation: none !important;
  }
}
/* End of src/transitions.css */