@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
.hero-gradient {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-mov {
    animation: mov 1s infinite;
}
@keyframes mov {
    0%, 100% {
        transform: translateX(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.animate-heartbeat {
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    14% {
        transform: scale(1.3);
        opacity: 0.75;
    }
    28% {
        transform: scale(1);
        opacity: 1;
    }
    42% {
        transform: scale(1.2);
        opacity: 0.85;
    }
    70% {
        transform: scale(1);
        opacity: 1;
    }
}
.trophy-sparkle {
    animation: trophy-sparkle 2s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}
@keyframes trophy-sparkle {
    0% {
        transform: rotate(0deg) scale(1);
        text-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    25% {
        transform: rotate(3deg) scale(1.02);
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: rotate(-3deg) scale(1.05);
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
    75% {
        transform: rotate(3deg) scale(1.02);
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }
    100% {
        transform: rotate(0deg) scale(1);
        text-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}
.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.stream-glow {
    animation: stream-glow 2s ease-in-out infinite alternate;
}
@keyframes stream-glow {
    from { box-shadow: 0 0 20px rgba(147, 51, 234, 0.4); }
    to { box-shadow: 0 0 30px rgba(147, 51, 234, 0.8); }
}
.live-indicator {
    animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { background-color: #ef4444; }
    50% { background-color: #dc2626; }
}
.equipment-float {
    animation: equipment-float 4s ease-in-out infinite;
}
@keyframes equipment-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(2deg); }
    66% { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes wifi-ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.animate-wifi-ping {
    position: relative;
}
.animate-wifi-ping::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 4%;
    width: 2.2rem;
    height: 2.2rem;
    background-color: rgba(34,197,94,0.5); /* Tailwind green-500 */
    border-radius: 9999px;
    transform: translate(-50%, -50%);
    animation: wifi-ping 1.5s ease-out infinite;
    z-index: -1;
}
.light {
    animation: light 2s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}
@keyframes light {
    0% {
        transform: rotate(0deg) scale(1);
        text-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    25% {
        transform: rotate(3deg) scale(1.02);
        text-shadow: 0 0 15px rgba(255, 200, 0, 0.4);
    }
    50% {
        transform: rotate(-3deg) scale(1.05);
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
    75% {
        transform: rotate(3deg) scale(1.02);
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }
    100% {
        transform: rotate(0deg) scale(1);
        text-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}
.mobile-shaking {
    animation: mobile-shaking 2s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}
@keyframes mobile-shaking {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(3deg) scale(1.02);
    }
    50% {
        transform: rotate(-3deg) scale(1.05);
    }
    75% {
        transform: rotate(3deg) scale(1.02);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}
@keyframes swing-horizontal {
    0%, 100% {
        transform: rotate(0deg); /* vertical */
    }
    50% {
        transform: rotate(90deg); /* horizontal */
    }
}
.rotate-swing-horizontal {
    display: inline-block;
    animation: swing-horizontal 5s ease-in-out infinite;
}