/* Pointer-driven tilt for catalogue and note cards. js/motion.js sets the variables. */
.product-card, .note-card { --mx: 50%; --my: 50%; }
.product-card::after, .note-card::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(320px circle at var(--mx) var(--my), rgb(197 242 59 / .32), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.product-card:hover::after, .note-card:hover::before { opacity: 1; }
.product-card.is-tilting, .note-card.is-tilting, .js .product-card[data-reveal].is-visible.is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    transition: transform .12s linear, box-shadow .4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
    .product-card.is-tilting, .note-card.is-tilting { transform: none; }
}