/* ============================================================
   ANIMATIONS.CSS - Tüm Animasyonlar (Keyframes)
   ------------------------------------------------------------
   Bu dosya, sitede kullanılan tüm @keyframes animasyonlarını
   merkezi bir yerde toplar. Böylece tek yerden yönetilir.
   ============================================================ */

/* ============================================================
   1. TAILWIND ANİMASYONLARI
   ============================================================ */

/* ----- Bounce (Zıplama) ----- */
@keyframes bounce {
  0%, to {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}

/* ----- Ping (Yayılma) ----- */
@keyframes ping {
  75%, to {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ----- Pulse (Nabız) ----- */
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ----- Spin (Dönme) ----- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* ============================================================
   2. ÖZEL ANİMASYONLAR
   ============================================================ */

/* ----- Slow Pulse (Yavaş Nabız) ----- */
@keyframes slowPulse {
  0%, to {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* ----- Slow Ping (Yavaş Yayılma) ----- */
@keyframes slowPing {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ----- White Pulse (Beyaz Nabız) ----- */
@keyframes whitePulse {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.1;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ----- Pulse Glow (Radyo Player Butonu için) ----- */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1.1);
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1));
  }
}

/* ============================================================
   3. İTİRAF SAYFASI ANİMASYONLARI
   ============================================================ */

/* ----- Feather Fall (Tüy Düşüşü) ----- */
@keyframes featherFall {
  0% {
    transform: translateY(-30px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(calc(100vh + 30px)) rotate(360deg);
    opacity: 0;
  }
}

/* ----- Spark Fly (Kıvılcım Uçuşu) ----- */
@keyframes sparkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* ----- Fill Red (İtiraf Et Kırmızı Dolma) ----- */
@keyframes fillRed {
  0%, 100% {
    color: transparent;
    -webkit-text-stroke: 1.5px red;
  }
  50% {
    color: red;
    -webkit-text-stroke: 1.5px transparent;
  }
}

/* ----- Star Blink (Yıldız Yanıp Sönme) ----- */
@keyframes starBlink {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(250, 200, 21, 1));
    transform: scale(1.1);
  }
  50% {
    opacity: 0.3;
    filter: none;
    transform: scale(0.9);
  }
}