/* Browser Compatibility for Hero Animations */

/* Ensure hardware acceleration for smooth animations */
.hero,
.hero-background,
.hero-content,
.tech-badge,
.floating-element {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

/* Prefixed animation properties for older browsers */
@-webkit-keyframes fadeInUp {
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    to {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    to {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-title.typing-effect {
        animation: none !important;
        border-right: none !important;
        opacity: 1 !important;
    }
    
    .tech-badge,
    .hero-content > * {
        animation: fadeInReduced 0.3s ease-out forwards !important;
    }
    
    .floating-element {
        animation: none !important;
    }
    
    .matrix-overlay,
    .code-particles {
        display: none !important;
    }
}

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

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(8px)) {
    .tech-badge {
        background: rgba(252, 252, 252, 0.2);
    }
    
    .hero-loading {
        background: #2c2c2c;
    }
}

/* Performance optimizations */
.hero-loading {
    contain: layout style paint;
}

.matrix-overlay,
.code-particles {
    contain: layout style;
    pointer-events: none;
}

/* Ensure proper stacking context */
.hero {
    isolation: isolate;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.matrix-overlay {
    z-index: 1;
}

.code-particles {
    z-index: 1;
}

.floating-element {
    z-index: 2;
}