/* ==========================================================================
   Hikaye Sahnesi — Animasyon kütüphanesi
   Süreler ve easing değerleri tasarım handoff'undan birebir alınmıştır.
   ========================================================================== */

/* Karakter nefes alma — 3.2s ease-in-out infinite */
@keyframes hs-idle {
  0%, 100% { transform: translateY(-6px) scale(1); }
  50%      { transform: translateY(6px) scale(1.02); }
}

/* Sevinç dansı — 1.3s ease-out, 2 tekrar */
@keyframes hs-dance {
  0%   { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-52px) rotate(14deg); }
  45%  { transform: translateY(0) rotate(-14deg); }
  70%  { transform: translateY(-28px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Kostüm değişimi — 1s ease-out (geçiş) / 2.4s linear infinite (modal) */
@keyframes hs-spin {
  0%   { transform: rotateY(0deg) scale(.9); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* Rozet parlaması — 1.6s ease-in-out infinite */
@keyframes hs-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 61, .55); }
  50%      { box-shadow: 0 0 42px 10px rgba(255, 217, 61, .55); }
}

/* Modal girişi — .5s cubic-bezier(.2,1.5,.4,1) */
@keyframes hs-pop {
  0%   { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* +XP metni yukarı süzülme — 1.6s ease-out forwards */
@keyframes hs-float {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -72px); }
}

/* Konfeti düşüşü — 1.5-2.6s ease-in forwards */
@keyframes hs-fall {
  0%   { opacity: 1; transform: translateY(-40px) rotate(0deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(560px) rotate(720deg); }
}

/* Toast — 3.6s ease-in-out forwards */
@keyframes hs-toast {
  0%        { transform: translateX(140%); }
  12%, 82%  { transform: translateX(0); }
  100%      { transform: translateX(140%); }
}

/* Nabız — 1.2-2.4s ease-in-out infinite */
@keyframes hs-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Grafik çubuğu yükselmesi — .9s cubic-bezier(.2,.9,.3,1) both */
@keyframes hs-rise {
  0%   { height: 6%; }
  100% { height: var(--hs-bar-height, 6%); }
}

/* Rozet parıltısı — 2s linear */
@keyframes hs-shine {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Yükleme spinner'ı — 1s linear infinite */
@keyframes hs-spinner {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Animasyon sınıfları
   ========================================================================== */

.hs-anim-idle   { animation: hs-idle 3.2s ease-in-out infinite; }
.hs-anim-dance  { animation: hs-dance 1.3s ease-out 2; }
.hs-anim-spin   { animation: hs-spin 1s ease-out 1; }
.hs-anim-spin-loop { animation: hs-spin 2.4s linear infinite; }
.hs-anim-glow   { animation: hs-glow 1.6s ease-in-out infinite; }
.hs-anim-pop    { animation: hs-pop .5s cubic-bezier(.2, 1.5, .4, 1); }
.hs-anim-float  { animation: hs-float 1.6s ease-out forwards; }
.hs-anim-toast  { animation: hs-toast 3.6s ease-in-out forwards; }
.hs-anim-pulse  { animation: hs-pulse 1.2s ease-in-out infinite; }
.hs-anim-pulse-slow { animation: hs-pulse 2.4s ease-in-out infinite; }
.hs-anim-rise   { animation: hs-rise .9s cubic-bezier(.2, .9, .3, 1) both; }

/* ==========================================================================
   Erişilebilirlik: hareket azaltma
   İşlevsellik animasyonsuz da eksiksiz çalışır.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.hs-reduce-motion *,
.hs-reduce-motion *::before,
.hs-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}