/* Site-wide mouse effects — see js/fx.js */

/* Hide the system pointer; text fields keep their normal text cursor */
html.fx-on, html.fx-on a, html.fx-on button, html.fx-on label, html.fx-on [role="button"],
html.fx-on .ps-viewport, html.fx-on .pcard { cursor: none; }
html.fx-on input, html.fx-on textarea, html.fx-on select { cursor: text; }

.fx-flower {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10002;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.fx-flower.on { opacity: 1; }
.fx-flower.text { opacity: 0; }
.fx-flower svg {
  position: absolute;
  width: 26px;
  height: 26px;
  left: -13px;
  top: -13px;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(183, 154, 242, .95)) drop-shadow(0 0 12px rgba(229, 140, 245, .65));
  transition: scale .25s cubic-bezier(.3, 1.6, .5, 1), filter .25s ease;
}
.fx-flower path { fill: url(#fx-petal); stroke: #fff; stroke-width: .8; }
.fx-spin { transform-origin: 24px 24px; animation: fx-spin 5s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-flower.hot svg {
  scale: 1.55;
  filter: drop-shadow(0 0 6px rgba(183, 154, 242, 1)) drop-shadow(0 0 18px rgba(229, 140, 245, .85));
}
.fx-flower.press svg { scale: .8; }

.fx-trail { position: fixed; inset: 0; z-index: 10001; width: 100vw; height: 100vh; pointer-events: none; }

/* Colour that lights up a card under the mouse */
.fx-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(183, 154, 242, .45), rgba(243, 198, 255, .25) 45%, transparent 70%);
  mix-blend-mode: multiply;
  transition: opacity .35s ease;
}
:hover > .fx-glow { opacity: 1; }