/* Keep the existing surface and semantic colours; light belongs to the material. */
.site-front #tabPanel .card-motion {
  transform: perspective(1000px) translateY(var(--card-lift, 0px))
    rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg))
    scale(calc(1 - var(--card-press, 0) * .008));
  transform-origin: 50% 50%;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.site-front .card-motion { isolation: isolate; }
.site-front .card-motion.is-tilting { will-change: transform; z-index: 1; }
.site-front .card-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--card-light, 0) * .64);
  background:
    radial-gradient(ellipse at var(--card-light-x, 50%) var(--card-light-y, 50%),
      rgba(255, 244, 222, .21) 0%, rgba(233, 241, 255, .09) 24%, rgba(213, 228, 251, .025) 48%, transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255, 239, 212, .17), inset 0 0 0 1px rgba(214, 229, 255, .07);
}
@media (prefers-reduced-motion: reduce) {
  .site-front #tabPanel .card-motion { transform: none; will-change: auto; }
  .site-front .card-motion::after { display: none; }
}