/* ==========================================
   NEMO AI ECO - DARK THEME ANIMATIONS
   ========================================== */

/* ==========================================
   1. HERO SECTION - DARK ANIMATIONS
   ========================================== */

/* Dark Gradient Background */
.dark-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        #0f0f1e 0%, 
        #1a1a2e 25%, 
        #16213e 50%, 
        #0f0f1e 75%, 
        #1a1a2e 100%);
    background-size: 400% 400%;
    animation: darkGradientShift 20s ease infinite;
    z-index: 0;
}

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

/* Animated Floating Shapes - Dark */
.animated-shapes-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.shape-dark {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    animation: float 25s infinite ease-in-out;
}

.shape-dark.shape-1 {
    width: 400px;
    height: 400px;
    background: rgba(0, 168, 255, 0.3);
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.shape-dark.shape-2 {
    width: 500px;
    height: 500px;
    background: rgba(99, 102, 241, 0.25);
    bottom: 10%;
    right: 5%;
    animation-delay: 8s;
}

.shape-dark.shape-3 {
    width: 350px;
    height: 350px;
    background: rgba(0, 168, 255, 0.2);
    top: 50%;
    right: 20%;
    animation-delay: 15s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(40px, -60px) rotate(90deg);
    }
    50% {
        transform: translate(-40px, -40px) rotate(180deg);
    }
    75% {
        transform: translate(60px, 40px) rotate(270deg);
    }
}

/* ==========================================
   2. FADE IN ANIMATIONS
   ========================================== */

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
}

.animate-fade-in-down {
    opacity: 0;
    animation: fadeInDown 1s ease-out forwards;
}

.animate-fade-in-right {
    opacity: 0;
    animation: fadeInRight 1s ease-out forwards;
}

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

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   3. SCROLL ANIMATIONS
   ========================================== */

.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   4. SECTION BACKGROUNDS - DARK
   ========================================== */

.section-bg-decoration-dark {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 130%;
    background: radial-gradient(circle, rgba(0, 168, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    animation: float 30s infinite ease-in-out;
}

/* ==========================================
   5. CTA SECTION - DARK
   ========================================== */

.cta-section-dark {
    position: relative;
}

.cta-gradient-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 168, 255, 0.1) 0%, 
        rgba(99, 102, 241, 0.1) 50%, 
        rgba(0, 168, 255, 0.1) 100%);
    background-size: 200% 200%;
    animation: darkGradientShift 15s ease infinite;
}

/* ==========================================
   6. SCROLL INDICATOR
   ========================================== */

.scroll-indicator {
    display: inline-block;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

/* ==========================================
   7. CARD HOVER EFFECTS - DARK
   ========================================== */

.feature-card-dark,
.value-card,
.benefit-card-dark,
.architecture-layer {
    position: relative;
    overflow: hidden;
}

.feature-card-dark::before,
.value-card::before,
.benefit-card-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 168, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.feature-card-dark:hover::before,
.value-card:hover::before,
.benefit-card-dark:hover::before {
    left: 100%;
}

/* ==========================================
   8. STAT COUNTER ANIMATION
   ========================================== */

.stats-number {
    display: inline-block;
    transition: all 0.3s ease;
}

.stats-number:hover {
    transform: scale(1.05);
}

/* ==========================================
   9. BUTTON RIPPLE EFFECT
   ========================================== */

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================
   10. FLOATING ANIMATION
   ========================================== */

.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* ==========================================
   11. PULSE ANIMATION
   ========================================== */

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 168, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 168, 255, 0.6);
    }
}

/* ==========================================
   12. SLIDE IN ANIMATIONS
   ========================================== */

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

/* ==========================================
   13. ROTATE ANIMATIONS
   ========================================== */

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

.rotating {
    animation: rotate 20s linear infinite;
}

/* ==========================================
   14. SCALE ANIMATIONS
   ========================================== */

.scale-on-hover {
    transition: transform 0.3s ease;
}

.scale-on-hover:hover {
    transform: scale(1.05);
}

/* ==========================================
   15. GLOW EFFECT
   ========================================== */

.glow-blue {
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.3);
    transition: box-shadow 0.3s ease;
}

.glow-blue:hover {
    box-shadow: 0 0 40px rgba(0, 168, 255, 0.5);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    transition: box-shadow 0.3s ease;
}

.glow-purple:hover {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}

/* ==========================================
   16. TEXT ANIMATIONS
   ========================================== */

.text-shimmer {
    background: linear-gradient(90deg, 
        #00A8FF 0%, 
        #6366F1 50%, 
        #00A8FF 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

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

/* ==========================================
   17. BORDER ANIMATIONS
   ========================================== */

.border-animation {
    position: relative;
}

.border-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: inherit;
    background: linear-gradient(90deg, #00A8FF, #6366F1) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================
   18. LOADING ANIMATIONS
   ========================================== */

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 168, 255, 0.3);
    border-top-color: #00A8FF;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   19. STAGGER ANIMATIONS
   ========================================== */

.stagger-item {
    opacity: 0;
    transform: translateY(20px);
}

.stagger-item.animated {
    animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }

/* ==========================================
   20. PARALLAX EFFECTS
   ========================================== */

.parallax {
    transition: transform 0.1s ease-out;
}

/* ==========================================
   21. RESPONSIVE ANIMATIONS
   ========================================== */

@media (max-width: 768px) {
    .shape-dark {
        width: 200px !important;
        height: 200px !important;
        filter: blur(40px);
    }
    
    @keyframes float {
        0%, 100% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(20px, -20px);
        }
    }
}

/* ==========================================
   22. REDUCED MOTION
   ========================================== */

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

/* ==========================================
   23. HIGH CONTRAST MODE
   ========================================== */

@media (prefers-contrast: high) {
    .feature-card-dark,
    .value-card,
    .benefit-card-dark {
        border: 2px solid currentColor;
    }
}

/* ==========================================
   24. FOCUS VISIBLE
   ========================================== */

*:focus-visible {
    outline: 2px solid #00A8FF;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================
   25. PRINT STYLES
   ========================================== */

@media print {
    nav,
    footer,
    .scroll-top-btn-dark,
    #contact {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .feature-card-dark,
    .value-card,
    .benefit-card-dark {
        break-inside: avoid;
    }
}