/**
 * Projects Page Styles
 * MyPlanet Design Theme
 */

/* Project Card Hover Effects */
.project-card-container:hover .project-image {
    transform: scale(1.08) !important;
}

.project-image {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    display: block;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1) !important;
}

/* Project Image Container with Overlays */
.project-image-container {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.project-image-container::before,
.project-image-container::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s ease-out;
    z-index: 10;
    pointer-events: none;
}

.project-image-container::before {
    top: 0;
    background-image: url('../../images/overlay-top-white.webp');
    transform: translateX(-50%) translateY(-100%);
}

.project-image-container::after {
    bottom: 0;
    background-image: url('../../images/overlay-bottom-white.webp');
    transform: translateX(-50%) translateY(100%);
}

.project-card-container:hover .project-image-container::before {
    transform: translateX(-50%) translateY(0);
}

.project-card-container:hover .project-image-container::after {
    transform: translateX(-50%) translateY(0);
}