/**
 * BIIS AI Drone Animation - Styles pour footer uniquement
 */

/* ============================================
   DRONE IA AU FOOTER
   ============================================ */

.footer-drone-container {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(to top, rgba(31, 41, 55, 0.05), transparent);
    margin-top: 40px;
}

.ai-drone {
    position: absolute;
    bottom: 20px;
    left: 0;
    transition: transform 0.1s linear;
    z-index: 10;
}

.drone-body {
    position: relative;
}

/* Animation des hélices */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.propeller {
    animation: spin 0.3s linear infinite;
    transform-origin: center;
}

.propeller-1 { animation-delay: 0s; }
.propeller-2 { animation-delay: 0.075s; }
.propeller-3 { animation-delay: 0.15s; }
.propeller-4 { animation-delay: 0.225s; }

/* LED qui pulse */
@keyframes pulse-led {
    0%, 100% { opacity: 1; fill: #EF4444; }
    50% { opacity: 0.3; fill: #F87171; }
}

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

/* Laser beam */
.laser-beam {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, #8B5CF6, transparent);
    opacity: 0;
    transition: all 0.3s ease;
}

.laser-beam.active {
    height: 100px;
    opacity: 0.8;
    box-shadow: 0 0 10px #8B5CF6, 0 0 20px #8B5CF6;
}

.laser-emitter {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Data particles */
.data-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.data-bit {
    position: absolute;
    top: -20px;
    color: #10B981;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 14px;
    animation: float-up 2s ease-out forwards;
    text-shadow: 0 0 5px #10B981;
}

@keyframes float-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) scale(0.5);
        opacity: 0;
    }
}

/* Metrics display */
.drone-metrics {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(31, 41, 55, 0.9);
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    white-space: nowrap;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.drone-metrics .metric {
    display: inline-block;
    margin: 0 8px;
    color: #E5E7EB;
}

.drone-metrics .cpu-value,
.drone-metrics .data-count {
    color: #10B981;
    font-weight: bold;
    transition: color 0.3s ease;
}

/* Binary trail */
.binary-trail {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-drone-container {
        height: 100px;
    }
    
    .ai-drone {
        transform: scale(0.7);
    }
    
    .drone-metrics {
        font-size: 9px;
        padding: 4px 8px;
    }
}

/* Performance optimizations */
.ai-drone {
    will-change: transform;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .propeller,
    .drone-led,
    .laser-emitter,
    .data-bit {
        animation: none !important;
    }
}