/* ==========================================================================
   Service Strike — feature page visual effects (body.fx)
   1. Floating notification cards around the hero image
   2. Staggered scroll reveals (cards slide in, points pop in one by one)
   3. Spotlight that follows the cursor across cards
   4. Animated step-by-step flow
   Load after theme-pages.css together with fx.js.
   ========================================================================== */

/* ---------- 1. Floating hero cards ---------- */
body.fx .feature-hero-section .visual-shell { position: relative; }
.fx-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border-radius: 14px;
  background: rgba(14, 20, 38, 0.85);
  border: 1px solid var(--hx-border-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation:
    fx-float-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    fx-bob 6s ease-in-out infinite;
}
.fx-float strong { display: block; font-size: 0.86rem; font-weight: 600; color: var(--hx-text); font-family: var(--hx-body); }
.fx-float small { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--hx-muted); }
.fx-float-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid;
  flex: 0 0 auto;
}
.fx-float-icon svg { width: 17px; height: 17px; }
.fx-float-1 { top: 30%; left: -2%; animation-delay: 0.4s, 1s; }
.fx-float-2 { top: 0; right: 2%; animation-delay: 0.7s, -2s; }
.fx-float-3 { bottom: 6%; left: 6%; animation-delay: 1s, -4s; }
@keyframes fx-float-in { to { opacity: 1; transform: none; } }
@keyframes fx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ---------- 2. Staggered reveals ---------- */
.fx-ready .fx-reveal {
  opacity: 0;
  transform: translateX(var(--fx-from, 0)) translateY(var(--fx-rise, 28px));
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-ready .fx-from-left { --fx-from: -48px; --fx-rise: 0px; }
.fx-ready .fx-from-right { --fx-from: 48px; --fx-rise: 0px; }
.fx-ready .fx-pop { --fx-rise: 14px; transform: translateY(14px) scale(0.94); }
.fx-ready .fx-reveal.is-in { opacity: 1; transform: none; }

/* list items inside a card follow the card in */
.fx-ready .fx-list li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fx-ready .is-in .fx-list li { opacity: 1; transform: none; }
.fx-ready .is-in .fx-list li:nth-child(1) { transition-delay: 0.35s; }
.fx-ready .is-in .fx-list li:nth-child(2) { transition-delay: 0.45s; }
.fx-ready .is-in .fx-list li:nth-child(3) { transition-delay: 0.55s; }
.fx-ready .is-in .fx-list li:nth-child(4) { transition-delay: 0.65s; }
.fx-ready .is-in .fx-list li:nth-child(5) { transition-delay: 0.75s; }
.fx-ready .is-in .fx-list li:nth-child(6) { transition-delay: 0.85s; }

/* ---------- 3. Cursor spotlight ---------- */
body.fx .fx-spot {
  position: relative;
  isolation: isolate;
}
body.fx .fx-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
body.fx .fx-spot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(125, 211, 252, 0.9), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
body.fx .fx-spot:hover::after,
body.fx .fx-spot:hover::before { opacity: 1; }

/* ---------- 4. Animated flow (steps + arrows tagged by fx.js) ---------- */
body.fx .fx-step {
  position: relative;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, color 0.4s ease;
}
body.fx .workflow-flow-step { color: var(--hx-muted); }
body.fx .fx-step.is-lit {
  color: #fff;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(56, 189, 248, 0.22));
  border-color: rgba(125, 211, 252, 0.6);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1), 0 10px 30px rgba(56, 189, 248, 0.25);
  transform: translateY(-3px);
}
body.fx .fx-step.is-done { color: var(--hx-text); border-color: rgba(56, 189, 248, 0.3); }
body.fx .fx-step.is-final.is-lit {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(52, 211, 153, 0.22));
  border-color: rgba(110, 231, 183, 0.7);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12), 0 10px 30px rgba(52, 211, 153, 0.3);
}
/* arrows keep their own glyph/color (desktop text or mobile ::before) and
   just dim until the light passes through them */
body.fx .fx-arrow { opacity: 0.3; transition: opacity 0.3s ease, filter 0.3s ease; }
body.fx .fx-arrow.is-lit { opacity: 1; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.95)); }

@media (max-width: 980px) {
  .fx-float-1 { left: 0; }
  .fx-float-2 { right: 0; }
}
@media (max-width: 640px) {
  .fx-float { padding: 0.5rem 0.75rem 0.5rem 0.5rem; gap: 0.5rem; }
  .fx-float-icon { width: 28px; height: 28px; }
  .fx-float strong { font-size: 0.76rem; }
  .fx-float small { display: none; }
  .fx-float-3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-float { animation: none; opacity: 1; transform: none; }
  .fx-ready .fx-reveal, .fx-ready .fx-list li { opacity: 1; transform: none; transition: none; }
}