/* 🌸⚡🎮 Michaelism ICO - Kawaii Animations */

/* ========== Tab Animations ========== */
@keyframes tab-enter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tab-exit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* ========== Icon Animations ========== */
@keyframes icon-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ========== Loading Animations ========== */
@keyframes heart-beat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.2);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px currentColor;
    }
    50% {
        opacity: 0.8;
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* ========== Gradient Animations ========== */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes rainbow-wave {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ========== Particle Animations ========== */
@keyframes particle-float {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) translateX(10px) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-100px) translateX(-20px) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-150px) translateX(30px) scale(0);
        opacity: 0;
    }
}

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

/* ========== Button Animations ========== */
@keyframes button-glow {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 5px 30px rgba(0, 255, 255, 0.6);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ========== Text Animations ========== */
@keyframes text-shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes text-glow {
    0%, 100% {
        text-shadow: 0 0 10px currentColor;
    }
    50% {
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* ========== Portal Animations ========== */
@keyframes portal-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes portal-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* ========== Energy Animations ========== */
@keyframes energy-flow {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes lightning-flash {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* ========== Holographic Animations ========== */
@keyframes holographic {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

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

/* ========== Quantum Animations ========== */
@keyframes quantum-float {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translate(50px, -50px) scale(1);
        opacity: 1;
    }
    40% {
        transform: translate(-30px, -100px) scale(0.8);
        opacity: 0.8;
    }
    60% {
        transform: translate(70px, -150px) scale(0.6);
        opacity: 0.6;
    }
    80% {
        transform: translate(-20px, -200px) scale(0.4);
        opacity: 0.3;
    }
    100% {
        transform: translate(100px, -250px) scale(0);
        opacity: 0;
    }
}

@keyframes vortex-spin {
    0% {
        transform: rotate(0deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) scale(0);
        opacity: 0;
    }
}

/* ========== Card Animations ========== */
@keyframes card-hover {
    0% {
        transform: translateY(0) rotateX(0);
    }
    100% {
        transform: translateY(-10px) rotateX(5deg);
    }
}

@keyframes card-flip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

/* ========== Wave Animations ========== */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    75% {
        transform: translateY(10px);
    }
}

@keyframes wave-slow {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    33% {
        transform: translateY(-20px) translateX(20px);
    }
    66% {
        transform: translateY(20px) translateX(-20px);
    }
}

/* ========== Success Animations ========== */
@keyframes success-bounce {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.15);
    }
    75% {
        transform: scale(1.05);
    }
}

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

/* ========== Notification Animations ========== */
@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-right {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========== Kawaii Special Effects ========== */
@keyframes kawaii-bounce {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }
    50% {
        transform: translateY(-20px) scaleY(0.8);
    }
}

@keyframes kawaii-wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@keyframes kawaii-star {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
}

/* ========== Cyberpunk Effects ========== */
@keyframes cyber-scan {
    0%, 100% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        transform: translateY(100%);
        opacity: 1;
    }
}

@keyframes neon-flicker {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    10% {
        opacity: 0.8;
        filter: brightness(0.8);
    }
    20% {
        opacity: 1;
        filter: brightness(1.2);
    }
    30% {
        opacity: 0.9;
        filter: brightness(0.9);
    }
}

/* ========== Utility Animation Classes ========== */
.animate-float {
    animation: particle-float 10s ease-in-out infinite;
}

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

.animate-spin {
    animation: icon-spin 2s linear infinite;
}

.animate-bounce {
    animation: kawaii-bounce 1s ease-in-out infinite;
}

.animate-wiggle {
    animation: kawaii-wiggle 0.5s ease-in-out infinite;
}

.animate-glow {
    animation: text-glow 2s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: text-shimmer 3s linear infinite;
}

/* ========== Animation Delays ========== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }