/* ==========================================================================
   animations.css — Keyframes, ambient motion, scroll-reveal states
   All continuous motion is opt-in via a class so it can be globally disabled
   for users who prefer reduced motion.
   ========================================================================== */

/* --- Keyframes ------------------------------------------------------------ */
@keyframes fs-drift-1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(60px, -50px); }
  100% { transform: translate(0, 0); }
}

@keyframes fs-drift-2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-70px, 40px); }
  100% { transform: translate(0, 0); }
}

@keyframes fs-drift-3 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(40px, 60px); }
  100% { transform: translate(0, 0); }
}

@keyframes fs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes fs-dash {
  to { stroke-dashoffset: -24; }
}

@keyframes fs-heartbeat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.18); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.12); }
  50%      { transform: scale(1); }
}

@keyframes fs-dot-pulse {
  0%   { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* --- Ambient drifting orbs ------------------------------------------------ */
.orb {
  will-change: transform;
}

.orb--drift-1 { animation: fs-drift-1 30s ease-in-out infinite; }
.orb--drift-2 { animation: fs-drift-2 28s ease-in-out infinite; }
.orb--drift-3 { animation: fs-drift-3 34s ease-in-out infinite; }

/* --- Marquee track (pauses while hovering a logo) ------------------------- */
.trust__track { animation: fs-marquee 38s linear infinite; }
.trust__track:hover { animation-play-state: paused; }

/* --- ECG monitor: a bright pulse sweeps left→right, drawing the trace ------ */
@keyframes ecg-comet {
  from { stroke-dashoffset: 120; }
  to   { stroke-dashoffset: -880; }
}

.ecg__pulse { animation: ecg-comet 4.2s linear infinite; }

/* --- Ambient hero decorations --------------------------------------------- */
@keyframes hero-spin {
  to { transform: rotate(360deg); }
}

.hero__ecg-trace { animation: ecg-comet 5s linear infinite; }
.hero__ring { animation: hero-spin 26s linear infinite; }
.hero__plus { animation: fs-float 7s ease-in-out infinite; }
.hero__dot { animation: fs-float 5.5s ease-in-out infinite; }

/* --- Mini ECG pulse beside every section eyebrow (JS-injected) ------------- */
.eyebrow-pulse {
  display: inline-block;
  width: 38px;
  height: 0.95em;
  margin-right: 9px;
  vertical-align: middle;
  color: inherit;
}

.eyebrow-pulse svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.eyebrow-pulse__base {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.25;
}

.eyebrow-pulse__trace {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 100;
  filter: drop-shadow(0 0 1.5px currentColor);
  animation: eyebrow-pulse 2.2s linear infinite;
}

@keyframes eyebrow-pulse {
  from { stroke-dashoffset: 18; }
  to   { stroke-dashoffset: -82; }
}

/* --- Heartbeat + pulses --------------------------------------------------- */
.vitals__heart { animation: fs-heartbeat 1.5s ease-in-out infinite; }
.floating-whatsapp { animation: fs-pulse 2.6s infinite; }
.status-dot__ping { animation: fs-dot-pulse 1.9s ease-out infinite; }

/* --- Scroll reveal -------------------------------------------------------- */
/* Only hide elements when JS is available (progressive enhancement): without
   JS the .js class is never added and content stays fully visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--transition-reveal) var(--ease-out-expo),
    transform var(--transition-reveal) var(--ease-out-expo);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion: disable every non-essential animation ---------------- */
@media (prefers-reduced-motion: reduce) {
  .orb--drift-1,
  .orb--drift-2,
  .orb--drift-3,
  .trust__track,
  .ecg__pulse,
  .vitals__heart,
  .floating-whatsapp,
  .status-dot__ping,
  .eyebrow-pulse__trace,
  .hero__ecg-trace,
  .hero__ring,
  .hero__plus,
  .hero__dot {
    animation: none !important;
  }

  /* Show a calm, static mini trace instead of the sweeping pulse. */
  .eyebrow-pulse__trace {
    stroke-dasharray: none;
    opacity: 0.55;
  }

  /* Show a calm, fully-drawn trace instead of the moving sweep. */
  .ecg__pulse {
    stroke-dasharray: none;
    opacity: 0.85;
  }

  .ecg__dot {
    display: none;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}