/* =====================================================
   MedSina — Medical Background for "How It Works"
   ===================================================== */

/* Override dot-pattern background with medical theme */
.how-it-works {
  background: linear-gradient(160deg,
    #f0f9ff 0%,
    #e0f2fe 20%,
    #f0fdfa 60%,
    #ecfeff 100%
  ) !important;
}

/* Remove the old dot-pattern pseudo-elements */
.how-it-works::before {
  display: none !important;
}
.how-it-works::after {
  display: none !important;
}

/* Medical background container */
.ms-med-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ---------- ECG / heartbeat line ---------- */
.ms-ecg-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  opacity: .18;
}
.ms-ecg-path {
  fill: none;
  stroke: url(#ecgGrad);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Draw-on animation */
@keyframes ms-ecg-draw {
  from { stroke-dashoffset: 2800 }
  to   { stroke-dashoffset: 0 }
}
.ms-ecg-path {
  stroke-dasharray: 2800;
  stroke-dashoffset: 2800;
}
.ms-ecg-path.ms-ecg-go {
  animation: ms-ecg-draw 3.5s cubic-bezier(.4,0,.2,1) forwards;
}

/* ---------- Floating medical crosses ---------- */
@keyframes ms-cross-float {
  0%,100% { transform: translateY(0) rotate(0deg) }
  33%      { transform: translateY(-12px) rotate(8deg) }
  66%      { transform: translateY(6px) rotate(-5deg) }
}
.ms-med-cross {
  position: absolute;
  font-size: 0;
  opacity: .09;
}
.ms-med-cross::before,
.ms-med-cross::after {
  content: '';
  position: absolute;
  background: #2563eb;
  border-radius: 2px;
}
/* Horizontal bar */
.ms-med-cross::before { width: 100%; height: 30%; top: 35%; left: 0; }
/* Vertical bar */
.ms-med-cross::after  { width: 30%; height: 100%; top: 0; left: 35%; }

.ms-cross-1 { width:28px;height:28px; top:8%;  left:4%;  animation: ms-cross-float 7s  ease-in-out infinite }
.ms-cross-2 { width:18px;height:18px; top:15%; right:6%; animation: ms-cross-float 9s  ease-in-out infinite; animation-delay:-3s }
.ms-cross-3 { width:22px;height:22px; top:70%; left:8%;  animation: ms-cross-float 8s  ease-in-out infinite; animation-delay:-1.5s }
.ms-cross-4 { width:14px;height:14px; top:55%; right:5%; animation: ms-cross-float 10s ease-in-out infinite; animation-delay:-5s }
.ms-cross-5 { width:20px;height:20px; top:85%; left:22%; animation: ms-cross-float 7.5s ease-in-out infinite; animation-delay:-2s }
.ms-cross-6 { width:16px;height:16px; top:25%; left:50%; animation: ms-cross-float 11s ease-in-out infinite; animation-delay:-4s }

/* ---------- Atom / molecule rings ---------- */
@keyframes ms-atom-spin {
  to { transform: rotate(360deg) }
}
@keyframes ms-atom-spin-r {
  to { transform: rotate(-360deg) }
}
.ms-atom {
  position: absolute;
  border-radius: 50%;
  opacity: .1;
}
.ms-atom-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid #2563eb;
}
.ms-atom-1 {
  width: 90px; height: 90px;
  top: 5%; right: 12%;
}
.ms-atom-1 .ms-atom-ring:nth-child(1) {
  inset: 0;
  animation: ms-atom-spin 6s linear infinite;
}
.ms-atom-1 .ms-atom-ring:nth-child(2) {
  inset: 10px;
  border-color: #0d9488;
  animation: ms-atom-spin-r 8s linear infinite;
}
.ms-atom-1 .ms-atom-ring:nth-child(3) {
  inset: 22px;
  border-color: #06b6d4;
  animation: ms-atom-spin 10s linear infinite;
}
.ms-atom-1::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: #2563eb;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.ms-atom-2 {
  width: 60px; height: 60px;
  bottom: 15%; left: 3%;
  opacity: .08;
}
.ms-atom-2 .ms-atom-ring:nth-child(1) {
  inset: 0;
  border-color: #0d9488;
  animation: ms-atom-spin 7s linear infinite;
}
.ms-atom-2 .ms-atom-ring:nth-child(2) {
  inset: 12px;
  border-color: #2563eb;
  animation: ms-atom-spin-r 5s linear infinite;
}
.ms-atom-2::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: #0d9488;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

/* ---------- DNA helix dots ---------- */
@keyframes ms-dna-wave {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-8px) }
}
.ms-dna {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 30px 0;
  opacity: .12;
  gap: 4px;
}
.ms-dna-left  { left: 1%; }
.ms-dna-right { right: 1%; }

.ms-dna-pair {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ms-dna-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}
.ms-dna-dot.teal { background: #0d9488; }
.ms-dna-bridge {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, #2563eb55, #0d948855);
  border-radius: 2px;
}
.ms-dna-pair:nth-child(odd) {
  transform: scaleX(.7);
}
.ms-dna-pair:nth-child(1)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay: 0s }
.ms-dna-pair:nth-child(2)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay: .3s }
.ms-dna-pair:nth-child(3)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay: .6s }
.ms-dna-pair:nth-child(4)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay: .9s }
.ms-dna-pair:nth-child(5)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay:1.2s }
.ms-dna-pair:nth-child(6)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay:1.5s }
.ms-dna-pair:nth-child(7)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay:1.8s }
.ms-dna-pair:nth-child(8)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay:2.1s }
.ms-dna-pair:nth-child(9)  { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay:2.4s }
.ms-dna-pair:nth-child(10) { animation: ms-dna-wave 3s ease-in-out infinite; animation-delay:2.7s }

/* ---------- Floating pills ---------- */
@keyframes ms-pill-float {
  0%,100% { transform: translateY(0) rotate(var(--r,20deg)) }
  50%      { transform: translateY(-10px) rotate(calc(var(--r,20deg) + 8deg)) }
}
.ms-pill {
  position: absolute;
  width: 36px; height: 14px;
  border-radius: 100px;
  opacity: .1;
}
.ms-pill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: #2563eb;
  border-radius: 100px 0 0 100px;
}
.ms-pill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background: #0d9488;
  border-radius: 0 100px 100px 0;
}
.ms-pill-1 { --r:25deg; top:30%; left:88%; animation: ms-pill-float 6s ease-in-out infinite }
.ms-pill-2 { --r:-15deg; top:60%; left:90%; animation: ms-pill-float 8s ease-in-out infinite; animation-delay:-3s }
.ms-pill-3 { --r:40deg; top:40%; left:2%; width:28px; animation: ms-pill-float 7s ease-in-out infinite; animation-delay:-1s }

/* ---------- Small heartbeat icon ---------- */
@keyframes ms-heart-beat {
  0%,80%,100% { transform: scale(1) }
  15%          { transform: scale(1.18) }
  30%          { transform: scale(1) }
  45%          { transform: scale(1.1) }
}
.ms-heart-icon {
  position: absolute;
  top: 6%; right: 2%;
  opacity: .1;
  font-size: 32px;
  line-height: 1;
  animation: ms-heart-beat 1.8s ease-in-out infinite;
  color: #e11d48;
  user-select: none;
}