/**
 * Futuristic Design System
 * Adds subtle futuristic accents, depth, and atmosphere to the site
 */

:root {
    /* Futuristic Accent Colors */
    --accent-primary: #00D9FF;
    /* Cyan */
    --accent-secondary: #7C3AED;
    /* Purple */
    --accent-glow: rgba(0, 217, 255, 0.3);
    --accent-glow-purple: rgba(124, 58, 237, 0.2);

    /* Glass & Depth */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover-bg: rgba(255, 255, 255, 0.06);

    /* Shadows & Glow */
    --shadow-glow: 0 0 20px var(--accent-glow);
    --shadow-glow-purple: 0 0 24px var(--accent-glow-purple);
    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);

    /* Subtle Texture */
    --noise-overlay: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
}

/* Futuristic Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.glass-panel:hover {
    background: var(--glass-hover-bg);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

/* Accent Borders & Highlights */
.accent-border {
    border-color: var(--accent-primary);
}

.accent-text {
    color: var(--accent-primary);
}

.accent-glow {
    box-shadow: var(--shadow-glow);
}

/* Futuristic Buttons */
.btn-futuristic {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-futuristic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--accent-primary);
    opacity: 0.2;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-futuristic:hover::before {
    width: 300px;
    height: 300px;
}

/* Animated Gradient Background */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.bg-gradient-animated {
    background: linear-gradient(135deg,
            #000000 0%,
            #0a0a0a 25%,
            #000000 50%,
            #0a0a0a 75%,
            #000000 100%);
    background-size: 200% 200%;
    animation: gradient-shift 15s ease infinite;
}

/* Subtle Grid Pattern */
.bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Noise Texture Overlay */
.noise-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--noise-overlay);
    opacity: 0.05;
    pointer-events: none;
}

/* Card Hover Effects */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

/* Glow Text */
.text-glow {
    text-shadow: 0 0 20px var(--accent-glow);
}

/* Accent Line */
.accent-line {
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--accent-primary) 50%,
            transparent 100%);
}

/* Pulse Animation */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 10px var(--accent-glow);
    }

    50% {
        box-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--accent-glow);
    }
}

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

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 100%);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

/* Responsive: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .bg-gradient-animated {
        animation: none;
    }

    .shimmer {
        animation: none;
    }

    .pulse-glow {
        animation: none;
    }
}