/**
 * Bonuscuyum SVG İkon Animasyonları
 * Casino temalı, hover-tetiklemeli animasyonlar
 */

/* ========================================
   GENEL SVG AYARLARI
   ======================================== */

.icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  transition: transform 0.3s ease;
}

.icon-sm { width: 32px; height: 32px; }
.icon-md { width: 48px; height: 48px; }
.icon-lg { width: 64px; height: 64px; }
.icon-xl { width: 96px; height: 96px; }

/* ========================================
   KATEGORİ İKONLARI ANİMASYONLARI
   ======================================== */

/* Deneme Bonusu - Hediye kutusu açılma */
.icon-deneme-bonus .gift-lid {
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-deneme-bonus:hover .gift-lid {
  transform: translateY(-8px) rotate(-15deg);
}

.icon-deneme-bonus .gift-bow {
  transition: transform 0.3s ease;
}

.icon-deneme-bonus:hover .gift-bow {
  transform: scale(1.1);
}

.icon-deneme-bonus .gift-sparkles {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon-deneme-bonus:hover .gift-sparkles {
  opacity: 1;
  animation: sparkle 0.6s ease-in-out infinite alternate;
}

/* Yatırım Bonusu - Para yığını parlama */
.icon-yatirim-bonus .coin-top {
  transition: filter 0.3s ease;
}

.icon-yatirim-bonus:hover .coin-top {
  filter: url(#coinGlow) brightness(1.2);
}

.icon-yatirim-bonus .shine-effect {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon-yatirim-bonus:hover .shine-effect {
  opacity: 1;
  animation: shine-pulse 0.8s ease-in-out infinite;
}

.icon-yatirim-bonus .coin-shine {
  transition: transform 0.3s ease;
}

.icon-yatirim-bonus:hover .coin-shine {
  animation: coin-bounce 0.5s ease-in-out;
}

/* Kayıp Bonusu - Kalkan pulse efekti */
.icon-kayip-bonus .shield-body {
  transition: filter 0.3s ease;
}

.icon-kayip-bonus:hover .shield-body {
  filter: url(#shieldGlow);
}

.icon-kayip-bonus .pulse-rings circle {
  transform-origin: center;
  opacity: 0;
}

.icon-kayip-bonus:hover .pulse-1 {
  animation: pulse-ring 1s ease-out infinite;
}

.icon-kayip-bonus:hover .pulse-2 {
  animation: pulse-ring 1s ease-out infinite 0.3s;
}

.icon-kayip-bonus .shield-check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.5s ease;
}

.icon-kayip-bonus:hover .shield-check {
  stroke-dashoffset: 0;
}

/* Freespin - Slot makarası dönme */
.icon-freespin .reel {
  transition: transform 0.1s linear;
}

.icon-freespin:hover .reel-1 {
  animation: slot-spin 0.5s ease-out;
}

.icon-freespin:hover .reel-2 {
  animation: slot-spin 0.6s ease-out 0.1s;
}

.icon-freespin:hover .reel-3 {
  animation: slot-spin 0.7s ease-out 0.2s;
}

.icon-freespin .spin-sparkles {
  opacity: 0;
}

.icon-freespin:hover .spin-sparkles {
  opacity: 1;
  animation: sparkle 0.4s ease-in-out infinite alternate;
}

/* Cashback - Geri dönen para bounce */
.icon-cashback .cashback-arrow {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-cashback:hover .cashback-arrow {
  animation: arrow-rotate 0.8s ease-in-out;
}

.icon-cashback .cashback-coin {
  transition: transform 0.3s ease;
}

.icon-cashback:hover .cashback-coin {
  animation: coin-return 0.6s ease-out;
}

.icon-cashback .bounce-coins .coin-bounce-1 {
  opacity: 0;
}

.icon-cashback .bounce-coins .coin-bounce-2 {
  opacity: 0;
}

.icon-cashback:hover .bounce-coins .coin-bounce-1 {
  animation: coin-drop 0.5s ease-out 0.2s forwards;
}

.icon-cashback:hover .bounce-coins .coin-bounce-2 {
  animation: coin-drop 0.5s ease-out 0.4s forwards;
}

/* ========================================
   GENEL SİTE İKONLARI ANİMASYONLARI
   ======================================== */

/* Casino Chip - Dönen */
.icon-casino-chip .chip-rotate {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-casino-chip:hover .chip-rotate {
  animation: chip-spin 0.8s ease-in-out;
}

/* Jackpot - Parlayan kupa */
.icon-jackpot .trophy-shine {
  transition: filter 0.3s ease;
}

.icon-jackpot:hover .trophy-shine {
  filter: url(#trophyGlow) brightness(1.15);
}

.icon-jackpot .trophy-star {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-jackpot:hover .trophy-star {
  animation: star-spin 0.6s ease-in-out;
}

.icon-jackpot .trophy-sparkles {
  opacity: 0.5;
}

.icon-jackpot:hover .trophy-sparkles {
  opacity: 1;
  animation: sparkle 0.5s ease-in-out infinite alternate;
}

/* VIP - Glow efekti */
.icon-vip .vip-glow {
  transition: filter 0.3s ease;
}

.icon-vip:hover .vip-glow {
  filter: url(#vipGlow) drop-shadow(0 0 8px rgba(147, 51, 234, 0.6));
}

.icon-vip .vip-crown {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-vip:hover .vip-crown {
  animation: crown-bounce 0.5s ease-in-out;
}

.icon-vip .vip-sparkles {
  opacity: 0.3;
}

.icon-vip:hover .vip-sparkles {
  opacity: 1;
  animation: sparkle 0.4s ease-in-out infinite alternate;
}

/* Yıldız - Twinkle */
.icon-star .star-twinkle {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-star:hover .star-twinkle {
  animation: star-twinkle 0.6s ease-in-out;
}

.icon-star .star-sparkles circle,
.icon-star .star-sparkles path {
  opacity: 0;
}

.icon-star:hover .twinkle-1 { animation: twinkle-appear 0.4s ease-out 0s forwards; }
.icon-star:hover .twinkle-2 { animation: twinkle-appear 0.4s ease-out 0.1s forwards; }
.icon-star:hover .twinkle-3 { animation: twinkle-appear 0.4s ease-out 0.2s forwards; }
.icon-star:hover .twinkle-4 { animation: twinkle-appear 0.4s ease-out 0.3s forwards; }
.icon-star:hover .twinkle-5 { animation: twinkle-appear 0.4s ease-out 0.15s forwards; }
.icon-star:hover .twinkle-6 { animation: twinkle-appear 0.4s ease-out 0.25s forwards; }

/* Zar - Yuvarlanma */
.icon-dice .dice-roll-1 {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-dice .dice-roll-2 {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.icon-dice:hover .dice-roll-1 {
  animation: dice-shake 0.5s ease-in-out;
}

.icon-dice:hover .dice-roll-2 {
  animation: dice-shake 0.5s ease-in-out 0.1s;
}

/* Kartlar - Dağılma */
.icon-cards .card {
  transition: transform 0.3s ease;
}

.icon-cards:hover .card-back {
  animation: card-spread-left 0.4s ease-out forwards;
}

.icon-cards:hover .card-front {
  animation: card-spread-right 0.4s ease-out forwards;
}

.icon-cards:hover .card-middle {
  animation: card-lift 0.3s ease-out forwards;
}

/* Düşen Paralar */
.icon-coins .coin-fall-1,
.icon-coins .coin-fall-2,
.icon-coins .coin-fall-3,
.icon-coins .coin-fall-4,
.icon-coins .coin-fall-5 {
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon-coins:hover .coin-fall-1 { animation: fall-bounce 0.6s ease-out; }
.icon-coins:hover .coin-fall-2 { animation: fall-bounce 0.6s ease-out 0.1s; }
.icon-coins:hover .coin-fall-3 { animation: fall-bounce 0.6s ease-out 0.05s; }
.icon-coins:hover .coin-fall-4 { animation: fall-bounce 0.6s ease-out 0.15s; }
.icon-coins:hover .coin-fall-5 { animation: fall-bounce 0.6s ease-out 0.2s; }

/* ========================================
   KEYFRAME ANİMASYONLARI
   ======================================== */

@keyframes sparkle {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}

@keyframes shine-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes coin-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes slot-spin {
  0% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(5px); }
  75% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes arrow-rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}

@keyframes coin-return {
  0% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}

@keyframes coin-drop {
  0% { opacity: 0; transform: translateY(-20px); }
  60% { opacity: 1; transform: translateY(5px); }
  80% { transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes chip-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes star-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes star-twinkle {
  0% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes twinkle-appear {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes crown-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  60% { transform: translateY(-1px); }
}

@keyframes dice-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg) translateY(-3px); }
  50% { transform: rotate(-8deg) translateY(-2px); }
  75% { transform: rotate(5deg) translateY(-1px); }
}

@keyframes card-spread-left {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(-25deg) translateX(-5px); }
}

@keyframes card-spread-right {
  0% { transform: rotate(15deg); }
  100% { transform: rotate(25deg) translateX(5px); }
}

@keyframes card-lift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

@keyframes fall-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(8px); }
  70% { transform: translateY(-3px); }
  85% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ========================================
   UI İKONLARI HOVER EFEKTLERİ
   ======================================== */

.ui-icon {
  transition: transform 0.2s ease, color 0.2s ease;
}

.ui-icon:hover {
  transform: scale(1.1);
  color: #FFD700;
}

/* Sosyal medya ikonları renkleri */
.social-icon {
  transition: transform 0.2s ease, fill 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.15);
}

.social-icon.telegram:hover { color: #0088cc; }
.social-icon.twitter:hover { color: #1DA1F2; }
.social-icon.instagram:hover { color: #E4405F; }
.social-icon.facebook:hover { color: #1877F2; }
.social-icon.youtube:hover { color: #FF0000; }
.social-icon.discord:hover { color: #5865F2; }
.social-icon.whatsapp:hover { color: #25D366; }
.social-icon.tiktok:hover { color: #000000; }
.social-icon.linkedin:hover { color: #0A66C2; }

/* ========================================
   GENEL HOVER SCALE EFEKTİ
   ======================================== */

.icon-hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-hover-scale:hover {
  transform: scale(1.1);
}

/* ========================================
   REDUCED MOTION DESTEĞİ
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .icon,
  .icon *,
  .ui-icon,
  .social-icon {
    animation: none !important;
    transition: none !important;
  }
}