/* Custom keyframes for specific animations */

@keyframes scan {

    0%,
    100% {
        top: 0;
    }

    50% {
        top: 100%;
    }
}

@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;
}

/* 3D Button Style - Primary (Blue) */
.btn-3d-primary {
    position: relative;
    top: 0;
    transition: all 0.15s ease-out;
    box-shadow: 0 6px 0 0 #1e40af,
        /* Darker Blue */
        0 12px 20px rgba(0, 0, 0, 0.4);
    transform-style: preserve-3d;
}

.btn-3d-primary:hover {
    top: -2px;
    box-shadow: 0 8px 0 0 #1e40af,
        0 16px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-3d-primary:active {
    top: 4px;
    box-shadow: 0 2px 0 0 #1e40af,
        0 4px 8px rgba(0, 0, 0, 0.4);
    transform: translateY(4px);
}

/* 3D Button Style - Accent (Orange) */
.btn-3d-accent {
    position: relative;
    top: 0;
    transition: all 0.15s ease-out;
    box-shadow: 0 6px 0 0 #c2410c,
        /* Darker Orange */
        0 12px 20px rgba(0, 0, 0, 0.4);
    transform-style: preserve-3d;
}

.btn-3d-accent:hover {
    top: -2px;
    box-shadow: 0 8px 0 0 #c2410c,
        0 16px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-3d-accent:active {
    top: 4px;
    box-shadow: 0 2px 0 0 #c2410c,
        0 4px 8px rgba(0, 0, 0, 0.4);
    transform: translateY(4px);
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #020617;
}

::-webkit-scrollbar-thumb {
    background: #1E293B;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3B82F6;
}

/* Particles Canvas */
#tech-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind content */
    pointer-events: none;
}