/* Custom CSS for V2 Design - Cyber/Glass Effects */

body {
    background-color: #051424;
    color: #d4e4fa;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.glass-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.glow-border {
    transition: all 0.3s ease;
}
.glow-border:hover {
    border-color: #0ea5e9;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}
.cyber-grid {
    background-image: radial-gradient(circle at 2px 2px, rgba(14, 165, 233, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
}
.text-glow {
    text-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
}

/* Reveal Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback: afficher les sections après 2 secondes si JS ne fonctionne pas */
@keyframes reveal-fallback {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.reveal {
    animation: reveal-fallback 0.8s ease-out 2s forwards;
}

/* Hero Text Pulse Animation */
@keyframes glow-pulse {
    0% { text-shadow: 0 0 10px rgba(14, 165, 233, 0.2); }
    50% { text-shadow: 0 0 25px rgba(14, 165, 233, 0.6); }
    100% { text-shadow: 0 0 10px rgba(14, 165, 233, 0.2); }
}
.animate-glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Enhanced Hover States */
.btn-cyber {
    transition: all 0.3s ease;
}
.btn-cyber:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.5);
}
.card-cyber {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-cyber:hover {
    transform: translateY(-8px);
    border-color: rgba(14, 165, 233, 0.6);
    box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.4);
}
html {
    scroll-behavior: smooth;
}