[data-tilt] {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

[data-tilt].is-tilting {
    transition: box-shadow 0.4s ease;
}

[data-tilt]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(143, 168, 122, 0.28),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

[data-tilt]:hover::before,
[data-tilt].is-tilting::before {
    opacity: 1;
}

@media (max-width: 768px) {
    [data-tilt] {
        transform: none !important;
    }
    [data-tilt]::before {
        display: none;
    }
}