/* =========================================================
   VanaaCred — how_it_works.css
   Styles unique to the How It Works page: mini-steps progress
   strip and the numbered timeline. The dark AI-engine callout
   section reuses .card/.card--pad-24/.section--dark from
   base.css, so only its one-off text class lives here.
   Loads after base.css.
   ========================================================= */

/* Narrow, centered width shared by every timeline step —
   previously inline style="max-width:920px;margin:0 auto;" */
.timeline-step--narrow { max-width: 920px; margin: 0 auto; }

/* Fixed icon-tile size used inside each timeline step —
   previously inline style="width:64px;height:64px;" */
.timeline-step__icon-tile { width: 64px; height: 64px; }

/* AI engine callout intro paragraph —
   previously inline style="color:rgba(255,255,255,0.75);line-height:1.7;" */
.ai-callout__text { color: rgba(255,255,255,0.75); line-height: 1.7; }

/* =========================== Timeline / How it works =========================== */
.timeline { position: relative; }
.timeline-step { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 28px; padding-bottom: 56px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step__num {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--blue-100);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--blue-700);
  box-shadow: var(--shadow-sm);
  position: relative; z-index: 1;
  cursor: default;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.timeline-step__num::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--orange-400); opacity: 0;
}
.timeline-step.is-visible .timeline-step__num {
  background: var(--grad-cta); border-color: transparent; color: var(--white);
  animation: num-pop 0.55s var(--ease) both, num-breathe 2.6s ease-in-out 0.6s infinite;
}
.timeline-step.is-visible .timeline-step__num::after { animation: num-ring 0.9s var(--ease) both; }
/* Hover: the number itself reacts — lifts, tilts, and glows brighter —
   independent of the card's own hover lift, so the badge feels like its
   own interactive element rather than a static label. */
.timeline-step:hover .timeline-step__num {
  animation-play-state: paused;
  transform: scale(1.14) rotate(-8deg);
  box-shadow: 0 10px 24px rgba(245,130,31,0.45);
}
.timeline-step:active .timeline-step__num { transform: scale(1.04) rotate(-2deg); }
@keyframes num-pop {
  0% { transform: scale(0.8); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1.06); }
}
@keyframes num-ring {
  0% { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes num-breathe {
  /* filter, not box-shadow — box-shadow is what the hover state controls,
     and animating the same property from both places would fight every
     frame instead of letting the hover glow actually show. */
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245,130,31,0)); }
  50% { filter: drop-shadow(0 0 8px rgba(245,130,31,0.5)); }
}
.timeline-step__card {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  padding: 30px 32px; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.timeline-step__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(245,130,31,0.28); }
.timeline-step__card .icon-tile { margin-bottom: 0; }
.timeline-step__card:hover .icon-tile { color: var(--white); transform: rotate(-8deg) scale(1.08); }
.timeline-step__card:hover .icon-tile::before { opacity: 1; }
.timeline-step__body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.timeline-step__body p { color: var(--ink-500); line-height: 1.65; font-size: 0.97rem; }
.timeline-step__tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.timeline-step__tags span {
  font-size: 0.76rem; font-weight: 700; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 5px 11px; border-radius: var(--r-pill);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.25s, color 0.25s;
}
.timeline-step.is-visible .timeline-step__tags span { opacity: 1; transform: translateY(0); }
.timeline-step.is-visible .timeline-step__tags span:nth-child(1) { transition-delay: 0.18s; }
.timeline-step.is-visible .timeline-step__tags span:nth-child(2) { transition-delay: 0.28s; }
.timeline-step.is-visible .timeline-step__tags span:nth-child(3) { transition-delay: 0.38s; }
.timeline-step__tags span:hover { background: var(--orange-100); color: var(--orange-700); border-color: var(--orange-100); }

/* =========================== Process strip (mini steps) =========================== */
.mini-steps { display: flex; justify-content: space-between; gap: 8px; position: relative; margin-bottom: 8px; --p: 0.34; }
.mini-steps::before { content: ""; position: absolute; top: 22px; left: 5%; right: 5%; height: 2px; background: var(--ink-100); z-index: 0; }
.mini-steps::after {
  content: ""; position: absolute; top: 22px; left: 5%; height: 2px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-400), var(--blue-600), var(--blue-400));
  background-size: 220% 100%;
  z-index: 0;
  width: 0; transition: width 1.3s var(--ease) 0.25s;
}
.mini-steps.is-visible::after { width: calc(90% * var(--p, 0.4)); animation: line-shimmer 2.6s linear infinite; }
@keyframes line-shimmer { from { background-position: 0% 0; } to { background-position: -220% 0; } }
.mini-step {
  flex: 1; text-align: center; position: relative; z-index: 1;
  opacity: 0; transform: translateY(14px) scale(0.9);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mini-steps.is-visible .mini-step { opacity: 1; transform: translateY(0) scale(1); }
.mini-steps.is-visible .mini-step:nth-child(1) { transition-delay: 0.05s; }
.mini-steps.is-visible .mini-step:nth-child(2) { transition-delay: 0.12s; }
.mini-steps.is-visible .mini-step:nth-child(3) { transition-delay: 0.19s; }
.mini-steps.is-visible .mini-step:nth-child(4) { transition-delay: 0.26s; }
.mini-steps.is-visible .mini-step:nth-child(5) { transition-delay: 0.33s; }
.mini-steps.is-visible .mini-step:nth-child(6) { transition-delay: 0.40s; }
.mini-steps.is-visible .mini-step:nth-child(7) { transition-delay: 0.47s; }
.mini-step .dot {
  width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink-100); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink-500); font-family: var(--font-head);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mini-step:hover .dot { transform: translateY(-4px) scale(1.1); box-shadow: var(--shadow-md); }
.mini-step.is-active .dot { background: var(--grad-primary); border-color: transparent; color: white; }
.mini-step.is-current .dot { animation: step-glow 2.2s ease-in-out infinite; }
@keyframes step-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,123,214,0.4); }
  50% { box-shadow: 0 0 0 9px rgba(26,123,214,0); }
}
.mini-step span.lbl { font-size: 0.78rem; font-weight: 700; color: var(--ink-500); transition: color 0.25s; }
.mini-step:hover span.lbl { color: var(--blue-700); }

/* =========================== Responsive =========================== */
@media (max-width: 680px) {
  .timeline-step { grid-template-columns: 56px 1fr; gap: 18px; }
  .timeline-step__num { width: 56px; height: 56px; font-size: 1.05rem; }
  .timeline-step__card { grid-template-columns: 1fr; text-align: left; }
  .mini-steps { display: none; }
}