/* Stills: each frame leans toward the pointer, the picture shifts a little inside it, and a soft light follows. */
.still-patreon-card { --tx: 0; --ty: 0; --mx: 50%; --my: 50%; transform-style: preserve-3d; }
.still-patreon-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 52%); mix-blend-mode: soft-light; }
.still-patreon-card img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  html body .still-patreon-card:hover { transform: perspective(1100px) scale(1.012) rotateX(calc(var(--ty) * -3.5deg)) rotateY(calc(var(--tx) * 4.5deg)) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .55) !important; }
  html body .still-patreon-card:hover img { transform: translate(calc(var(--tx) * -9px), calc(var(--ty) * -9px)) scale(1.06); }
  .still-patreon-card:hover::after { opacity: 1; }
}
/* touch: a press lifts the frame under the finger */
.still-patreon-card.is-pressed { transform: scale(.985) !important; }
.still-patreon-card.is-pressed::after { opacity: 1; }
@media all { :where(html[data-koan-motion="reduced"]) .still-patreon-card:hover, :where(html[data-koan-motion="reduced"]) .still-patreon-card:hover img { transform: none !important; } }