.portfolio-card-logo {
    display: flex;
    height: 240px;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: transparent;
}

.portfolio-card-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    transform-origin: center;
    will-change: transform;
}

.portfolio-card {
    --logo-hover-x: 1px;
    --logo-hover-y: -3px;
    --logo-hover-tilt: 0.35deg;
    --logo-hover-duration: 2.9s;
    transform: translateY(0);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease, border-color 400ms ease;
}

.portfolio-card:hover {
    transform: translateY(-2px);
    border-color: rgba(105, 191, 255, 0.38);
    box-shadow: 0 10px 28px rgba(3, 9, 22, 0.07);
}

.portfolio-card:nth-child(2n) {
    --logo-hover-x: -1px;
    --logo-hover-y: -2px;
    --logo-hover-tilt: -0.35deg;
    --logo-hover-duration: 3.2s;
}

.portfolio-card:nth-child(3n) {
    --logo-hover-x: 0;
    --logo-hover-y: -3px;
    --logo-hover-tilt: 0.25deg;
    --logo-hover-duration: 3.5s;
}

.portfolio-card:hover .portfolio-card-logo img {
    animation: portfolio-card-logo-hover var(--logo-hover-duration) ease-in-out infinite;
}

@keyframes portfolio-card-logo-hover {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
    50% {
        transform: translate3d(var(--logo-hover-x), var(--logo-hover-y), 0) rotate(var(--logo-hover-tilt)) scale(1.012);
    }
}

@media (max-width: 640px) {
    .portfolio-card-logo {
        height: 210px;
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card,
    .portfolio-card:hover {
        transform: none;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .portfolio-card:hover .portfolio-card-logo img {
        animation: none;
        transform: none;
    }
}