// 3D mouse-tilt card. The transform is set imperatively by `[wrTilt]`,
// so this stylesheet just covers the card chrome + the optional glare
// overlay that the directive appends when `[glare]="true"`.

.wr-tilt-card {
  display: block;
  position: relative;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--wr-color-light);
  background: var(--wr-color-white);
  color: var(--wr-color-dark);
  box-shadow: 0 1px 2px rgba(var(--wr-color-backdrop-rgb), 0.06);
  // Card itself doesn't need overflow:hidden by default — the directive
  // toggles overflow when glare is enabled. Authors can opt in.
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

// Glare overlay (appended by `[wrTilt]` when `[glare]="true"`)
// Lives in this package so the visual lives with the card chrome.
.wr-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  // Light surfaces: glare reads as a soft moving shade. Dark theme flips
  // to the classic white sheen below.
  background: radial-gradient(
    circle at var(--wr-tilt-glare-x, 50%) var(--wr-tilt-glare-y, 50%),
    var(--wr-tilt-glare-color, rgba(var(--wr-color-dark-rgb), 0.12)),
    transparent 60%
  );
  mix-blend-mode: multiply;
}

[data-theme='dark'] .wr-tilt-glare {
  --wr-tilt-glare-color: rgb(255 255 255 / 25%);

  mix-blend-mode: overlay;
}