/* =================================================================
   RAINBOW + FLOATING EMOJIS - PERFECTLY OPTIMIZED FOR YOUR HERO
   ================================================================= */

/* Rainbow Spectrum */
:root {
    --rainbow-1: #FF6B6B;
    --rainbow-2: #4ECDC4;
    --rainbow-3: #45B7D1;
    --rainbow-4: #96CEB4;
    --rainbow-5: #FFEAA7;
    --rainbow-6: #DDA0DD;
}

/* Hero Container Setup */
.hero-content { position: relative; z-index: 20; }
.hero-buttons, .hero-stats, .typewriter, .scroll-indicator { z-index: 25; }

/* Performance & Responsive */
.hero-bg-animation {
    will-change: transform, background-position;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* =================================================================
   DASHBOARD VISUAL ENHANCEMENTS & PREMIUM MICRO-ANIMATIONS
   ================================================================= */

/* 1. Smooth Fade-in-up Entry */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Soft Floating Effect */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* 3. Glowing Pulse (Emerald & Blue) */
@keyframes pulseGlowBlue {
    0%, 100% {
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow: 0 0 18px rgba(59, 130, 246, 0.45);
    }
}

.glow-pulse-blue {
    animation: pulseGlowBlue 2.5s infinite ease-in-out;
}

@keyframes pulseGlowEmerald {
    0%, 100% {
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 18px rgba(16, 185, 129, 0.45);
    }
}

.glow-pulse-emerald {
    animation: pulseGlowEmerald 2.5s infinite ease-in-out;
}

/* 4. Elegant Shimmer Reflect Effect */
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.shimmer-container {
    position: relative;
    overflow: hidden;
}

.shimmer-container::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.3) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    content: '';
    animation: shimmer 2.5s infinite;
}

/* 5. Staggered Delay Utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* 6. Dashboard metrics scaling hover */
.scale-hover-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scale-hover-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.1), inset 0 0 12px rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
}