/* ============================================================
   fx.css — shared styles for the "max-wow" engine (fx.js).
   Loaded on the home page (/) and the archived midnight/editorial designs.
   Keeps all concept effects out of the global main.css.
   ============================================================ */

/* custom cursor (elements injected by fx.js) */
.fx-cursoron, .fx-cursoron * { cursor: none !important; }
.fx-dot, .fx-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; border-radius: 50%; will-change: transform; }
/* a crisp dot (precise pointer) + a hollow ring that trails and grows on hover */
.fx-dot { width: 7px; height: 7px; background: var(--fx-cursor, #4f46e5);
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 10px -3px var(--fx-cursor, #4f46e5); }
.fx-ring { width: 34px; height: 34px; border: 1.6px solid color-mix(in srgb, var(--fx-cursor, #4f46e5) 75%, transparent); opacity: .85;
  transition: width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1), opacity .25s, background .25s; }
body.fx-hover .fx-ring { width: 56px; height: 56px; opacity: 1; background: color-mix(in srgb, var(--fx-cursor, #4f46e5) 12%, transparent); }
body.fx-down .fx-ring { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .fx-dot, .fx-ring { display: none; } }

/* generic canvas-background helper */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; }