/* ============================================================
   tmt-fx.css — showcase effects (src/shared/tmt-fx.js). Landing,
   sign-up and account pages only.

   Spotlight: every card near the pointer lights the stretch of its
   border nearest it; the card under the pointer gets a faint wash.
   The ring is a pseudo-element masked to a 2px band (the card's 1px
   border and the pixel inside it, well clear of its padding), so it
   never covers the card's text; the wash is a background image under
   the text. Neither takes a click. The script sets the classes only for a
   hovering mouse or pen outside reduced motion; the media query below
   holds that line in CSS as well.
   ============================================================ */
.tmt-fx-spot {
  --fx-ring: color-mix(in oklch, var(--cool) 85%, transparent);
  --fx-wash: color-mix(in oklch, var(--cool) 7%, transparent);
}
.tmt-fx-spot[data-fx-tone="brand"] {
  --fx-ring: color-mix(in oklch, var(--brand) 85%, transparent);
  --fx-wash: color-mix(in oklch, var(--brand) 6%, transparent);
}

.tmt-fx-item { --fx-x: -999px; --fx-y: -999px; }
.tmt-fx-spot .tmt-fx-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--fx-x) var(--fx-y), var(--fx-ring), transparent 72%);
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-standard);
  pointer-events: none;
}
.tmt-fx-spot.is-fx-on .tmt-fx-item::before { opacity: 1; }
.tmt-fx-spot.is-fx-on .tmt-fx-item:hover {
  background-image: radial-gradient(260px circle at var(--fx-x) var(--fx-y), var(--fx-wash), transparent 70%);
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .tmt-fx-spot .tmt-fx-item::before { display: none; }
  .tmt-fx-spot.is-fx-on .tmt-fx-item:hover { background-image: none; }
}