/* ============================================================
   clinicparvaz.ir — hero-walk.css — نسخهٔ ۲.۴ «حلقهٔ صفات»
   ۲.۴: · ردپای محوشوندهٔ واقعی پشت قدم‌ها (.hl-trailfoot)
        · پالس دور کارت: دو حلقهٔ متوالی، واضح‌تر
        · حلقهٔ مداری دوم ~۲× واضح‌تر · ستاره‌ها بزرگ‌تر
        · نبض ملایم همیشگی قرص ایستگاه بعدی (.hl-station.next)
        · ته‌رنگ اختصاصی شعار برای هر ایستگاه (data-hue)
        · دسکتاپ: ارتفاع هیرو با سایدبار هم‌اندازه (JS)
   ============================================================ */

:root{
  --blue:#29A8D8; --navy:#1E3A5F; --navy2:#2A5A8F;
  --orange:#F59E0B;
  --ink:#22354A; --sub:#5c7185; --line:#E4EBF2;
  --bg1:#F4F8FC; --bg2:#E3EEF8;
}
*{box-sizing:border-box;margin:0;padding:0}

.hl-hero{
  position:relative;overflow:hidden;
  width:100%;max-width:1180px;margin:0 auto;
  min-height:620px;
  background:linear-gradient(150deg,var(--bg1) 0%,var(--bg2) 100%);
  border-radius:26px;
  border:1px solid #D8E4EF;
  display:flex;align-items:center;justify-content:center;
  padding:90px 40px;
}
/* دسکتاپ: JS ارتفاع را با سایدبار هم‌اندازه می‌کند */
@media(min-width:901px){
  .hl-hero{height:auto}
}

/* ————— لایهٔ مسیر (JS) ————— */
.hl-bg{
  position:absolute;inset:0;overflow:hidden;
  border-radius:26px;pointer-events:none;z-index:0;
}
.hl-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(41,168,216,.13) 1.5px,transparent 1.6px);
  background-size:28px 28px;
  animation:hlDotWave 5.5s ease-in-out infinite;
}
@keyframes hlDotWave{0%,100%{opacity:.35}50%{opacity:.7}}
.hl-aurora{
  position:absolute;inset:0;
  background:
    radial-gradient(300px 260px at 14% 10%,rgba(41,168,216,.18),transparent 70%),
    radial-gradient(320px 300px at 86% 90%,rgba(52,201,142,.14),transparent 70%);
  animation:hlAurora 12s ease-in-out infinite alternate;
}
@keyframes hlAurora{0%,100%{opacity:.7}50%{opacity:1}}
.hl-bg svg{position:absolute;inset:0;width:100%;height:100%}
.hl-bg svg path{
  fill:none;stroke:rgba(41,168,216,.28);
  stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* ۲.۴: حلقهٔ مداری دوم — واضح‌تر */
.hl-orbit2{
  position:absolute;left:50%;top:50%;
  width:72%;height:58%;
  transform:translate(-50%,-50%);
  border:2px dashed rgba(41,168,216,.3);
  border-radius:50%;
  animation:hlSpin 90s linear infinite;
}
@keyframes hlSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ۲.۴: ستاره‌های شناور — بزرگ‌تر و درخشان‌تر */
.hl-star{
  position:absolute;
  color:rgba(41,168,216,.55);
  font-size:16px;
  text-shadow:0 0 12px rgba(41,168,216,.5);
  animation:hlStarFloat 7s ease-in-out infinite;
}
@keyframes hlStarFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.45}
  50%{transform:translateY(-12px) scale(1.15);opacity:.9}
}

