/* Micro-interazioni sobrie e coerenti (150–320 ms). Con prefers-reduced-motion
   le animazioni sono azzerate da base.css. */

.fade-in { animation: fade-in var(--duration-slow) var(--ease-out) both; }
.rise-in { animation: rise-in var(--duration-slow) var(--ease-out) both; }
.scale-in { animation: scale-in var(--duration) var(--ease-out) both; }

/* Figli in cascata: applica .stagger al contenitore */
.stagger > * { animation: rise-in var(--duration-slow) var(--ease-out) both; }
.stagger > :nth-child(1) { animation-delay: 0ms; }
.stagger > :nth-child(2) { animation-delay: 35ms; }
.stagger > :nth-child(3) { animation-delay: 70ms; }
.stagger > :nth-child(4) { animation-delay: 105ms; }
.stagger > :nth-child(5) { animation-delay: 140ms; }
.stagger > :nth-child(6) { animation-delay: 175ms; }
.stagger > :nth-child(7) { animation-delay: 210ms; }
.stagger > :nth-child(8) { animation-delay: 245ms; }
.stagger > :nth-child(n+9) { animation-delay: 280ms; }

/* Transizione di vista fra temi (ui/theme.js usa document.startViewTransition) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }

/* Cursore di scrittura durante lo streaming */
.cursor-blink::after {
  content: "";
  display: inline-block;
  width: 0.55em; height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  border-radius: 2px;
  animation: blink 1s steps(2, start) infinite;
}

/* Puntini "sta scrivendo" */
.typing { display: inline-flex; gap: 4px; align-items: center; height: 1em; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

/* Segnaposto che cambia (swapPlaceholder) */
.placeholder-in::placeholder { animation: fade-in var(--duration-slow) var(--ease-out); }

@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes blink { to { visibility: hidden; } }
@keyframes typing { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }