/* GundamCardFx — 3D tilt + glare (shared).
 * All motion is transform/opacity only; layers are pointer-events:none.
 * The JS module is inert on touch-only / reduced-motion devices; the
 * @media block below is a second line of defense for cached states. */

.cardfx {
  position: relative;
  transform:
    perspective(900px)
    rotateY(var(--fx-rx, 0deg))
    rotateX(var(--fx-ry, 0deg))
    translateY(var(--fx-lift, 0px))
    scale(var(--fx-sc, 1));
  transform-style: preserve-3d;
  transition: transform .08s ease-out;
  will-change: transform;
  z-index: 3;
}

.cardfx.cardfx-leave {
  transition: transform .45s cubic-bezier(.2, 1.2, .4, 1);
}

.cardfx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.cardfx-glare {
  mix-blend-mode: soft-light;
  opacity: calc(var(--fx-op, 0) * .69); /* glare intensity: .9 -15% -10% */
  background: radial-gradient(
    circle at var(--fx-mx, 50%) var(--fx-my, 50%),
    rgba(255, 255, 255, .85),
    rgba(255, 255, 255, .08) 42%,
    transparent 68%
  );
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .cardfx { transform: none !important; transition: none !important; }
  .cardfx-glare { display: none !important; }
}