/* ============================================================
 * POWALIFTA insane-fx — signature moments.
 *  1. Custom red cursor (dot + trailing ring), grows on hover.
 *  2. Magnetic CTA buttons (lean toward cursor when nearby).
 *  3. Scroll-driven barbell loader pinned below nav.
 *  4. Hero headline text scramble (handled in JS, no CSS needed).
 *
 * Hidden on touch devices via @media (hover: none).
 * Disabled under prefers-reduced-motion.
 * ============================================================ */

/* Custom cursor disabled — was too laggy under heavy page load.
   Native OS cursor is always faster. */

.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
}
.fx-cursor-dot {
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: #ff2d3f;
  box-shadow: 0 0 12px #ff2d3f, 0 0 24px rgba(255, 45, 63, 0.6);
  transition: width 0.2s, height 0.2s, margin 0.2s, background 0.2s;
  mix-blend-mode: normal;
}
.fx-cursor-ring {
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border: 1.5px solid rgba(255, 45, 63, 0.7);
  border-radius: 50%;
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              height 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              margin 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.2s ease-out,
              background-color 0.2s ease-out;
}
.fx-cursor-dot.fx-cursor-hover {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: #ffffff;
}
.fx-cursor-ring.fx-cursor-hover {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-color: #ff2d3f;
  background-color: rgba(255, 45, 63, 0.08);
}
.fx-cursor-dot.fx-cursor-text {
  width: 4px;
  height: 22px;
  margin-left: -2px;
  margin-top: -11px;
  border-radius: 1px;
}
.fx-cursor-ring.fx-cursor-text {
  opacity: 0;
}
.fx-cursor-dot.fx-cursor-pressed {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}

@media (hover: none), (pointer: coarse) {
  .fx-cursor-dot, .fx-cursor-ring { display: none !important; }
  html, html * { cursor: auto !important; }
}

.fx-magnet {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.fx-magnet-active {
  transition: transform 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fx-barbell-bar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 90;
  height: 56px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fx-barbell-bar.fx-visible {
  opacity: 1;
  transform: translateY(0);
}
.fx-barbell-bar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.fx-barbell-bar .bar-shaft {
  stroke: url(#fxBarSteel);
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.fx-barbell-bar .bar-sleeve {
  fill: #6b6b75;
  stroke: #444450;
  stroke-width: 1;
}
.fx-barbell-bar .bar-collar {
  fill: #2a2a30;
  stroke: #1a1a20;
}
.fx-barbell-bar .bar-plate {
  fill: url(#fxPlateRed);
  stroke: #1a0608;
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.35s var(--ease-out-quart),
              transform 0.45s var(--ease-out-quint);
}
.fx-barbell-bar .bar-plate.fx-loaded {
  opacity: 1;
  transform: scale(1);
}
.fx-barbell-bar .progress-label {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: #ff2d3f;
  text-transform: uppercase;
}
.fx-barbell-bar .progress-pct {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 14px;
  fill: #ffffff;
  letter-spacing: 0.04em;
}

[data-fx-scramble] {
  font-family: inherit;
}
.fx-scrambling { color: rgba(255, 45, 63, 0.85); }

@media (prefers-reduced-motion: reduce) {
  html, html * { cursor: auto !important; }
  .fx-cursor-dot, .fx-cursor-ring { display: none !important; }
  .fx-magnet { transition: none !important; transform: none !important; }
  .fx-barbell-bar { opacity: 1; transform: none; }
  .fx-barbell-bar .bar-plate { opacity: 1; transform: scale(1); transition: none; }
}