/*
 * Card spotlight and tilt. Enabled by portfolio-cards.js only for precise
 * pointers; reduced-motion visitors never receive these states.
 */

.project-card,
.expertise-card {
    position: relative;
}

.project-card::after,
.expertise-card::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), #cfbd8c26, transparent 70%);
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
    content: '';
}

.project-card.is-spotlit::after,
.expertise-card.is-spotlit::after {
    opacity: 1;
}

.project-card.is-tilting {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
    transition: transform 240ms ease-out, border-color 180ms ease;
}