/* ===============================================
   Datei: css/animationen.css
   Zweck: Blut-, Fade- und Mystery-Animationen
   Projekt: Haus Krematorium – Phase 0.1
   =============================================== */

/* === Mystik-Container & Texte === */
#mystik-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: pre-line;
  word-break: keep-all;
  text-align: center;
  max-width: 100vw;
  padding: 1em;
}
.mystik-text {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2em;
  color: #aa0000;
  text-shadow: 2px 2px 4px #000;
  white-space: pre-line;
  word-break: normal;
  line-height: 1.5em;
  animation: mystik-appear 2s ease forwards;
  opacity: 0;
  margin-bottom: 0.5em;
  position: relative;
}

/* === Fade-In allgemein === */
.fade-in {
  animation: fadeIn 1.5s ease-in forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === Mystik Zoom (optional) === */
@keyframes mystikZoomIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* === Ein-/Ausblend-Animation für mystik-text */
@keyframes mystik-appear {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mystik-ausblenden {
  animation: mystik-disappear 1.5s ease forwards;
}
@keyframes mystik-disappear {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* === Bluttropfen-Fallbewegung */
@keyframes blutFall {
  0% { top: 0; opacity: 1; transform: scale(1); }
  100% { top: 100%; opacity: 0; transform: scale(0.5); }
}
@keyframes tropfen-fallen {
  0% { top: 0; opacity: 1; }
  100% { top: 150%; opacity: 0; }
}
.blut-tropfen {
  position: absolute;
  top: 0;
  width: 8px;
  height: 18px;
  background: radial-gradient(ellipse at center, #8b0000 0%, #400000 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: tropfen-fallen 1.5s linear forwards;
  pointer-events: none;
  z-index: 999;
  opacity: 0.9;
  box-shadow: 0 0 6px #600a;
}

/* === Blutregen-Container === */
#blut-regen {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

/* === Optional: Pulsierender Effekt === */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px #900a; }
  50% { box-shadow: 0 0 22px #f00a; }
}
.pulsierend {
  animation: pulseGlow 2.5s infinite;
}