.club-card-scene {
  perspective: 1200px;
}

.membership-card {
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-light-x: 50%;
  --card-light-y: 50%;
  --card-shadow-x: 0px;
  --card-shadow-y: 28px;
  --card-shadow-color: rgba(0,0,0,.32);
  --card-inset-color: rgba(255,255,255,.18);
  --card-border-color: rgba(255,255,255,.22);
  --card-highlight-color: rgba(255,255,255,.14);
  --card-shine-opacity: 0;
  --card-shine-active-opacity: .58;
  --card-shine-blend: screen;
  position: relative;
  overflow: hidden;
  border-radius: 5.2% / 8.2%;
  box-shadow: var(--card-shadow-x) var(--card-shadow-y) 58px var(--card-shadow-color), 0 2px 0 var(--card-inset-color) inset;
  transform: rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform .48s cubic-bezier(.2,.75,.2,1), box-shadow .48s cubic-bezier(.2,.75,.2,1);
  will-change: transform;
}

.membership-card--always-lit {
  --card-shadow-color: rgba(0,0,0,.4);
  --card-inset-color: rgba(255,255,255,.28);
  --card-border-color: rgba(255,255,255,.32);
  --card-highlight-color: rgba(255,255,255,.18);
  --card-shine-opacity: .72;
  --card-shine-active-opacity: .72;
  --card-shine-blend: soft-light;
}

.membership-card.is-tilting {
  transition: transform 80ms linear, box-shadow 120ms linear;
}

.membership-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--card-border-color);
  border-radius: inherit;
  background: linear-gradient(145deg, var(--card-highlight-color), transparent 32%, transparent 67%, rgba(0,0,0,.12));
  content: "";
  pointer-events: none;
}

.membership-card > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.membership-card-shine {
  position: absolute;
  inset: -1px;
  z-index: 2;
  margin: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--card-light-x) var(--card-light-y), rgba(255,255,255,.46) 0, rgba(255,255,255,.22) 23%, rgba(255,255,255,.08) 47%, transparent 84%);
  mix-blend-mode: var(--card-shine-blend);
  opacity: var(--card-shine-opacity);
  pointer-events: none;
  transform: translateZ(1px);
  transition: opacity 280ms ease;
}

.membership-card--always-lit .membership-card-shine {
  background: radial-gradient(circle at var(--card-light-x) var(--card-light-y), rgba(255,255,255,.62), rgba(255,255,255,.15) 24%, transparent 56%);
}

.membership-card.is-tilting .membership-card-shine {
  opacity: var(--card-shine-active-opacity);
}

@media (prefers-reduced-motion: reduce) {
  .membership-card {
    transition: none;
    transform: none !important;
    will-change: auto;
  }
  .membership-card-shine { display: none; }
}