/**
 * src/css/animations.css
 * Das zentrale Rechenzentrum für alle Bewegungsabläufe.
 * REFACTORING: Beinhaltet alle globalen Keyframes und den Lade-Spinner.
 * STATUS: v12.5 - Alle Doppel-Codes zentralisiert.
 */

/* ==========================================================================
   1. KEYFRAMES (Die Logik der Bewegungen)
   ========================================================================== */

/* Logo "Faires" Annäherung mit Oszillation */
@keyframes waveMeeting {
    0%   { transform: translateY(-70px); opacity: 0; }
    20%  { opacity: 1; transform: translateY(45px); }
    40%  { transform: translateY(-30px); }
    60%  { transform: translateY(18px); }
    80%  { transform: translateY(-6px); }
    100% { transform: translateY(0); opacity: 1; }
}

/* Logo "Dating" Annäherung mit Oszillation */
@keyframes waveMeetingReverse {
    0%   { transform: translateY(70px); opacity: 0; }
    20%  { opacity: 1; transform: translateY(-45px); }
    40%  { transform: translateY(30px); }
    60%  { transform: translateY(-18px); }
    80%  { transform: translateY(6px); }
    100% { transform: translateY(0); opacity: 1; }
}

/* Der Herzschlag des Logos */
@keyframes pamPamHeartbeat {
    0%, 30%, 60%, 100% { transform: scale(1); }
    35% { transform: scale(1.18); }
    40% { transform: scale(1.08); }
    45% { transform: scale(1.28); }
}

/* Pulsierender Bonus-Hintergrund (z.B. für Buttons oder Badges) */
@keyframes pulseBonus {
    0%, 100% { transform: scale(1); background: rgba(76, 175, 80, 0.05); }
    50% { transform: scale(1.02); background: rgba(76, 175, 80, 0.1); }
}

/* Standard Einblenden */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Skalieren für Modals und Popups */
@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Lade-Spinner Drehung */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hintergrund-Blobs Bewegung */
@keyframes moveBlob {
    from { transform: translate(-10%, -10%) rotate(0deg); }
    to { transform: translate(10%, 10%) rotate(360deg); }
}

/* Goldener Ring-Glow (Sichtbarkeits-Indikator) */
@keyframes ringGlow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); transform: scale(1.03); }
    100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); transform: scale(1); }
}


/* ==========================================================================
   2. ELEMENTE & KLASSEN (Design der Animationen)
   ========================================================================== */

/* Der Lade-Spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary-green, #4CAF50);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* Branding-Texte im Login (mit GPU-Beschleunigung) */
.faires-text {
    animation: waveMeeting 4s forwards cubic-bezier(0.45, 0, 0.55, 1);
    will-change: transform, opacity;
}

.dating-text {
    animation: waveMeetingReverse 4s forwards cubic-bezier(0.45, 0, 0.55, 1);
    will-change: transform, opacity;
}

/* Herz-Logo Animation */
#auth-logo {
    animation: pamPamHeartbeat 4s infinite ease-in-out;
}

/* Hintergrund Blobs */
.blob { animation: moveBlob 25s infinite alternate; }
.blob-2 { animation: moveBlob 30s infinite alternate-reverse; }

/* Globale Hilfsklassen für CSS/JS */
.animate-fadeIn { animation: fadeIn 0.5s ease forwards; }
.animate-scaleUp { animation: scaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-pulse-slow { animation: pulseBonus 2.5s infinite ease-in-out; }
.animate-ring-glow { animation: ringGlow 3s infinite ease-in-out; }

/* Übergang beim Ausblenden des Ladeschirms */
.fade-out {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s ease;
}