/* =========================================================
   Writetyper — Animations
   Keyframes for typing life: cursor, carriage, paper, ink.
   All motion collapses gracefully under reduced-motion.
   ========================================================= */

@keyframes cursor-blink {
  0%, 50% { opacity: 0.9; }
  50.01%, 100% { opacity: 0; }
}

/* paper eases up into the roller when a prompt begins */
@keyframes paper-feed {
  0% {
    transform: translateY(26px) rotateX(7deg);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

.paper.feeding {
  animation: paper-feed var(--t-slow) var(--ease-soft);
}

/* tiny carriage vibration applied per keystroke (transform only) */
@keyframes carriage-tick {
  0% { transform: translateX(0); }
  40% { transform: translateX(-1.3px); }
  100% { transform: translateX(0); }
}

.typewriter.tick .machine {
  animation: carriage-tick 90ms var(--ease-soft);
}

/* the whole sheet nudges left a hair as the carriage advances */
@keyframes sheet-nudge {
  0% { transform: translateX(0); }
  100% { transform: translateX(-0.7px); }
}

/* ink splatter dots when the line finishes */
@keyframes ink-pop {
  0% { opacity: 0; transform: scale(0); }
  55% { opacity: 0.85; transform: scale(1.15); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* a soft settle on the paper when typing completes */
@keyframes paper-settle {
  0% { transform: translateY(0); }
  35% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.paper.settle {
  animation: paper-settle 460ms var(--ease-spring);
}

/* button feedback flash on copy/print */
@keyframes action-flash {
  0% { box-shadow: var(--shadow-soft); }
  30% {
    box-shadow: 0 0 0 2px var(--gold) inset, 0 0 22px -2px rgba(201, 162, 39, 0.5);
  }
  100% { box-shadow: var(--shadow-soft); }
}

/* gentle entrance for the action bar */
@keyframes rise-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.prompt-actions.reveal {
  animation: rise-in var(--t-slow) var(--ease-soft);
}

/* gentle entrance for the whole stage on load */
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

.site-header { animation: fade-up var(--t-slow) var(--ease-soft) both; }
.controls { animation: fade-up var(--t-slow) 120ms var(--ease-soft) both; }
.stage { animation: fade-up var(--t-slow) 220ms var(--ease-soft) both; }

/* =====================================================
   Reduced motion: keep meaning, drop the movement.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .cursor.blink { opacity: 0.9; }

  .mood-card:hover,
  .time-card:hover,
  .btn-action:hover,
  .sound-toggle:hover,
  .btn-generate:hover {
    transform: none;
  }
}