.nunilabs-card-animation {
    background-image: url('/img/card-nunilabs.png');
    background-size: contain;
    width: 228px;
    height: 149px;
    position: absolute;
    left: 100%;
    margin-left: -308px;
    transform: translateX(0);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 99;
    opacity: 0;
}

.project-card:hover .nunilabs-card-animation {
    opacity: 1;
    transform: translateX(24px);
    margin-left: -288px;
}

.sugu-swap-card-animation {
    background-image: url('/img/card-imasugu.gif');
    background-size: contain;
    width: 90px;
    height: 90px;
    position: absolute;
    left: 100%;
    margin-left: -120px;
    transform: scale(3);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 99;
    opacity: 0;
}

.project-card:hover .sugu-swap-card-animation {
    opacity: 1;
    transform: scale(1);
}

.creative-zing-card-animation {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -40%;
    left: 100%;
    width: 240px;
    height: 975px;
    margin-left: -50%;
    background-size: contain;
    background-position: center;
    animation-timing-function: ease-out;
    pointer-events: none;
}

.project-card:hover .creative-zing-card-animation {
    background-image: url('/img/card-creativeZing-A.png');
    z-index: 2;
    opacity: 1;
}

.project-card:hover .creative-zing-card-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/card-creativeZing-B.png');
    background-size: cover;
    background-position: center;
    animation: image2Cycle 850ms infinite ease-out;
    z-index: 1;
}

.creative-zing-card-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/card-creativeZing-C.png');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 3;
}

.project-card:active .creative-zing-card-animation::after {
    opacity: 1;
}

.project-card:active .creative-zing-card-animation {
    animation-play-state: paused;
    background-image: none;
    opacity: 1;
}

.project-card:active .creative-zing-card-animation::before {
    animation-play-state: paused;
    background-image: none;
}

@keyframes image2Cycle {
    /* Image2 hidden at start */
    0% { opacity: 0; }
    
    /* Stay hidden until transition starts (0-200ms) */
    23.5% { opacity: 0; }
    
    /* Crossfade in during transition (200-500ms) */
    58.8% { opacity: 1; }
    
    /* Hold visible during display period (500-550ms) */
    64.7% { opacity: 1; }
    
    /* Crossfade out (550-850ms) */
    100% { opacity: 0; }
}