/* ============================================================
   HEXNIX GROUP — FX LAYER
   Premium motion & pointer effects. Brand colours only.
   All effects respect prefers-reduced-motion.
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--teal));
  z-index: 9999; pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 90, 46, 0.6);
  transition: width .1s linear;
}

/* ---------- Nav: solidify + lift on scroll ---------- */
.nav { transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nav.scrolled {
  background: rgba(11, 16, 24, 0.92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  border-bottom-color: var(--border-strong);
}

/* ---------- Pointer-follow spotlight glow on cards ----------
   JS adds .fx-card and sets --mx / --my on pointer move.
   The glow is a background layer, so it sits BEHIND card text.   */
.fx-card {
  background-image: radial-gradient(
    240px circle at var(--mx, -200px) var(--my, -200px),
    var(--accent-soft), transparent 62%
  );
  transition: border-color .3s ease, box-shadow .35s ease, transform .25s ease;
}
.fx-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

/* ---------- Magnetic + tilt helpers ---------- */
.fx-magnetic { transition: transform .2s cubic-bezier(.2,.8,.3,1); will-change: transform; }
.fx-tilt     { transform-style: preserve-3d; will-change: transform; }

/* ---------- Count-up stat: subtle glow as it lands ---------- */
.fx-counting { text-shadow: 0 0 18px rgba(255, 90, 46, 0.45); }

/* ---------- Reveal polish: gentle blur-in for fade-up ---------- */
.fade-up { filter: blur(0); }
@media (prefers-reduced-motion: no-preference) {
  .fade-up:not(.visible) { filter: blur(6px); transition: filter .6s ease, opacity .6s ease, transform .6s ease; }
  .fade-up.visible       { filter: blur(0); }
}

/* ---------- Mobile / touch animations ----------
   Phones have no hover, so give them tactile press feedback
   and ambient motion that doesn't need a pointer.            */
@media (hover: none) and (pointer: coarse) {
  .btn:active, .kp-cta:active, .plan-cta:active {
    transform: scale(0.96);
    transition: transform .12s ease;
  }
  .fx-card:active, .kp-card:active, .plan-card:active {
    transform: scale(0.985);
    transition: transform .15s ease;
    border-color: var(--border-strong);
  }
}

/* ---------- "Most Popular" badge shimmer (all devices) ---------- */
.kp-badge, .popular-badge { overflow: hidden; }
.kp-badge::after, .popular-badge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.35) 50%, transparent 75%);
  transform: translateX(-110%);
  animation: fxBadgeShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fxBadgeShine {
  0%, 55% { transform: translateX(-110%); }
  100%    { transform: translateX(110%); }
}

/* ---------- Accent CTA glow pulse (subtle, ambient) ---------- */
@keyframes fxGlowPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(255,90,46,0.28), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 10px 38px rgba(255,90,46,0.44), inset 0 1px 0 rgba(255,255,255,0.18); }
}
.btn.primary, .kp-cta-primary { animation: fxGlowPulse 3.6s ease-in-out infinite; }

/* ---------- Tap ripple (touch-first feedback) ---------- */
.fx-ripple-host { position: relative; overflow: hidden; }
.fx-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.30); pointer-events: none;
  animation: fxRipple .6s ease-out forwards;
}
@keyframes fxRipple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Honour reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-progress, .fx-card, .fx-magnetic, .fx-tilt { transition: none !important; }
  .fx-card { background-image: none !important; }
  .kp-badge::after, .popular-badge::after { animation: none !important; }
  .btn.primary, .kp-cta-primary { animation: none !important; }
  .fx-ripple { display: none !important; }
}