/* MEME THEME ANIMATIONS - Steal Brainrot Online */

/* Advanced Meme Animations */
@keyframes memeChaos {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: translateX(10px) rotate(5deg) scale(1.05);
        filter: hue-rotate(90deg);
    }
    50% {
        transform: translateX(-5px) rotate(-3deg) scale(1.02);
        filter: hue-rotate(180deg);
    }
    75% {
        transform: translateX(8px) rotate(2deg) scale(1.08);
        filter: hue-rotate(270deg);
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
        filter: hue-rotate(360deg);
    }
}

@keyframes memeExplosion {
    0% {
        transform: scale(1);
        box-shadow: var(--meme-shadow);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 
            0 0 0 10px var(--meme-pink),
            0 0 0 20px var(--meme-green),
            0 0 0 30px var(--meme-cyan),
            0 0 0 40px var(--meme-purple);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--meme-shadow);
    }
}

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

@keyframes memeGlitch {
    0% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translateX(-2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translateX(2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translateX(-1px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translateX(1px);
        filter: hue-rotate(360deg);
    }
    100% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
}

@keyframes memeRainbowText {
    0% {
        color: var(--meme-pink);
        text-shadow: 2px 2px 0px var(--meme-yellow);
    }
    16.66% {
        color: var(--meme-orange);
        text-shadow: 2px 2px 0px var(--meme-pink);
    }
    33.33% {
        color: var(--meme-yellow);
        text-shadow: 2px 2px 0px var(--meme-green);
    }
    50% {
        color: var(--meme-green);
        text-shadow: 2px 2px 0px var(--meme-cyan);
    }
    66.66% {
        color: var(--meme-cyan);
        text-shadow: 2px 2px 0px var(--meme-purple);
    }
    83.33% {
        color: var(--meme-purple);
        text-shadow: 2px 2px 0px var(--meme-pink);
    }
    100% {
        color: var(--meme-pink);
        text-shadow: 2px 2px 0px var(--meme-yellow);
    }
}

@keyframes memeFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(2deg);
    }
    66% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes memeZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Meme Animation Classes */
.meme-chaos {
    animation: memeChaos 3s ease-in-out infinite;
}

.meme-explosion {
    animation: memeExplosion 2s ease-in-out infinite;
}

.meme-dance {
    animation: memeDance 2s ease-in-out infinite;
}

.meme-glitch {
    animation: memeGlitch 1s ease-in-out infinite;
}

.meme-rainbow-text {
    animation: memeRainbowText 2s ease-in-out infinite;
}

.meme-float {
    animation: memeFloat 3s ease-in-out infinite;
}

.meme-zoom {
    animation: memeZoom 1.5s ease-in-out infinite;
}

/* Interactive Meme Effects */
.meme-hover-chaos:hover {
    animation: memeChaos 0.5s ease-in-out;
}

.meme-hover-explosion:hover {
    animation: memeExplosion 0.8s ease-in-out;
}

.meme-hover-dance:hover {
    animation: memeDance 1s ease-in-out;
}

.meme-hover-glitch:hover {
    animation: memeGlitch 0.3s ease-in-out;
}

/* Meme Text Effects */
.meme-text-outline {
    -webkit-text-stroke: 3px var(--meme-pink);
    text-stroke: 3px var(--meme-pink);
    color: transparent;
}

.meme-text-shadow {
    text-shadow: 
        3px 3px 0px var(--meme-yellow),
        6px 6px 0px var(--meme-pink),
        9px 9px 0px var(--meme-green),
        12px 12px 0px var(--meme-cyan);
}

.meme-text-glow {
    text-shadow: 
        0 0 10px var(--meme-pink),
        0 0 20px var(--meme-pink),
        0 0 30px var(--meme-pink);
}

/* Meme Border Effects */
.meme-border-dashed {
    border: 5px dashed var(--meme-pink);
    border-radius: 25px;
}

.meme-border-double {
    border: 10px double var(--meme-green);
    border-radius: 25px;
}

.meme-border-groove {
    border: 8px groove var(--meme-cyan);
    border-radius: 25px;
}

.meme-border-ridge {
    border: 8px ridge var(--meme-purple);
    border-radius: 25px;
}

/* Meme Background Patterns */
.meme-bg-stripes {
    background: repeating-linear-gradient(
        45deg,
        var(--meme-pink),
        var(--meme-pink) 10px,
        var(--meme-green) 10px,
        var(--meme-green) 20px
    );
}

.meme-bg-polka {
    background: radial-gradient(
        circle at 25% 25%,
        var(--meme-pink) 2px,
        transparent 2px
    ),
    radial-gradient(
        circle at 75% 75%,
        var(--meme-green) 2px,
        transparent 2px
    );
    background-size: 20px 20px;
}

.meme-bg-checker {
    background: 
        linear-gradient(45deg, var(--meme-pink) 25%, transparent 25%),
        linear-gradient(-45deg, var(--meme-green) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--meme-cyan) 75%),
        linear-gradient(-45deg, transparent 75%, var(--meme-purple) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Meme Scroll Effects */
.meme-scroll-reveal {
    opacity: 0;
    transform: translateY(50px) rotate(10deg);
    transition: all 0.8s ease;
}

.meme-scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    animation: memeChaos 1s ease-in-out;
}

/* Meme Loading Effects */
.meme-loading {
    position: relative;
    overflow: hidden;
}

.meme-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--rainbow-gradient);
    animation: memeShimmer 2s infinite;
}

@keyframes memeShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Meme Particle Effects */
.meme-particles {
    position: relative;
    overflow: hidden;
}

.meme-particles::before,
.meme-particles::after {
    content: '🎮';
    position: absolute;
    font-size: 2rem;
    animation: memeFloat 3s ease-in-out infinite;
}

.meme-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.meme-particles::after {
    top: 60%;
    right: 10%;
    animation-delay: 1.5s;
}

/* Responsive Meme Animations */
@media (max-width: 768px) {
    .meme-chaos,
    .meme-explosion,
    .meme-dance {
        animation-duration: 2s;
    }
    
    .meme-rainbow-text {
        animation-duration: 1.5s;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .meme-chaos,
    .meme-explosion,
    .meme-dance,
    .meme-glitch,
    .meme-rainbow-text,
    .meme-float,
    .meme-zoom {
        animation: none;
    }
    
    .meme-hover-chaos:hover,
    .meme-hover-explosion:hover,
    .meme-hover-dance:hover,
    .meme-hover-glitch:hover {
        animation: none;
    }
}