/* ============================================================
   6DT FX layer — click ripples · spark bursts · hover glows.
   Ported from the u0c.net fx DNA; accent follows the keeper's
   brand color knobs (var(--gold) + color-mix). Disabled for
   reduced-motion users (fx.js never runs, these are inert).
   ============================================================ */

.fx-ripple{
  position:fixed;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:9990;
  border:2px solid var(--gold);transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 22px color-mix(in srgb,var(--gold) 70%,transparent);animation:fxRipple .7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fxRipple{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(8);opacity:0}
}

.fx-spark{
  position:fixed;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:9991;
  background:var(--gold-2);transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--gold);animation:fxSpark .65s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fxSpark{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(0);opacity:0}
}

.fx-pop{animation:fxPop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes fxPop{
  0%{transform:scale(1)}
  35%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

/* pointer-tracked glow on cards (position driven by fx.js --mx/--my) */
.card,.vstat,.vcard{position:relative;overflow:hidden}
.card::after,.vstat::after,.vcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .35s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--gold) 14%,transparent), transparent 62%);
}
.card:hover::after,.vstat:hover::after,.vcard:hover::after{opacity:1}

/* gold buttons get a sweeping sheen on hover */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn-gold:hover::after{transform:translateX(120%)}

@media (prefers-reduced-motion: reduce){
  .fx-ripple,.fx-spark{display:none}
}
@media (pointer:coarse){
  .fx-ripple,.fx-spark{opacity:.9}
}