/* Custom CSS that goes beyond standard Tailwind utilities */

html {
    scroll-behavior: smooth;
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

/* Delay classes for staggered animations */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* Custom Gradient Text */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #0052CC, #00B8D9);
}

/* Blob styling for Hero background */
.blob {
    position: absolute;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.5;
    border-radius: 50%;
    animation: blob-bounce 10s infinite alternate;
}

@keyframes blob-bounce {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

/* Glassmorphism Classes */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Efecto HUD Tecnológico */
.tech-grid-overlay {
    background-image: 
        linear-gradient(rgba(0, 184, 217, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 184, 217, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center;
}

.scanline {
    width: 100%;
    height: 150px;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.05) 2px,
        rgba(255, 255, 255, 0.05) 4px
    );
    animation: scanline 8s linear infinite;
    z-index: 15;
    pointer-events: none;
}

/* Light Stream / Data Stream Animation (For Hero Slider Images) */
.light-stream {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 184, 217, 0) 0%, rgba(0, 184, 217, 0.8) 50%, rgba(0, 82, 204, 1) 100%);
    opacity: 0;
    box-shadow: 0 0 15px 3px rgba(0, 184, 217, 0.6);
    animation: drop 3s infinite;
}
.stream-1 { left: 15%; animation-delay: 0.2s; animation-duration: 3.5s; height: 120%; }
.stream-2 { left: 45%; animation-delay: 1.5s; animation-duration: 2.8s; height: 150%; width: 3px; }
.stream-3 { left: 80%; animation-delay: 0.8s; animation-duration: 4.2s; height: 80%; }
.stream-4 { left: 25%; animation-delay: 2.1s; animation-duration: 3.1s; height: 110%; }
.stream-5 { left: 60%; animation-delay: 0.5s; animation-duration: 3.9s; height: 180%; width: 3px;}
.stream-6 { left: 90%; animation-delay: 1.2s; animation-duration: 4.5s; height: 90%; }

@keyframes drop {
    0% { top: -100%; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: 100%; opacity: 0; }
}

/* Horizontal Data Stream (For Promo Banner / World Map) */
.horizontal-stream {
    position: absolute;
    height: 2px;
    width: 200px;
    background: linear-gradient(to right, rgba(0, 184, 217, 0) 0%, rgba(0, 184, 217, 1) 50%, rgba(0, 184, 217, 0) 100%);
    box-shadow: 0 0 20px 5px rgba(0, 184, 217, 0.4);
    opacity: 0;
    animation: scan-horizontal 4s infinite linear;
}
.h-stream-1 { top: 20%; animation-delay: 0s; animation-duration: 5s; width: 300px; }
.h-stream-2 { top: 60%; animation-delay: 2s; animation-duration: 4s; width: 250px; background: linear-gradient(to right, rgba(0, 82, 204, 0) 0%, rgba(0, 82, 204, 1) 50%, rgba(0, 82, 204, 0) 100%); box-shadow: 0 0 20px 5px rgba(0, 82, 204, 0.4); }
.h-stream-3 { top: 85%; animation-delay: 1.5s; animation-duration: 6s; width: 150px; }

@keyframes scan-horizontal {
    0% { left: -50%; opacity: 0; transform: scaleX(0.5); }
    10% { opacity: 1; transform: scaleX(1); }
    90% { opacity: 1; transform: scaleX(1); }
    100% { left: 150%; opacity: 0; transform: scaleX(0.5); }
}

/* Server Blinking Lights (For Server Rack Image) */
.server-light {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: blink 2s infinite alternate;
}
.light-green { background-color: #10B981; box-shadow: 0 0 8px #10B981; }
.light-blue { background-color: #3B82F6; box-shadow: 0 0 8px #3B82F6; }

@keyframes blink {
    0%, 100% { opacity: 0.1; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Floating Objects (For Board Image) */
.floating-obj {
    position: absolute;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 184, 217, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    animation: float 6s infinite ease-in-out;
}
.float-1 { top: 20%; left: 15%; animation-delay: 0s; }
.float-2 { top: 40%; right: 20%; animation-delay: 2s; border-color: rgba(0, 82, 204, 0.5); }
.float-3 { bottom: 30%; left: 30%; animation-delay: 4s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes scan {
    0% { top: -150px; }
    100% { top: 100%; }
}