/**
 * Premium Holographic AI Hero Styles
 * Advanced futuristic animation canvas styling
 */

/* Holographic Canvas - Premium Positioning */
#holographic-ai-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: premiumFadeIn 2s ease-out 0.5s forwards;
}

/* Premium Fade In Animation */
@keyframes premiumFadeIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero Section Enhancement */
.hero {
    position: relative;
    isolation: isolate;
    background: radial-gradient(
        ellipse at center,
        rgba(10, 15, 30, 1) 0%,
        rgba(5, 10, 20, 1) 100%
    );
}

/* Ensure hero background is behind canvas */
.hero-background {
    z-index: 0;
}

/* Holographic canvas layer */
#holographic-ai-canvas {
    z-index: 1;
}

/* Ensure hero content stays above canvas */
.hero-container {
    position: relative;
    z-index: 2;
}

/* All content elements above holographic layer */
.hero-content,
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-cta,
.scroll-indicator {
    position: relative;
    z-index: 3;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Premium vignette overlay */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: 
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 40%,
            rgba(5, 10, 20, 0.4) 80%,
            rgba(5, 10, 20, 0.7) 100%
        );
    z-index: 1;
}

/* Glossy effect overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.01) 30%,
        transparent 100%
    );
    z-index: 4;
}

/* Performance optimizations */
#holographic-ai-canvas {
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Premium glow on hero title when holographic is active */
.hero.holographic-active .hero-title {
    text-shadow: 
        0 0 30px rgba(0, 255, 255, 0.3),
        0 0 60px rgba(138, 43, 226, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Enhanced button glow */
.hero.holographic-active .btn-primary {
    box-shadow: 
        0 4px 15px rgba(99, 102, 241, 0.4),
        0 0 30px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.hero.holographic-active .btn-primary:hover {
    box-shadow: 
        0 6px 25px rgba(99, 102, 241, 0.6),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.08);
}

/* Reduce intensity on mobile */
@media (max-width: 768px) {
    #holographic-ai-canvas {
        opacity: 0.8;
    }

    .hero::after {
        background: 
            radial-gradient(
                ellipse at center,
                transparent 0%,
                transparent 30%,
                rgba(5, 10, 20, 0.5) 70%,
                rgba(5, 10, 20, 0.8) 100%
            );
    }
}

/* Further reduce on small screens */
@media (max-width: 480px) {
    #holographic-ai-canvas {
        opacity: 0.7;
    }
}

/* Prefers reduced motion - disable complex animations */
@media (prefers-reduced-motion: reduce) {
    #holographic-ai-canvas {
        display: none;
    }

    @keyframes premiumFadeIn {
        from, to {
            opacity: 0;
        }
    }
}

/* Loading state */
#holographic-ai-canvas.loading {
    opacity: 0;
}

/* Active state */
#holographic-ai-canvas.active {
    opacity: 1;
}

/* Fallback for browsers without canvas support */
@supports not (display: canvas) {
    #holographic-ai-canvas {
        display: none;
    }
}

/* Premium shine effect on scroll */
.hero.scrolled .hero-title {
    animation: premiumShine 3s ease-in-out infinite;
}

@keyframes premiumShine {
    0%, 100% {
        text-shadow: 
            0 0 30px rgba(0, 255, 255, 0.3),
            0 0 60px rgba(138, 43, 226, 0.2),
            0 4px 8px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow: 
            0 0 40px rgba(0, 255, 255, 0.5),
            0 0 80px rgba(138, 43, 226, 0.3),
            0 0 20px rgba(255, 215, 0, 0.2),
            0 4px 8px rgba(0, 0, 0, 0.5);
    }
}

/* Premium particle effect overlay (optional enhancement) */
.hero-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(
        circle,
        rgba(0, 255, 255, 0.03) 1px,
        transparent 1px
    );
    background-size: 50px 50px;
    pointer-events: none;
    opacity: 0.5;
    animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(50px, 50px);
    }
}

/* Golden accent highlights */
.hero-badge {
    background: 
        linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.1) 0%,
            rgba(138, 43, 226, 0.1) 50%,
            rgba(255, 215, 0, 0.05) 100%
        );
    border-color: rgba(0, 255, 255, 0.3);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.05);
}

/* Premium gradient text enhancement */
.gradient-text {
    background: linear-gradient(
        135deg,
        rgba(0, 255, 255, 1) 0%,
        rgba(99, 102, 241, 1) 25%,
        rgba(138, 43, 226, 1) 50%,
        rgba(255, 215, 0, 0.8) 75%,
        rgba(0, 150, 255, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: premiumGradientShift 8s ease-in-out infinite;
}

@keyframes premiumGradientShift {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* Holographic scan line effect (subtle) */
.hero::after {
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 255, 255, 0.02) 0px,
            transparent 2px,
            transparent 4px
        );
    animation: scanlineMove 4s linear infinite;
}

@keyframes scanlineMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 4px;
    }
}

/* Disable scanlines on mobile for performance */
@media (max-width: 768px) {
    @keyframes scanlineMove {
        from, to {
            background-position: 0 0;
        }
    }
}

/* Premium border glow for service cards */
.service-card:hover {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 
        0 20px 40px rgba(99, 102, 241, 0.3),
        0 0 30px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.03);
}

/* Feature cards enhancement */
.feature-card:hover {
    border-color: rgba(138, 43, 226, 0.5);
    box-shadow: 
        0 10px 30px rgba(138, 43, 226, 0.2),
        0 0 20px rgba(0, 255, 255, 0.15),
        inset 0 0 15px rgba(255, 215, 0, 0.02);
}

/* Smooth transition when canvas loads */
.hero.canvas-loaded #holographic-ai-canvas {
    transition: opacity 1s ease-in;
}

/* High DPI displays optimization */
@media (min-resolution: 120dpi) {
    #holographic-ai-canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    #holographic-ai-canvas {
        max-width: 1920px;
        left: 50%;
        transform: translateX(-50%) translateZ(0);
    }
}

/* Portrait tablets */
@media (max-width: 1024px) and (orientation: portrait) {
    #holographic-ai-canvas {
        opacity: 0.75;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    #holographic-ai-canvas {
        opacity: 0.6;
    }
}