/* Ergänzt Tailwind (CDN) um Dinge, die Utility-Klassen allein nicht abdecken. */

html, body {
  height: 100%;
}

#camera-video {
  background: #000;
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
  transition: opacity 0.3s ease-in;
}

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

#toast-container > div {
  pointer-events: auto;
}

/* Tap-to-Focus: kurzes Aufblitzen + Schrumpfen am Tap-Punkt, wie native Kamera-Apps. */
#focus-ring.pulse {
  animation: focus-pulse 0.6s ease-out;
}

@keyframes focus-pulse {
  from { opacity: 1; transform: scale(1.4); }
  to { opacity: 0; transform: scale(1); }
}

/* Sanfter View-Wechsel (Scan/Detail/Sammlung) statt hartem Umschalten. */
.view-transition {
  animation: view-fade-in 0.22s ease-out;
}

@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dialoge/Overlays: leichtes Einskalieren statt abruptem Erscheinen. */
#dialog-overlay > div {
  animation: dialog-scale-in 0.16s ease-out;
}

@keyframes dialog-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Dezentes Tap-Feedback auf allen Buttons — fühlt sich reaktiver an. */
button:not(:disabled):active {
  transform: scale(0.97);
}

button {
  transition: transform 0.1s ease-out, background-color 0.15s ease-out, opacity 0.15s ease-out;
}