/* ==========================================================================
   ANIMATIONS CSS - KEYFRAMES & TRANSITIONS
   ========================================================================== */

/* 1. Locked State Fairy Lights Glow */
@keyframes bulb-glow-gold {
    0% {
        box-shadow: 0 0 8px 2px var(--gold);
        background-color: #ffd56b;
    }
    100% {
        box-shadow: 0 0 18px 8px var(--gold), 0 0 30px 12px rgba(255, 213, 107, 0.4);
        background-color: #ffea9e;
    }
}

@keyframes bulb-glow-rose {
    0% {
        box-shadow: 0 0 8px 2px var(--rose-sunset);
        background-color: #e23e57;
    }
    100% {
        box-shadow: 0 0 18px 8px var(--rose-sunset), 0 0 30px 12px rgba(226, 62, 87, 0.4);
        background-color: #ff6880;
    }
}

@keyframes bulb-glow-peach {
    0% {
        box-shadow: 0 0 8px 2px var(--peach-sunset);
        background-color: #ffbc97;
    }
    100% {
        box-shadow: 0 0 18px 8px var(--peach-sunset), 0 0 30px 12px rgba(255, 188, 151, 0.4);
        background-color: #ffd8c4;
    }
}

/* 2. Text Shimmer & Glow Pulse */
.glow-pulse {
    animation: text-glow 2.5s ease-in-out infinite alternate;
}

@keyframes text-glow {
    0% {
        text-shadow: 0 0 10px rgba(255, 188, 151, 0.3), 0 0 20px rgba(255, 188, 151, 0.1);
    }
    100% {
        text-shadow: 0 0 25px rgba(255, 188, 151, 0.6), 0 0 45px rgba(255, 126, 103, 0.4);
    }
}

/* 3. Heartbeat animation */
.heartbeat {
    animation: heart-beat 1.6s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes heart-beat {
    0% { transform: scale(1); }
    14% { transform: scale(1.18); }
    28% { transform: scale(1); }
    42% { transform: scale(1.18); }
    70% { transform: scale(1); }
}

/* 4. Compass Spin & Compass Needle Hover */
@keyframes compass-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 5. General Scroll Prompts Fade and Entrance */
.fade-in {
    opacity: 0;
    animation: element-fade-in 1.2s ease-out forwards;
}

.fade-in--delayed {
    opacity: 0;
    animation: element-fade-in 1.2s ease-out 0.6s forwards;
}

.fade-in--delayed-2 {
    opacity: 0;
    animation: element-fade-in 1.2s ease-out 1.2s forwards;
}

@keyframes element-fade-in {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 6. Campfire Islands Flame Simulation */
.fire-flame {
    transform-origin: 50px 68px;
    animation: flame-dance 1.4s ease-in-out infinite alternate;
}

.flame-main {
    animation-duration: 1.1s;
}

.flame-inner {
    animation-duration: 0.8s;
    animation-delay: 0.15s;
}

@keyframes flame-dance {
    0% { transform: scaleY(1) skewX(-1.5deg); }
    50% { transform: scaleY(1.08) scaleX(0.96) skewX(2deg); }
    100% { transform: scaleY(0.97) skewX(-1deg); }
}

/* 7. Lighthouse Beam Sweep */
.lighthouse-beam-left {
    transform-origin: 50px 41px;
    animation: beam-sweep-left 5.5s ease-in-out infinite alternate;
}

.lighthouse-beam-right {
    transform-origin: 50px 41px;
    animation: beam-sweep-right 5.5s ease-in-out infinite alternate;
}

@keyframes beam-sweep-left {
    0% { transform: rotate(8deg); opacity: 0.12; }
    50% { opacity: 0.45; }
    100% { transform: rotate(-22deg); opacity: 0.12; }
}

@keyframes beam-sweep-right {
    0% { transform: rotate(-8deg); opacity: 0.12; }
    50% { opacity: 0.45; }
    100% { transform: rotate(22deg); opacity: 0.12; }
}

/* 8. Star Twinkling Animation */
.twinkle-star {
    animation: star-twinkle 1.8s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
    0% { opacity: 0.25; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* 9. Floating Bottle */
.floating-bottle {
    animation: bottle-float 5.5s ease-in-out infinite;
}

@keyframes bottle-float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(6deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* 10. Sparkle Rings for Map Nodes */
@keyframes pulse-ring {
    0% { transform: scale(0.92); opacity: 0.8; }
    80%, 100% { transform: scale(1.35); opacity: 0; }
}

/* 11. Falling / Floating Particles on Unlocked Screen */
.unlocked-celebration-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99;
    border-radius: 50%;
    animation: particle-rise 4.5s ease-in-out forwards;
}

@keyframes particle-rise {
    0% {
        transform: translateY(105vh) translateX(0) scale(0.5);
        opacity: 0;
    }
    15% {
        opacity: 0.75;
    }
    90% {
        opacity: 0.75;
    }
    100% {
        transform: translateY(-10vh) translateX(var(--drift)) scale(1.2);
        opacity: 0;
    }
}