/* =====================================================
   MedSina — Enhanced "How It Works" Section
   ===================================================== */

/* ---------- Keyframes ---------- */
@keyframes ms-gradient-bg {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
@keyframes ms-ring-pulse {
  0%   { transform: scale(1);   opacity: .5 }
  100% { transform: scale(1.55); opacity: 0 }
}
@keyframes ms-dash-flow {
  to { stroke-dashoffset: -16 }
}
@keyframes ms-arrow-pop {
  0%,100% { transform: translateX(0) }
  50%      { transform: translateX(4px) }
}
@keyframes ms-icon-float {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-6px) }
}
@keyframes ms-num-in {
  from { opacity: 0; transform: scale(.7) translateY(10px) }
  to   { opacity: 1; transform: scale(1) translateY(0) }
}
@keyframes ms-step-glow {
  0%,100% { box-shadow: 0 8px 32px rgba(37,99,235,.3) }
  50%      { box-shadow: 0 12px 48px rgba(13,148,136,.45) }
}

/* ---------- Section wrapper ---------- */
.how-it-works {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 110px 0;
}

/* Decorative background pattern - subtle dots */
.how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(37,99,235,.055) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

/* Soft radial fade over the dots so edges stay clean */
.how-it-works::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, transparent 50%, #fff 100%);
  pointer-events: none;
}

.how-it-works .container {
  position: relative;
  z-index: 1;
}

/* ---------- Section label ---------- */
.how-it-works .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #2563eb;
  margin-bottom: 20px;
}
.how-it-works .section-label::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg,#2563eb,#0d9488);
  display: inline-block;
  animation: ms-dot-pulse 2.2s ease-in-out infinite;
}

/* ---------- Section title ---------- */
.how-it-works .section-title {
  font-size: 46px;
  margin: 0 auto 60px;
  line-height: 1.15;
}

/* ---------- Steps flex row ---------- */
.steps {
  align-items: flex-start;
  gap: 0;
}

/* ---------- Single step ---------- */
.step {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  padding: 0 20px;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
  cursor: default;
}
.step:hover { transform: translateY(-8px); }

/* ---------- Step number ---------- */
.step-num {
  font-family: 'Inter', monospace;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -.02em;

  /* Gradient number */
  background: linear-gradient(135deg, rgba(37,99,235,.18) 0%, rgba(13,148,136,.14) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  transition: background .3s;
}
.step:hover .step-num {
  background: linear-gradient(135deg, #2563eb 0%, #0d9488 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Step icon ---------- */
.step-icon {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;

  /* Animated gradient bg */
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #0d9488 100%);
  background-size: 200% 200%;
  animation: ms-gradient-bg 5s ease infinite, ms-step-glow 4s ease-in-out infinite;

  transition: transform .4s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease;
  box-shadow: 0 8px 32px rgba(37,99,235,.32);
}

/* Pulsing ring */
.step-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 30px;
  border: 2px solid rgba(37,99,235,.28);
  animation: ms-ring-pulse 2.8s ease-out infinite;
}

/* Second ring with offset */
.step-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 30px;
  border: 2px solid rgba(13,148,136,.2);
  animation: ms-ring-pulse 2.8s ease-out infinite;
  animation-delay: 1.4s;
}

.step:hover .step-icon {
  transform: scale(1.12) translateY(-4px);
  box-shadow: 0 20px 56px rgba(37,99,235,.45);
  animation-play-state: paused; /* freeze glow on hover for cleaner look */
}

/* Stagger icon float per step */
.step:nth-child(1) .step-icon { animation-delay: 0s, 0s; }
.step:nth-child(3) .step-icon { animation-delay: .4s, .8s; }
.step:nth-child(5) .step-icon { animation-delay: .8s, 1.6s; }

/* ---------- Step arrow ---------- */
.step-arrow {
  flex-shrink: 0;
  padding-top: 104px;    /* aligns with icon center */
  color: #94a3b8;
  opacity: .7;
  transition: opacity .3s;
}
.steps:hover .step-arrow { opacity: 1; }

/* Animate flowing dashes */
.step-arrow svg path[stroke-dasharray] {
  animation: ms-dash-flow 1.2s linear infinite;
}
/* Animate arrow head bounce */
.step-arrow svg path:not([stroke-dasharray]) {
  animation: ms-arrow-pop 1.4s ease-in-out infinite;
}

/* ---------- Step heading ---------- */
.step h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #0f172a;
  transition: color .25s;
}
.step:hover h3 {
  background: linear-gradient(135deg, #2563eb, #0d9488);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Step description ---------- */
.step p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- Scroll-reveal for this section ---------- */
/* Re-uses .ms-hidden / .ms-visible from features-enhanced.css */
.ms-step-hidden {
  opacity: 0;
  transform: translateY(36px) scale(.97);
}
.ms-step-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity .6s cubic-bezier(.4,0,.2,1),
              transform .6s cubic-bezier(.4,0,.2,1);
}
.ms-arrow-hidden {
  opacity: 0;
  transform: translateX(-10px);
}
.ms-arrow-visible {
  opacity: .7 !important;
  transform: translateX(0) !important;
  transition: opacity .5s ease, transform .5s ease;
}