/* ============================================
   IPPBOT — Animations
   Rockstar GTA VI-inspired — Green + Gold
   ============================================ */

/* ============================================
   Keyframes
   ============================================ */

@keyframes logoPulse {
    0%, 100% {
        filter: drop-shadow(0 0 40px rgba(34, 197, 94, 0.25));
    }
    50% {
        filter: drop-shadow(0 0 60px rgba(34, 197, 94, 0.4)) drop-shadow(0 0 100px rgba(255, 184, 0, 0.15));
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes scrollPulse {
    0%, 100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
    50% {
        opacity: 0.3;
        transform: scaleY(0.5);
        transform-origin: top;
    }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -25px); }
    66% { transform: translate(-20px, 15px); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-25px, 20px); }
    66% { transform: translate(15px, -20px); }
}

@keyframes codeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-25px) rotate(0.5deg);
    }
}

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

@keyframes auroraShift {
    0% {
        transform: translateX(-5%) rotate(-2deg);
        opacity: 0.7;
    }
    100% {
        transform: translateX(5%) rotate(2deg);
        opacity: 1;
    }
}

@keyframes centerGlowPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

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

@keyframes menuLogoIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ctaGlowPulse {
    from {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* ============================================
   Scroll Reveal — [data-animate]
   GSAP fromTo gere l'etat initial et final.
   Le CSS met juste visibility pour eviter le flash.
   ============================================ */

[data-animate] {
    will-change: opacity, transform;
}

/* ============================================
   Menu Overlay Stagger
   ============================================ */

.menu-overlay.active .menu-overlay-logo {
    animation: menuLogoIn 0.6s ease 0.05s forwards;
    opacity: 0;
}

.menu-overlay.active .menu-nav-link {
    animation: menuLinkIn 0.5s ease forwards;
    opacity: 0;
}

.menu-overlay.active .menu-nav-link:nth-child(1) { animation-delay: 0.1s; }
.menu-overlay.active .menu-nav-link:nth-child(2) { animation-delay: 0.15s; }
.menu-overlay.active .menu-nav-link:nth-child(3) { animation-delay: 0.2s; }
.menu-overlay.active .menu-nav-link:nth-child(4) { animation-delay: 0.25s; }
.menu-overlay.active .menu-nav-link:nth-child(5) { animation-delay: 0.3s; }
.menu-overlay.active .menu-nav-link:nth-child(6) { animation-delay: 0.35s; }
.menu-overlay.active .menu-nav-link:nth-child(7) { animation-delay: 0.4s; }

.menu-overlay.active .menu-bottom {
    animation: fadeIn 0.5s ease 0.4s forwards;
    opacity: 0;
}

/* ============================================
   Hero Reveal Orbs Floating
   ============================================ */

.hero-reveal-orb-green {
    animation: orbFloat1 12s ease-in-out infinite;
}

.hero-reveal-orb-gold {
    animation: orbFloat2 10s ease-in-out infinite;
}

/* Hero logo subtle pulse (avant le scroll) */
.hero-logo-center .hero-logo-img {
    animation: logoPulse 4s ease-in-out infinite;
}

/* ============================================
   Glow Pulses
   ============================================ */

.cta-glow {
    animation: ctaGlowPulse 4s ease-in-out infinite alternate;
}

.showcase-glow {
    animation: ctaGlowPulse 5s ease-in-out infinite alternate;
}

/* ============================================
   Bento Card Hover Shine
   ============================================ */

.bento-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.03), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.bento-card:hover::after {
    left: 100%;
}

/* ============================================
   Command Panel Fade
   ============================================ */

.cmd-panel {
    animation: fadeIn 0.25s ease;
}

/* ============================================
   Page Load
   ============================================ */

body {
    animation: fadeIn 0.3s ease both;
}

/* ============================================
   Dashboard Animations (preserved)
   ============================================ */

.sidebar-link.active::before {
    animation: slideInIndicator 0.2s ease both;
}

@keyframes slideInIndicator {
    from { height: 0; opacity: 0; }
    to { height: 20px; opacity: 1; }
}

.stat-card {
    opacity: 0;
    transform: translateY(12px);
    animation: statEnter 0.4s ease both;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

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

.quick-action:active {
    transform: scale(0.98);
}

.theme-card.active {
    animation: themeSelect 0.3s ease;
}

@keyframes themeSelect {
    0% { transform: scale(1); }
    50% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

@keyframes toastEnter {
    0% { transform: translateX(120%); opacity: 0; }
    70% { transform: translateX(-4px); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes toastExit {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

.welcome-banner {
    animation: bannerGlow 3s ease-in-out infinite alternate;
}

@keyframes bannerGlow {
    from { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
    to { box-shadow: 0 4px 24px rgba(34, 197, 94, 0.06); }
}

.card-header-icon {
    animation: dotPulse 2s ease-in-out infinite;
}

.modal .modal-backdrop {
    animation: backdropFade 0.2s ease both;
}

@keyframes backdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sidebar {
    will-change: transform;
}

.loading-logo {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.92); }
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }

    .hero-orb-1,
    .hero-orb-2,
    .showcase-glow,
    .cta-glow {
        animation: none;
        opacity: 1;
    }

    .hero-title-gradient,
    .hero-logo-img {
        animation: none;
    }

    .bento-card:hover,
    .pricing-card:hover,
    .btn-hero:hover {
        transform: none;
    }

    .faq-chevron {
        transition: none;
    }

    .loading-logo { animation: none; opacity: 1; }
    .stat-card { opacity: 1; transform: none; animation: none; }
    .welcome-banner { animation: none; }
    .card-header-icon { animation: none; }
    .sidebar-link.active::before { animation: none; }
}