/* Generic Animations */
@keyframes move {
    from { transform: translate(-20%, -20%) scale(1); }
    to { transform: translate(30%, 30%) scale(1.3); }
}

@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.pop {
    animation: popEffect 0.2s ease-out;
}

@keyframes popEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Theme Specific Animations */
@keyframes glitchSoft {
    0%, 90%, 100% { transform: none; }
    91% { transform: skew(1deg); filter: hue-rotate(45deg); }
    93% { transform: skew(-1deg); }
}

@keyframes glitchAnim {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

@keyframes glitchAnim2 {
    0% { transform: translate(0) }
    20% { transform: translate(2px, -2px) }
    40% { transform: translate(2px, 2px) }
    60% { transform: translate(-2px, -2px) }
    80% { transform: translate(-2px, 2px) }
    100% { transform: translate(0) }
}

@keyframes glitchSkew {
    0%, 90%, 100% { transform: none; }
    91% { transform: skew(3deg); filter: invert(0.2); }
    92% { transform: skew(-5deg); }
    93% { transform: none; filter: hue-rotate(90deg); }
    95% { transform: translate(5px, 2px); }
}

@keyframes vhsRolling {
    0%, 95%, 100% { transform: translateY(0); }
    96% { transform: translateY(-5px); }
    97% { transform: translateY(5px); }
}

@keyframes jitter {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); text-shadow: 2px 0 red; }
    50% { transform: translate(-1px, 1px); text-shadow: -2px 0 blue; }
    75% { transform: translate(1px, 1px); }
}

@keyframes loading-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.loading-pulse {
    animation: loading-pulse 1s infinite ease-in-out;
}

@keyframes trippy-rotate {
    0% { transform: rotate(0deg) scale(1); filter: hue-rotate(0deg); }
    33% { transform: rotate(2deg) scale(1.05); filter: hue-rotate(120deg); }
    66% { transform: rotate(-2deg) scale(0.95); filter: hue-rotate(240deg); }
    100% { transform: rotate(0deg) scale(1); filter: hue-rotate(360deg); }
}

@keyframes trippy-warp {
    0% { border-radius: 50px; }
    25% { border-radius: 80px 20px 80px 20px; }
    50% { border-radius: 20px 80px 20px 80px; }
    75% { border-radius: 60px 60px 20px 20px; }
    100% { border-radius: 50px; }
}

@keyframes liquid-bg {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 40%; }
    100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

@keyframes trippy-hue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes parallax-bg {
    0% { background-position: 0% 0%; }
    50% { background-position: 50% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes glitch-color {
    0%, 100% { filter: hue-rotate(0deg) brightness(1) contrast(1); }
    25% { filter: hue-rotate(90deg) brightness(1.2) contrast(1.2); }
    50% { filter: hue-rotate(180deg) brightness(0.8) contrast(1.5); }
    75% { filter: hue-rotate(270deg) brightness(1.1) contrast(1.1); }
}

@keyframes floating-shapes {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -50px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes signal-pulse {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

@keyframes strobe {
    0% { opacity: 0.1; }
    100% { opacity: 0.4; }
}