/* ————— ۲.۴: ردپای محوشونده پشت قدم‌ها ————— */
.hl-trailfoot{
  position:absolute;width:17px;height:35px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 70'%3E%3Cellipse cx='17' cy='56' rx='8' ry='11' fill='%2329A8D8'/%3E%3Cellipse cx='17' cy='28' rx='9.5' ry='12' fill='%2329A8D8'/%3E%3Cpath d='M9.5 32 C 12 44 22 44 24.5 32 Z' fill='%2329A8D8'/%3E%3Ccircle cx='7.5' cy='12.5' r='2.3' fill='%2329A8D8'/%3E%3Ccircle cx='12' cy='8.5' r='2.6' fill='%2329A8D8'/%3E%3Ccircle cx='17.5' cy='7' r='2.8' fill='%2329A8D8'/%3E%3Ccircle cx='23' cy='8.5' r='2.6' fill='%2329A8D8'/%3E%3Ccircle cx='27.5' cy='12.5' r='2.3' fill='%2329A8D8'/%3E%3C/svg%3E");
  opacity:.35;
  animation:hlTrailFade 1.3s ease-out forwards;
  pointer-events:none;z-index:1;
}
@keyframes hlTrailFade{
  0%{opacity:.38}
  100%{opacity:0}
}

/* ————— ایستگاه = قرصِ کلمه ————— */
.hl-station{
  position:absolute;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(41,168,216,.35);
  border-radius:999px;
  padding:4px 13px;
  font-size:11px;font-weight:800;
  color:var(--navy);
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(30,58,95,.1);
  opacity:.82;
  transition:opacity .4s ease,border-color .4s ease,box-shadow .45s ease,
             color .4s ease,transform .45s cubic-bezier(.34,1.56,.64,1),
             background .4s ease,font-size .35s ease,padding .35s ease;
  z-index:1;
  pointer-events:none;
}
.hl-station.lit{
  background:#fff;
  border-color:var(--blue);
  color:#0E6EA0;
  opacity:1;
  font-size:15px;
  padding:7px 20px;
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 4px rgba(41,168,216,.16),
             0 0 28px rgba(41,168,216,.55),
             0 6px 20px rgba(30,58,95,.18);
  text-shadow:0 0 16px rgba(41,168,216,.5);
  z-index:3;
}
/* ۲.۴: نبض ملایم همیشگی ایستگاه بعدی — چشم پیش می‌رود */
.hl-station.next{
  animation:hlNext 2.2s ease-in-out infinite;
}
@keyframes hlNext{
  0%,100%{box-shadow:0 3px 10px rgba(30,58,95,.1);
          border-color:rgba(41,168,216,.35)}
  50%{box-shadow:0 0 0 5px rgba(41,168,216,.12),
             0 0 18px rgba(41,168,216,.3);
      border-color:rgba(41,168,216,.6)}
}

/* ————— ردپا و قدم‌زنده ————— */
.hl-foot{
  position:absolute;width:34px;height:70px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 70'%3E%3Cellipse cx='17' cy='56' rx='8' ry='11' fill='%2329A8D8'/%3E%3Cellipse cx='17' cy='28' rx='9.5' ry='12' fill='%2329A8D8'/%3E%3Cpath d='M9.5 32 C 12 44 22 44 24.5 32 Z' fill='%2329A8D8'/%3E%3Ccircle cx='7.5' cy='12.5' r='2.3' fill='%2329A8D8'/%3E%3Ccircle cx='12' cy='8.5' r='2.6' fill='%2329A8D8'/%3E%3Ccircle cx='17.5' cy='7' r='2.8' fill='%2329A8D8'/%3E%3Ccircle cx='23' cy='8.5' r='2.6' fill='%2329A8D8'/%3E%3Ccircle cx='27.5' cy='12.5' r='2.3' fill='%2329A8D8'/%3E%3C/svg%3E");
  opacity:0;transition:opacity .2s ease;
  filter:drop-shadow(0 3px 7px rgba(41,168,216,.3));
}
.hl-foot.planted{opacity:.5}
.hl-walker{
  position:absolute;width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;border-radius:999px;
  background:radial-gradient(circle,#fff 0%,#29A8D8 50%,rgba(41,168,216,.25) 75%,transparent 85%);
  box-shadow:0 0 16px rgba(41,168,216,.85);
  z-index:2;
}

/* ————— مرکز حلقه: کارت شیشه‌ای ————— */
.hl-center{
  position:relative;z-index:2;
  text-align:center;
  max-width:620px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:26px;
  padding:38px 36px 32px;
  box-shadow:
    0 14px 44px rgba(30,58,95,.1),
    inset 0 1px 0 rgba(255,255,255,.9);
}
/* ۲.۴: پالس دوحلقه‌ای — واضح‌تر */
.hl-center::before,
.hl-center::after{
  content:'';position:absolute;inset:-3px;
  border-radius:29px;
  border:3px solid rgba(41,168,216,.55);
  opacity:0;
  pointer-events:none;
}
.hl-center.pulse::before{
  animation:hlRing 1.15s ease-out 1;
}
.hl-center.pulse::after{
  border-color:rgba(52,201,142,.45);
  animation:hlRing 1.15s ease-out .3s 1;
}
@keyframes hlRing{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(1.07);opacity:0}
}
.hl-brandline{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:800;color:var(--navy2);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(41,168,216,.25);
  border-radius:999px;padding:6px 18px;
  box-shadow:0 2px 8px rgba(30,58,95,.08);
}
.hl-brandline .hl-mark{color:var(--blue);font-size:14px}
.hl-title{
  margin-top:16px;
  color:var(--navy);
  font-size:29px;font-weight:900;line-height:1.8;
  letter-spacing:-.02em;
}

