/* =====================================================
   HİKMET ATÖLYESİ - Animasyon Keyframe'leri
   css/animations.css
   ===================================================== */

/* ─── TEMEL GİRİŞ ANİMASYONLARI ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scaleInBounce {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ─── YÜZEN ANİMASYON ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

/* ─── DÖNEN ANİMASYONLAR ─── */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── NABIZ ANİMASYONLARI ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes pulseGlowAccent {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

/* ─── SALLANMA (Yanlış Cevap) ─── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-8px); }
  30%, 70% { transform: translateX(8px); }
}

@keyframes shakeSmall {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* ─── DOGRU CEVAP EFEKTI ─── */
@keyframes correctPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }
}

/* ─── KART ÇEVİRME ─── */
@keyframes flipInY {
  from { transform: perspective(600px) rotateY(-90deg); opacity: 0; }
  to { transform: perspective(600px) rotateY(0deg); opacity: 1; }
}

@keyframes flipOutY {
  from { transform: perspective(600px) rotateY(0deg); opacity: 1; }
  to { transform: perspective(600px) rotateY(90deg); opacity: 0; }
}

/* ─── SAYFA GEÇİŞİ ─── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── CONFETTI ─── */
@keyframes confettiFall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ─── RÜTBE TERFI ─── */
@keyframes rankUp {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  40% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  70% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ─── IŞILTILI GİRİŞ ─── */
@keyframes glowIn {
  0% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 30px 10px var(--color-accent-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── YILDIZ PATLAMASI ─── */
@keyframes starBurst {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.4) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* ─── BASAMAKLI GİRİŞ ─── */
@keyframes staggeredFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── ARKA PLAN YILDIZLARI ─── */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ─── GEOMETRİK DESEN ANİMASYONU ─── */
@keyframes patternShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 60px 60px; }
}

/* ─── UYGULAMA SINIFLARI ─── */
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s ease forwards; }
.animate-scale-in { animation: scaleIn 0.4s ease forwards; }
.animate-scale-bounce { animation: scaleInBounce 0.5s ease forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-slow { animation: float 5s ease-in-out infinite; }
.animate-rotate { animation: rotate 1s linear infinite; }
.animate-rotate-slow { animation: rotateSlow 12s linear infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease; }
.animate-page-in { animation: pageIn 0.4s ease forwards; }

/* Basamaklı animasyon gecikmeleri */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Görünmez başlangıç (animasyon tetiklenene kadar) */
.will-animate {
  opacity: 0;
  transform: translateY(20px);
}

.will-animate.animated {
  animation: fadeInUp 0.6s ease forwards;
}

/* ─── OYUN ANIMASYON SINIFLARI ─── */
.game-correct {
  animation: correctPulse 0.6s ease;
  background-color: var(--color-success-light) !important;
  border-color: var(--color-success) !important;
}

.game-wrong {
  animation: shake 0.5s ease;
  background-color: var(--color-error-light) !important;
  border-color: var(--color-error) !important;
}

.rank-up-effect {
  animation: rankUp 0.8s var(--transition-spring) forwards;
}

.glow-accent {
  animation: glowIn 0.6s ease;
}

/* ─── HOVER EFEKLER ─── */
.hover-lift { transition: transform var(--transition-base); }
.hover-lift:hover { transform: translateY(-4px); }

.hover-scale { transition: transform var(--transition-base); }
.hover-scale:hover { transform: scale(1.03); }

.hover-glow { transition: box-shadow var(--transition-base); }
.hover-glow:hover { box-shadow: var(--shadow-glow-primary); }

/* ─── SCROLL TRIGGER DURUMU ─── */
[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-scroll-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-scroll-reveal="left"] {
  transform: translateX(-30px);
}
[data-scroll-reveal="right"] {
  transform: translateX(30px);
}
[data-scroll-reveal="left"].revealed,
[data-scroll-reveal="right"].revealed {
  transform: translateX(0);
}

[data-scroll-reveal="scale"] {
  transform: scale(0.9);
}
[data-scroll-reveal="scale"].revealed {
  transform: scale(1);
}

/* ─── AZALTILMIŞ HAREKET ERİŞİLEBİLİRLİĞİ ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}