/* Cyberpunk Carousel Transition Effects */
.projects-carousel {
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    will-change: transform;
}

.cyber-transition {
    animation: cyber-glitch 0.6s;
    will-change: opacity, transform;
}

@keyframes cyber-glitch {
    0% { opacity: 1; }
    10% { opacity: 0.9; transform: translate3d(-4px, 0, 0); }
    20% { opacity: 1; }
    30% { opacity: 0.95; transform: translate3d(4px, 0, 0); }
    40% { opacity: 1; }
    50% { opacity: 0.9; transform: translate3d(-2px, 0, 0); }
    60% { opacity: 1; }
    70% { opacity: 0.95; transform: translate3d(2px, 0, 0); }
    80% { opacity: 1; }
    100% { opacity: 1; }
}

.carousel-digital-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: noise-fade 0.5s;
}

@keyframes noise-fade {
    0% { opacity: 0; }
    20% { opacity: 0.4; }
    60% { opacity: 0.2; }
    100% { opacity: 0; }
}

/* Cyberpunk dot pulse effect */
.carousel-dot.cyber-pulse {
    animation: cyber-dot-pulse 2s infinite;
}

.carousel-dot.clicked {
    animation: cyber-dot-click 0.5s;
}

@keyframes cyber-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 243, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); }
}

@keyframes cyber-dot-click {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); background-color: var(--cyber-neon-blue); }
    100% { transform: scale(1); }
}

/* Enhanced Cyberpunk Project Hover Effects */
.project-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease,
                filter 0.4s ease !important;
}

.project-card:hover {
    transform: translateY(-12px) scale(1.02) !important;
    filter: brightness(1.1) !important;
}

.project-card:active {
    transform: translateY(-5px) scale(0.98) !important;
    transition: transform 0.2s !important;
}