/**
 * RAWAIM STORE - MOTION LAYER
 * Sadece transform, opacity, filter ve box-shadow geçişleri içerir.
 * Hareketsiz halde mevcut tasarıma piksel düzeyinde sadıktır.
 */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================
   A. AÇILIŞ SEKANSI (Rule 1: Sadece from / ara kareler, backwards)
   ======================================================== */

/* 1. Üst Rozet & Kırmızı Nokta Nabzı */
@keyframes m-badge-in {
  from {
    opacity: 0;
    translate: 0 -14px;
  }
}

.store-meta-badge {
  animation: m-badge-in 0.6s var(--m-ease) backwards;
}

/* Rule 4: Sürekli döngü (sadece 50%, mevcut stile dönüş) */
@keyframes m-pulse-dot {
  50% {
    opacity: 0.4;
  }
}

.store-meta-pulse {
  animation: m-pulse-dot 2s ease-in-out infinite;
}

/* 2. Mağaza Başlığı & Neon MAĞAZA Titremesi */
@keyframes m-title-in {
  from {
    opacity: 0;
    filter: blur(10px);
    translate: 0 -10px;
  }
}

.store-main-title {
  animation: m-title-in 0.7s var(--m-ease) backwards;
  animation-delay: 0.08s;
}

@keyframes m-neon-flicker {
  from { opacity: 0; }
  20% { opacity: 0.2; }
  35% { opacity: 0.9; }
  50% { opacity: 0.3; }
  65% { opacity: 1; }
  80% { opacity: 0.5; }
}

.store-main-title .neon-red {
  animation: m-neon-flicker 0.65s ease backwards;
  animation-delay: 0.65s;
}

/* 3. VIP / RANK / SLOT Sekme Çubuğu */
@keyframes m-nav-in {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

.store-categories-nav {
  animation: m-nav-in 0.65s var(--m-ease) backwards;
  animation-delay: 0.25s;
}

/* 4. Sağ Üst Profil Kartı (LEVOZ) */
@keyframes m-profile-in {
  from {
    opacity: 0;
    translate: 16px 0;
  }
}

.steam-profile-card {
  animation: m-profile-in 0.65s var(--m-ease) backwards;
}

/* ========================================================
   B. KARTLAR VE KART İÇİ ZİNCİRLEME ANİMASYON
   ======================================================== */

/* Kart Stagger İndeks Değişkenleri */
.store-card:nth-child(1) { --m-i: 0; }
.store-card:nth-child(2) { --m-i: 1; }
.store-card:nth-child(3) { --m-i: 2; }

/* Liste Maddesi İndeks Değişkenleri */
.store-perk-item:nth-child(1) { --m-p: 0; }
.store-perk-item:nth-child(2) { --m-p: 1; }
.store-perk-item:nth-child(3) { --m-p: 2; }
.store-perk-item:nth-child(4) { --m-p: 3; }
.store-perk-item:nth-child(5) { --m-p: 4; }

/* 1. Kart Yükselişi */
@keyframes m-card-rise {
  from {
    opacity: 0;
    translate: 0 32px;
  }
}

.store-pane.active .store-card {
  animation: m-card-rise 0.75s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.3s);
}

/* 2. Banner Görseli Oturumu (overflow:hidden kapsayıcı içinde) */
@keyframes m-img-settle {
  from {
    scale: 1.08;
  }
}

.store-pane.active .store-card-img {
  animation: m-img-settle 0.9s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.35s);
}

/* 3. Kart İçi Zincir: Rozet, Başlık, Fiyat, Buton */
@keyframes m-chain-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

.store-pane.active .store-card-badge {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.45s);
}

.store-pane.active .store-card-title {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.52s);
}

.store-pane.active .store-price-row {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.86s);
}

.store-pane.active .store-buy-btn {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.94s);
}

/* Liste Maddeleri (Soldan 14px + Fade) */
@keyframes m-perk-in {
  from {
    opacity: 0;
    translate: -14px 0;
  }
}

.store-pane.active .store-perk-item {
  animation: m-perk-in 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.58s + var(--m-p, 0) * 0.06s);
}

/* ✓ İşaretleri Pop (.4 -> 1.2 -> 1) */
@keyframes m-check-pop {
  from {
    scale: 0.4;
  }
  60% {
    scale: 1.2;
  }
}

.store-pane.active .perk-check {
  display: inline-block;
  animation: m-check-pop 0.45s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.64s + var(--m-p, 0) * 0.06s);
}

