/* assets/css/index.css */

/* --- 3D Model Viewer --- */
model-viewer {
    width: 100%;
    height: 100%;
    background-color: transparent;
    --poster-color: transparent;
}

/* --- Progress Bar --- */
.progress-bar {
    display: block;
    width: 33%;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .progress-bar {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.progress-bar.hide {
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.update-bar {
    background-color: #3b82f6;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    float: left;
    transition: width 0.3s;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Marquee Animation (Infinite Scroll) --- */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
    /* Pause on hover for better UX */
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* --- General Animations --- */
.animate-pulse-slow {
    animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

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

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background: #333;
    }

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

}


/* Tech Card Enhancements */
.tech-card {
    clip-path: polygon(
        10px 0, 100% 0, 
        100% calc(100% - 10px), calc(100% - 10px) 100%, 
        0 100%, 0 10px
    );
}

.tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    transition: left 0.5s;
    pointer-events: none;
    z-index: 5;
}

.tech-card:hover::before {
    left: 100%;
    transition: left 0.7s;
}