/* ========================================
   PokeCroc - Magical Swamp Effects
   ======================================== */

/* Fireflies/Glowing Particles */
.fireflies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.firefly {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(126, 217, 126, 1), rgba(92, 184, 92, 0.5));
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(126, 217, 126, 0.8),
                0 0 20px rgba(92, 184, 92, 0.6);
    animation: firefly-float 15s infinite ease-in-out;
    opacity: 0;
}

@keyframes firefly-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}

/* Mist/Fog Effect */
.swamp-mist {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, 
        rgba(92, 184, 92, 0.1) 0%,
        rgba(126, 217, 126, 0.05) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
    animation: mist-flow 20s ease-in-out infinite;
}

@keyframes mist-flow {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: translateX(50px);
    }
}

/* Water Ripple Effect */
.water-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(92, 184, 92, 0.3);
    animation: ripple 3s ease-out infinite;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Vine Growth Animation */
.vine-decoration {
    position: absolute;
    width: 4px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(92, 184, 92, 0.4) 20%,
        rgba(126, 217, 126, 0.3) 80%,
        transparent 100%
    );
    animation: vine-grow 2s ease-out forwards;
}

@keyframes vine-grow {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

/* Leaf Falling Effect */
.falling-leaf {
    position: fixed;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, 
        rgba(92, 184, 92, 0.6) 0%,
        rgba(126, 217, 126, 0.4) 100%
    );
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: leaf-fall 10s infinite ease-in;
    pointer-events: none;
    z-index: 4;
}

@keyframes leaf-fall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Glowing Mushroom Effect */
.glowing-mushroom {
    position: relative;
    display: inline-block;
}

.glowing-mushroom::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle,
        rgba(92, 184, 92, 0.4) 0%,
        rgba(126, 217, 126, 0.2) 50%,
        transparent 100%
    );
    border-radius: 50%;
    animation: mushroom-glow 2s ease-in-out infinite;
}

@keyframes mushroom-glow {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
    }
}

/* Swamp Bubble Animation */
.swamp-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.3),
        rgba(92, 184, 92, 0.2) 50%,
        rgba(92, 184, 92, 0.1)
    );
    animation: bubble-rise 4s ease-in infinite;
    pointer-events: none;
}

@keyframes bubble-rise {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(1);
        opacity: 0;
    }
}

/* Crocodile Eye Glow */
.croc-eye-glow {
    position: relative;
}

.croc-eye-glow::before,
.croc-eye-glow::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle,
        rgba(255, 107, 107, 1) 0%,
        rgba(255, 107, 107, 0.5) 50%,
        transparent 100%
    );
    border-radius: 50%;
    animation: eye-blink 4s ease-in-out infinite;
}

.croc-eye-glow::before {
    left: 20%;
    top: 30%;
}

.croc-eye-glow::after {
    right: 20%;
    top: 30%;
}

@keyframes eye-blink {
    0%, 90%, 100% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
}

/* Water reflection removed - image not available */

/* Poison Drip Effect */
.poison-drip {
    position: absolute;
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom,
        rgba(92, 184, 92, 0.8),
        rgba(126, 217, 126, 0.4)
    );
    border-radius: 0 0 50% 50%;
    animation: drip 3s ease-in infinite;
}

@keyframes drip {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

/* Mystical Glow Pulse */
.mystical-glow {
    animation: mystical-pulse 3s ease-in-out infinite;
}

@keyframes mystical-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(92, 184, 92, 0.3),
                    0 0 40px rgba(92, 184, 92, 0.2),
                    inset 0 0 20px rgba(92, 184, 92, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(92, 184, 92, 0.5),
                    0 0 60px rgba(92, 184, 92, 0.3),
                    inset 0 0 30px rgba(92, 184, 92, 0.2);
    }
}

/* Swamp Vines Border */
.vines-border {
    position: relative;
    border: 3px solid rgba(92, 184, 92, 0.3);
}

.vines-border::before {
    content: '🌿';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 20px;
    animation: vine-sway 3s ease-in-out infinite;
}

.vines-border::after {
    content: '🌿';
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 20px;
    animation: vine-sway 3s ease-in-out infinite reverse;
}

@keyframes vine-sway {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

/* Toxic Smoke Effect */
.toxic-smoke {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,
        rgba(92, 184, 92, 0.3) 0%,
        rgba(126, 217, 126, 0.1) 50%,
        transparent 100%
    );
    border-radius: 50%;
    animation: smoke-rise 5s ease-out infinite;
    pointer-events: none;
}

@keyframes smoke-rise {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-200px) scale(1.5);
        opacity: 0;
    }
}

/* Apply effects to specific elements */
.main-header {
    position: relative;
}

.hero-slider {
    position: relative;
}

/* Add subtle animations to cards */
.news-card,
.themebox {
    position: relative;
}

/* Hover effects with swamp theme */
.btn:hover {
    position: relative;
}

.btn:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(126, 217, 126, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: button-ripple 0.6s ease-out;
}

@keyframes button-ripple {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}