/* ————— شعار ماندگار — ۲.۴: ته‌رنگ اختصاصی هر ایستگاه ————— */
.hl-shout{
  display:flex;align-items:center;justify-content:center;
  height:72px;
  margin:2px 0 4px;
  pointer-events:none;
}
.hl-shout span{
  display:inline-block;
  font-size:40px;font-weight:900;
  letter-spacing:-.01em;
  color:#0E6EA0;
  opacity:0;
  transform:scale(.72);
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1),
             text-shadow .45s ease,color .45s ease;
}
.hl-shout span.on{
  opacity:1;
  transform:scale(1);
}

.hl-sub{
  margin-top:10px;
  color:var(--sub);font-size:14px;line-height:2.1;
}
.hl-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;
  text-decoration:none;color:#fff;
  font-size:15px;font-weight:800;
  background:linear-gradient(135deg,var(--navy2),var(--navy));
  border-radius:999px;padding:14px 38px;
  box-shadow:0 9px 24px rgba(30,58,95,.3);
  transition:transform .25s ease,box-shadow .25s ease;
}
.hl-cta:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(30,58,95,.4)}
.hl-mini-stats{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
  margin-top:22px;
  font-size:11.5px;color:var(--sub);font-weight:700;
}
.hl-mini-stats b{
  font-size:15px;font-weight:900;color:var(--navy);margin-left:4px;
}
.hl-mini-stats i{
  display:inline-block;width:1px;height:16px;
  background:var(--line);
}

/* ————— موبایل ————— */
@media(max-width:900px){
  .hl-hero{min-height:540px;padding:70px 16px;border-radius:20px}
  .hl-center{padding:26px 16px 20px;border-radius:18px}
  .hl-title{font-size:20px;line-height:1.9}
  .hl-shout{height:52px}
  .hl-shout span{font-size:28px}
  .hl-sub{font-size:12.5px}
  .hl-cta{font-size:13.5px;padding:12px 30px}
  .hl-station{font-size:9.5px;padding:3px 10px}
  .hl-station.lit{font-size:12.5px;padding:5px 15px}
  .hl-foot{width:24px;height:50px}
  .hl-trailfoot{width:12px;height:25px}
  .hl-star{font-size:12px}
  .hl-orbit2{width:88%;height:52%}
}
@media(prefers-reduced-motion:reduce){
  .hl-dots,.hl-aurora,.hl-orbit2,.hl-star,
  .hl-station.next,.hl-trailfoot{animation:none}
  .hl-shout span{transition:opacity .2s ease}
  .hl-station{transition:opacity .2s ease}
}
/* — هیرو: زمینهٔ اصلی سایت — بدون عکس، بدون مه — */
.hl-hero{background:transparent}