/* ================================
   ANİMASYONLAR
   ================================ */

/* Parçacık Animasyonları */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: particleFloat 8s ease-in-out infinite;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(1);
    }
}

/* Farklı parçacık süreleri */
.particle:nth-child(1) { animation-delay: 0s; left: 10%; }
.particle:nth-child(2) { animation-delay: 1s; left: 20%; }
.particle:nth-child(3) { animation-delay: 2s; left: 30%; }
.particle:nth-child(4) { animation-delay: 3s; left: 40%; }
.particle:nth-child(5) { animation-delay: 4s; left: 50%; }
.particle:nth-child(6) { animation-delay: 5s; left: 60%; }
.particle:nth-child(7) { animation-delay: 6s; left: 70%; }
.particle:nth-child(8) { animation-delay: 7s; left: 80%; }
.particle:nth-child(9) { animation-delay: 0.5s; left: 15%; }
.particle:nth-child(10) { animation-delay: 1.5s; left: 25%; }
.particle:nth-child(11) { animation-delay: 2.5s; left: 35%; }
.particle:nth-child(12) { animation-delay: 3.5s; left: 45%; }
.particle:nth-child(13) { animation-delay: 4.5s; left: 55%; }
.particle:nth-child(14) { animation-delay: 5.5s; left: 65%; }
.particle:nth-child(15) { animation-delay: 6.5s; left: 75%; }
.particle:nth-child(16) { animation-delay: 7.5s; left: 85%; }

/* Fade Animasyonları */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

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

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

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

/* Slide Animasyonları */
.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

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

.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

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

.slide-in-up {
    animation: slideInUp 0.5s ease forwards;
}

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

/* Pulse Animasyonları */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }
}

/* Shake Animasyonu */
.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Bounce Animasyonu */
.bounce {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Zar Atma Animasyonu */
.dice-rolling {
    animation: diceRolling 1s ease-out;
}

@keyframes diceRolling {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.2);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Oyuncu Pin Hareket Animasyonu */
.pin-move {
    animation: pinMove 0.5s ease-in-out;
}

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

/* İnanç Artış Animasyonu */
.faith-increase {
    animation: faithIncrease 0.8s ease;
}

@keyframes faithIncrease {
    0% {
        transform: scale(1);
        color: inherit;
    }
    50% {
        transform: scale(1.3);
        color: var(--love-color);
    }
    100% {
        transform: scale(1);
        color: inherit;
    }
}

/* İnanç Azalış Animasyonu */
.faith-decrease {
    animation: faithDecrease 0.8s ease;
}

@keyframes faithDecrease {
    0% {
        transform: scale(1);
        color: inherit;
    }
    50% {
        transform: scale(0.8);
        color: var(--fear-color);
    }
    100% {
        transform: scale(1);
        color: inherit;
    }
}

/* Tapınak Kurma Animasyonu */
.temple-build {
    animation: templeBuild 1s ease forwards;
}

@keyframes templeBuild {
    0% {
        transform: scale(0) rotateY(180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotateY(90deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

/* Tapınak Yıkılma Animasyonu */
.temple-destroy {
    animation: templeDestroy 1s ease forwards;
}

@keyframes templeDestroy {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
}

/* Kader Terazisi Animasyonu */
.scale-tilt-left {
    animation: scaleTiltLeft 0.5s ease forwards;
}

@keyframes scaleTiltLeft {
    to {
        transform: rotate(-10deg);
    }
}

.scale-tilt-right {
    animation: scaleTiltRight 0.5s ease forwards;
}

@keyframes scaleTiltRight {
    to {
        transform: rotate(10deg);
    }
}

/* Unutulma Animasyonu */
.oblivion-effect {
    animation: oblivionEffect 3s ease forwards;
}

@keyframes oblivionEffect {
    0% {
        filter: grayscale(0) brightness(1);
    }
    50% {
        filter: grayscale(0.5) brightness(0.7);
    }
    100% {
        filter: grayscale(1) brightness(0.3);
    }
}

/* Geri Dönüş Animasyonu */
.return-from-oblivion {
    animation: returnFromOblivion 2s ease forwards;
}

@keyframes returnFromOblivion {
    0% {
        filter: grayscale(1) brightness(0.3);
        transform: scale(0.8);
    }
    50% {
        filter: grayscale(0.3) brightness(1.2);
        transform: scale(1.1);
    }
    100% {
        filter: grayscale(0) brightness(1);
        transform: scale(1);
    }
}

/* Kurban Sunma Animasyonu */
.sacrifice-performed {
    animation: sacrificePerformed 1.5s ease;
}

@keyframes sacrificePerformed {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5);
    }
    50% {
        box-shadow: 0 0 30px 10px rgba(231, 76, 60, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

/* Ragnarök Efekti Animasyonu */
.ragnarok-effect {
    animation: ragnarokEffect 1s ease;
}

@keyframes ragnarokEffect {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
    25% {
        box-shadow: 0 0 30px 10px rgba(231, 76, 60, 0.8);
    }
    50% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
    75% {
        box-shadow: 0 0 30px 10px rgba(231, 76, 60, 0.8);
    }
}

/* Tur Değişim Animasyonu */
.turn-change {
    animation: turnChange 0.8s ease;
}

@keyframes turnChange {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    50% {
        opacity: 1;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kazanan Animasyonu */
.winner-celebration {
    animation: winnerCelebration 2s ease infinite;
}

@keyframes winnerCelebration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }
    25% {
        transform: scale(1.05) rotate(2deg);
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
    }
    50% {
        transform: scale(1.1) rotate(0deg);
        text-shadow: 0 0 40px rgba(212, 175, 55, 1);
    }
    75% {
        transform: scale(1.05) rotate(-2deg);
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
    }
}

/* Konfeti Animasyonu */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    pointer-events: none;
    animation: confettiFall 3s ease-out forwards;
}

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

/* Yıldız Parıltısı */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* Dalgalanma Efekti */
.ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--gold);
    animation: ripple 1s ease-out forwards;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
        margin-left: -100px;
        margin-top: -100px;
    }
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Progress Bar Animasyonu */
.progress-fill {
    animation: progressFill 1s ease forwards;
}

@keyframes progressFill {
    from {
        width: 0;
    }
}

/* Typing Effect */
.typing-effect {
    overflow: hidden;
    border-right: 2px solid var(--gold);
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--gold);
    }
}

/* Hover Glow Effect */
.hover-glow {
    transition: all var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 
        0 0 10px rgba(212, 175, 55, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2),
        0 0 30px rgba(212, 175, 55, 0.1);
}

/* İnanç Akışı Animasyonu (Kader Odası) */
.faith-flow-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: faithFlow 3s ease-in-out infinite;
}

@keyframes faithFlow {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(var(--flow-x, 50px), var(--flow-y, -30px)) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--flow-x, 50px) * 2), calc(var(--flow-y, -30px) * 2)) scale(0);
        opacity: 0;
    }
}

.faith-flow-particle.fear {
    background: var(--fear-color);
    --flow-x: 60px;
    --flow-y: -40px;
}

.faith-flow-particle.love {
    background: var(--love-color);
    --flow-x: -50px;
    --flow-y: -50px;
}

.faith-flow-particle.justice {
    background: var(--justice-color);
    --flow-x: 40px;
    --flow-y: 30px;
}

.faith-flow-particle.war {
    background: var(--war-color-faith);
    --flow-x: -60px;
    --flow-y: 20px;
}

.faith-flow-particle.fertility {
    background: var(--fertility-color);
    --flow-x: 30px;
    --flow-y: -40px;
}