/* ===================================
   ANIMATIONS STYLESHEET - TechParadox
   All keyframes and animation styles
   =================================== */

/* Logo Animations */
.logo {
    animation: logoFloat 3s ease-in-out infinite;
}

.logo-image {
    animation: logoRotate 20s linear infinite, logoPulse 2s ease-in-out infinite alternate;
}

.logo-glow {
    animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes logoRotate {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

@keyframes logoPulse {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.5));
    }
    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(74, 222, 128, 0.8));
    }
}

@keyframes glowPulse {
    from {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Logo hover effects */
.logo:hover .logo-image {
    animation-play-state: paused;
    transform: scale(1.1) rotateY(45deg);
    filter: drop-shadow(0 0 40px rgba(74, 222, 128, 1));
}

.logo:hover .logo-glow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    background: radial-gradient(circle, rgba(74, 222, 128, 0.4) 0%, rgba(34, 211, 238, 0.2) 50%, transparent 70%);
}

/* Hero Section Animations */
.hero-title {
    animation: slideInDown 1s ease-out;
}

.hero-subtitle {
    animation: slideInUp 1s ease-out 0.3s both;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content Fade In */
.content-section {
    animation: fadeIn 1s ease-out 0.6s both;
}

.cta-section {
    animation: fadeIn 1s ease-out 0.9s both;
}

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

/* Particle Animation */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #4ade80;
    border-radius: 50%;
    animation: float 6s infinite linear;
    opacity: 0.6;
}

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

/* Staggered Animation for Feature Cards */
.feature-card:nth-child(1) { animation: fadeIn 0.6s ease-out 0.8s both; }
.feature-card:nth-child(2) { animation: fadeIn 0.6s ease-out 1.0s both; }
.feature-card:nth-child(3) { animation: fadeIn 0.6s ease-out 1.2s both; }
.feature-card:nth-child(4) { animation: fadeIn 0.6s ease-out 1.4s both; }

/* Stats Animation */
.stat-card:nth-child(1) { animation: fadeIn 0.6s ease-out 1.6s both; }
.stat-card:nth-child(2) { animation: fadeIn 0.6s ease-out 1.8s both; }
.stat-card:nth-child(3) { animation: fadeIn 0.6s ease-out 2.0s both; }

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .particles {
        display: none;
    }
}