/* css/animations.css */

/* Cursor-Blink */
@keyframes blink {
  50% { background: transparent; }
}

/* Farbverlauf pro Buchstabe */
.char {
  display: inline;
  animation: fadeColor 1.2s forwards;
}
@keyframes fadeColor {
  0%   { color: #7a9fe0; }
  33%  { color: #2d5db0; }
  66%  { color: #0f3b88; }
  100% { color: #000; }
}

/* Punkt-Navigation */
.dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  transition: transform .7s ease, opacity .7s ease;
}
.dots.spin-out { transform: translateY(2rem); opacity: 0; }
.dot { width: .75rem; height: .75rem; border-radius: 50%; background: #ccc; transition: background .3s; }
.dot.active { background: var(--dot-active); }

/* Spin–Animation für Icon */
@keyframes spin-fast { to { transform: rotate(360deg); } }
.spin-fast { animation: spin-fast .2s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow .7s ease-out 1; }

/* Flip-Animationen für Modal-Dialoge */
@keyframes flip-forward   { 0%{transform:perspective(600px)rotateY(0deg);} 100%{transform:perspective(600px)rotateY(-180deg);} }
@keyframes flip-backward  { 0%{transform:perspective(600px)rotateY(-180deg);}100%{transform:perspective(600px)rotateY(0deg);} }
.flip-forward  { animation: flip-forward 0.6s ease both; }
.flip-backward { animation: flip-backward 0.6s ease both; }

/* Modal-Auswahl-Buttons */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.modal-buttons .modal-btn {
  background: #0F3B88;
  color: #fff;
  border: none;
  padding: .75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: transform .2s ease;
}
.modal-buttons .modal-btn:hover {
  transform: scale(1.05);
}

/* Back-Arrow Button */
.modal-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.modal-back img {
  width: 24px;
  height: 24px;
}


@keyframes flyInRight {
  0%   { opacity: 0; transform: translateX(24px) scale(.98); }
  60%  { opacity: 1; transform: translateX(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}