/* ==========================================================================
   HeartBeat 360 — HeroBackground (Landing Page)
   4-stage animated background: mesh gradient, waveform, particles, parallax
   ========================================================================== */

/* ---------- CONTAINER ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ============================================================
   STAGE 1 — Animated Mesh Gradient (light tones)
   ============================================================ */
.hero-bg__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    #ffffff   0%,
    #f0fdfa  25%,
    #ecfdf5  50%,
    #e0f2fe  75%,
    #f0fdfa 100%
  );
  background-size: 300% 300%;
  animation: heroMeshFlow 20s ease infinite alternate;
}

@keyframes heroMeshFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   STAGE 2 — Signature Waveform Accent Line
   ============================================================ */
.hero-bg__wave-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-bg__wave-svg {
  position: absolute;
  top: 42%;
  left: 0;
  width: 200%;
  height: 100px;
  animation: waveScroll 15s linear infinite;
}

.hero-bg__wave-path {
  fill: none;
  stroke: rgba(13, 148, 136, 0.42);
  stroke-width: 2.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.35));
}

.hero-bg__wave-path--accent {
  fill: none;
  stroke: rgba(16, 185, 129, 0.35);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.25));
}

@keyframes waveScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   STAGE 3 — Floating Particles / Network Nodes
   ============================================================ */
.hero-bg__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.22);
  opacity: 0;
  animation: particleRise 8s ease-in-out infinite;
}

/* 10 particles: staggered positions, sizes, delays */
.hero-particle--1  { width: 5px; height: 5px; left: 8%;  bottom: 10%; animation-delay: 0s;   animation-duration: 7s;   }
.hero-particle--2  { width: 4px; height: 4px; left: 18%; bottom: 5%;  animation-delay: 1.2s; animation-duration: 9s;   }
.hero-particle--3  { width: 6px; height: 6px; left: 30%; bottom: 15%; animation-delay: 2.4s; animation-duration: 8s;   }
.hero-particle--4  { width: 3px; height: 3px; left: 42%; bottom: 8%;  animation-delay: 0.6s; animation-duration: 10s;  }
.hero-particle--5  { width: 5px; height: 5px; left: 55%; bottom: 12%; animation-delay: 3.5s; animation-duration: 7.5s; }
.hero-particle--6  { width: 4px; height: 4px; left: 65%; bottom: 6%;  animation-delay: 1.8s; animation-duration: 8.5s; }
.hero-particle--7  { width: 6px; height: 6px; left: 75%; bottom: 18%; animation-delay: 4.2s; animation-duration: 9s;   }
.hero-particle--8  { width: 5px; height: 5px; left: 85%; bottom: 10%; animation-delay: 2.8s; animation-duration: 7s;   }
.hero-particle--9  { width: 3px; height: 3px; left: 92%; bottom: 4%;  animation-delay: 5.0s; animation-duration: 11s;  }
.hero-particle--10 { width: 4px; height: 4px; left: 50%; bottom: 20%; animation-delay: 0.3s; animation-duration: 8s;   }

@keyframes particleRise {
  0%   { opacity: 0;    transform: translateY(0) scale(0.6); }
  15%  { opacity: 0.28; }
  50%  { opacity: 0.18; transform: translateY(-70px) scale(1); }
  85%  { opacity: 0.06; }
  100% { opacity: 0;    transform: translateY(-140px) scale(0.4); }
}

/* Thin connector lines between nearby node pairs */
.hero-connector {
  position: absolute;
  height: 1px;
  background: rgba(13, 148, 136, 0.08);
  transform-origin: left center;
  animation: connectorFade 6s ease-in-out infinite;
}

.hero-connector--1 {
  width: 80px;
  top: 55%;
  left: 20%;
  transform: rotate(-18deg);
  animation-delay: 1s;
}

.hero-connector--2 {
  width: 60px;
  top: 38%;
  left: 62%;
  transform: rotate(12deg);
  animation-delay: 3.5s;
}

.hero-connector--3 {
  width: 50px;
  top: 68%;
  left: 78%;
  transform: rotate(-8deg);
  animation-delay: 5s;
}

@keyframes connectorFade {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}

/* ============================================================
   STAGE 4 — Parallax transition (JS sets inline transform)
   ============================================================ */
.hero-bg__parallax-layer {
  transition: transform 0.15s ease-out;
}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-bg__gradient {
    animation: none !important;
    background-position: 50% 50% !important;
  }
  .hero-bg__wave-svg {
    animation: none !important;
    transform: none !important;
  }
  .hero-particle {
    animation: none !important;
    opacity: 0.12 !important;
    transform: none !important;
  }
  .hero-connector {
    animation: none !important;
    opacity: 0.05 !important;
  }
  .hero-bg__parallax-layer {
    transition: none !important;
  }
}