/* ========================================================
   D. HOVER & ETKİLEŞİM KATMANI (Rule 2: @media hover)
   ======================================================== */

@media (hover: hover) {
  /* Kart Hover: Yay fiziğiyle (JS stepSpring) büyüme & 3D eğilme + yumuşak dış glow */
  .store-card {
    transition:
      border-color 0.45s ease,
      box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .store-card:hover {
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.92), 0 0 42px rgba(255, 45, 61, 0.45);
  }

  .store-card .store-card-img {
    transition:
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      scale 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.5s ease;
  }

  .store-card:hover .store-card-img {
    transform: scale(1.07);
    scale: 1;
  }

  /* Liste Maddesi: 4px sağa kayma, ✓ scale(1.15) */
  .store-perk-item {
    transition: translate 0.35s var(--m-ease), transform 0.35s var(--m-ease);
  }

  .store-perk-item:hover {
    translate: 4px 0;
  }

  .store-perk-item .perk-check {
    transition: scale 0.35s var(--m-ease), transform 0.35s var(--m-ease);
  }

  .store-perk-item:hover .perk-check {
    scale: 1.15;
  }

  /* SATIN AL: 2px yukarı, glow artışı, ok sağa 5px */
  .store-buy-btn {
    transition: transform 0.35s var(--m-ease), translate 0.35s var(--m-ease), box-shadow 0.35s ease, scale 0.25s ease;
  }

  .store-buy-btn:hover {
    translate: 0 -2px;
    box-shadow: 0 8px 24px rgba(255, 45, 61, 0.55), 0 0 20px rgba(255, 45, 61, 0.4);
  }

  .store-buy-btn svg {
    transition: translate 0.35s var(--m-ease), transform 0.35s var(--m-ease);
  }

  .store-buy-btn:hover svg {
    translate: 5px 0;
  }

  /* Sekme İkon Hover: scale(1.12) */
  .store-tab-btn svg {
    transition: scale 0.3s var(--m-ease), transform 0.3s var(--m-ease);
  }

  .store-tab-btn:hover svg {
    scale: 1.12;
  }

  /* Profil Oku (LEVOZ): 180° dönüş */
  .steam-profile-card .steam-caret {
    transition: rotate 0.3s var(--m-ease), transform 0.3s var(--m-ease);
  }

  .steam-profile-card:hover .steam-caret {
    rotate: 180deg;
  }
}

/* SATIN AL :active */
.store-buy-btn:active {
  scale: 0.97;
}

/* ========================================================
   E. SEKME GEÇİŞİ (Rule 3: JS Sınıfları ve Re-enter)
   ======================================================== */

@keyframes m-tab-pop {
  from {
    scale: 0.94;
  }
}

.store-tab-btn.m-pop {
  animation: m-tab-pop 0.25s var(--m-ease) backwards;
}

/* Sekme Değişince Kartların Yeniden Stagger İle Gelmesi */
.store-pane.m-reenter .store-card {
  animation: m-card-rise 0.75s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s);
}

.store-pane.m-reenter .store-card-img {
  animation: m-img-settle 0.9s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.05s);
}

.store-pane.m-reenter .store-card-badge {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.1s);
}

.store-pane.m-reenter .store-card-title {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.16s);
}

.store-pane.m-reenter .store-price-row {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.28s);
}

.store-pane.m-reenter .store-buy-btn {
  animation: m-chain-rise 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.34s);
}

.store-pane.m-reenter .store-perk-item {
  animation: m-perk-in 0.5s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.2s + var(--m-p, 0) * 0.06s);
}

.store-pane.m-reenter .perk-check {
  display: inline-block;
  animation: m-check-pop 0.45s var(--m-ease) backwards;
  animation-delay: calc(var(--m-i, 0) * 0.12s + 0.24s + var(--m-p, 0) * 0.06s);
}

/* ========================================================
   F. SÜREKLİ DÖNGÜ (Rule 4: Sadece ara kareler)
   ======================================================== */

@keyframes m-premium-pulse {
  50% {
    box-shadow: 0 8px 28px rgba(255, 45, 61, 0.55), 0 0 25px rgba(255, 45, 61, 0.4);
  }
}

#paneVip .store-card:nth-child(3) .store-buy-btn {
  animation: m-premium-pulse 3s ease-in-out infinite;
}

/* ========================================================
   G. FADE PERDESİ KORUMASI
   ======================================================== */
@media (prefers-reduced-motion: reduce) {
  .fade-curtain {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}