/* ==========================================================================
   انیمیشن trim-path برای اس‌وی‌جی هوم (web.svg)
   - هر خط با stroke-dashoffset رسم می‌شه و در پایان به رنگ اصلی fill می‌شه
   - چند المنت کوچیک به‌صورت بی‌نهایت (چشمک‌زن/ضربان‌دار/در حال حرکت) ادامه پیدا می‌کنن
   - بدون هیچ style inline؛ همه چیز کلاس‌محوره
   ========================================================================== */
:root{--accent:#0b57d0}

.web-illustration svg{overflow:visible}
.web-illustration svg{height:300px;width:auto;max-width:100%}
@media (max-width:576px){.web-illustration svg{height:190px}}
.web-illustration svg .cls-1{--final-fill:#fff}

/* حالت پایه‌ی همه‌ی خط‌ها قبل و حین انیمیشن */
.web-illustration svg [class*="svg-elem-"]{
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation-name:svgDraw;
  animation-duration:900ms;
  animation-timing-function:cubic-bezier(.65,0,.35,1);
  animation-fill-mode:forwards;
}

@keyframes svgDraw{
  0%{stroke-dashoffset:1000;fill:none;stroke:var(--accent)}
  55%{stroke-dashoffset:0;fill:none;stroke:var(--accent)}
  100%{stroke-dashoffset:0;fill:var(--final-fill,#1a1a1a);stroke:transparent}
}
@keyframes svgTwinkle{
  0%{opacity:.25;transform:scale(.5);filter:drop-shadow(0 0 0 var(--accent))}
  50%{opacity:1;transform:scale(1.6);filter:drop-shadow(0 0 10px var(--accent))}
  100%{opacity:.25;transform:scale(.5);filter:drop-shadow(0 0 0 var(--accent))}
}
@keyframes svgPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 var(--accent))}
  50%{transform:scale(1.45);filter:drop-shadow(0 0 14px var(--accent))}
}
@keyframes svgFlowIn{0%{opacity:0}100%{opacity:1}}
@keyframes svgMarchDash{to{stroke-dashoffset:-400}}
@keyframes svgGlowPulse{
  0%,100%{stroke-width:2.5;filter:drop-shadow(0 0 0 var(--accent))}
  50%{stroke-width:5;filter:drop-shadow(0 0 10px var(--accent))}
}

/* --- تأخیر شروع رسم هر خط، به ترتیب طبیعی رسم تصویر --- */
.web-illustration svg .svg-elem-1{animation-delay:0ms}
.web-illustration svg .svg-elem-2{animation-delay:14ms}
.web-illustration svg .svg-elem-3{animation-delay:28ms}
.web-illustration svg .svg-elem-4{animation-delay:42ms}
.web-illustration svg .svg-elem-5{animation-delay:56ms}
.web-illustration svg .svg-elem-6{animation-delay:70ms}
.web-illustration svg .svg-elem-7{animation-delay:84ms}
.web-illustration svg .svg-elem-8{animation-delay:98ms}
.web-illustration svg .svg-elem-9{animation-delay:112ms}
.web-illustration svg .svg-elem-10{animation-delay:126ms}
.web-illustration svg .svg-elem-11{animation-delay:140ms}
.web-illustration svg .svg-elem-12{animation-delay:154ms}
.web-illustration svg .svg-elem-15{animation-delay:196ms}
.web-illustration svg .svg-elem-16{animation-delay:210ms}
.web-illustration svg .svg-elem-17{animation-delay:224ms}
.web-illustration svg .svg-elem-18{animation-delay:238ms}
.web-illustration svg .svg-elem-19{animation-delay:252ms}
.web-illustration svg .svg-elem-20{animation-delay:266ms}
.web-illustration svg .svg-elem-21{animation-delay:280ms}
.web-illustration svg .svg-elem-22{animation-delay:294ms}
.web-illustration svg .svg-elem-23{animation-delay:308ms}
.web-illustration svg .svg-elem-24{animation-delay:322ms}
.web-illustration svg .svg-elem-25{animation-delay:336ms}
.web-illustration svg .svg-elem-26{animation-delay:350ms}
.web-illustration svg .svg-elem-27{animation-delay:364ms}
.web-illustration svg .svg-elem-28{animation-delay:378ms}
.web-illustration svg .svg-elem-29{animation-delay:392ms}
.web-illustration svg .svg-elem-30{animation-delay:406ms}
.web-illustration svg .svg-elem-31{animation-delay:420ms}
.web-illustration svg .svg-elem-32{animation-delay:434ms}
.web-illustration svg .svg-elem-33{animation-delay:448ms}
.web-illustration svg .svg-elem-34{animation-delay:462ms}
.web-illustration svg .svg-elem-35{animation-delay:476ms}
.web-illustration svg .svg-elem-36{animation-delay:490ms}
.web-illustration svg .svg-elem-37{animation-delay:504ms}
.web-illustration svg .svg-elem-38{animation-delay:518ms}
.web-illustration svg .svg-elem-39{animation-delay:532ms}
.web-illustration svg .svg-elem-40{animation-delay:546ms}
.web-illustration svg .svg-elem-41{animation-delay:560ms}
.web-illustration svg .svg-elem-42{animation-delay:574ms}
.web-illustration svg .svg-elem-43{animation-delay:588ms}
.web-illustration svg .svg-elem-44{animation-delay:602ms}
.web-illustration svg .svg-elem-45{animation-delay:616ms}
.web-illustration svg .svg-elem-46{animation-delay:630ms}
.web-illustration svg .svg-elem-47{animation-delay:644ms}
.web-illustration svg .svg-elem-48{animation-delay:658ms}
.web-illustration svg .svg-elem-49{animation-delay:672ms}
.web-illustration svg .svg-elem-50{animation-delay:686ms}
.web-illustration svg .svg-elem-51{animation-delay:700ms}
.web-illustration svg .svg-elem-52{animation-delay:714ms}
.web-illustration svg .svg-elem-53{animation-delay:728ms}
.web-illustration svg .svg-elem-54{animation-delay:742ms}
.web-illustration svg .svg-elem-55{animation-delay:756ms}
.web-illustration svg .svg-elem-56{animation-delay:770ms}
.web-illustration svg .svg-elem-57{animation-delay:784ms}
.web-illustration svg .svg-elem-58{animation-delay:798ms}
.web-illustration svg .svg-elem-59{animation-delay:812ms}
.web-illustration svg .svg-elem-60{animation-delay:826ms}
.web-illustration svg .svg-elem-61{animation-delay:840ms}
.web-illustration svg .svg-elem-62{animation-delay:854ms}
.web-illustration svg .svg-elem-63{animation-delay:868ms}
.web-illustration svg .svg-elem-64{animation-delay:882ms}
.web-illustration svg .svg-elem-65{animation-delay:896ms}
.web-illustration svg .svg-elem-66{animation-delay:910ms}
.web-illustration svg .svg-elem-67{animation-delay:924ms}
.web-illustration svg .svg-elem-68{animation-delay:938ms}
.web-illustration svg .svg-elem-69{animation-delay:952ms}
.web-illustration svg .svg-elem-70{animation-delay:966ms}
.web-illustration svg .svg-elem-71{animation-delay:980ms}
.web-illustration svg .svg-elem-72{animation-delay:994ms}
.web-illustration svg .svg-elem-73{animation-delay:1008ms}
.web-illustration svg .svg-elem-74{animation-delay:1022ms}
.web-illustration svg .svg-elem-75{animation-delay:1036ms}
.web-illustration svg .svg-elem-76{animation-delay:1050ms}
.web-illustration svg .svg-elem-77{animation-delay:1064ms}
.web-illustration svg .svg-elem-78{animation-delay:1078ms}
.web-illustration svg .svg-elem-79{animation-delay:1092ms}
.web-illustration svg .svg-elem-80{animation-delay:1106ms}
.web-illustration svg .svg-elem-81{animation-delay:1120ms}
.web-illustration svg .svg-elem-82{animation-delay:1134ms}
.web-illustration svg .svg-elem-83{animation-delay:1148ms}
.web-illustration svg .svg-elem-84{animation-delay:1162ms}
.web-illustration svg .svg-elem-85{animation-delay:1176ms}
.web-illustration svg .svg-elem-86{animation-delay:1190ms}
.web-illustration svg .svg-elem-87{animation-delay:1204ms}
.web-illustration svg .svg-elem-88{animation-delay:1218ms}
.web-illustration svg .svg-elem-89{animation-delay:1232ms}
.web-illustration svg .svg-elem-90{animation-delay:1246ms}
.web-illustration svg .svg-elem-91{animation-delay:1260ms}
.web-illustration svg .svg-elem-92{animation-delay:1274ms}
.web-illustration svg .svg-elem-93{animation-delay:1288ms}
.web-illustration svg .svg-elem-94{animation-delay:1302ms}
.web-illustration svg .svg-elem-95{animation-delay:1316ms}
.web-illustration svg .svg-elem-96{animation-delay:1330ms}
.web-illustration svg .svg-elem-97{animation-delay:1344ms}
.web-illustration svg .svg-elem-98{animation-delay:1358ms}
.web-illustration svg .svg-elem-99{animation-delay:1372ms}
.web-illustration svg .svg-elem-100{animation-delay:1386ms}
.web-illustration svg .svg-elem-101{animation-delay:1400ms}
.web-illustration svg .svg-elem-102{animation-delay:1414ms}
.web-illustration svg .svg-elem-103{animation-delay:1428ms}
.web-illustration svg .svg-elem-104{animation-delay:1442ms}
.web-illustration svg .svg-elem-105{animation-delay:1456ms}
.web-illustration svg .svg-elem-106{animation-delay:1470ms}
.web-illustration svg .svg-elem-107{animation-delay:1484ms}
.web-illustration svg .svg-elem-108{animation-delay:1498ms}
.web-illustration svg .svg-elem-109{animation-delay:1512ms}
.web-illustration svg .svg-elem-110{animation-delay:1526ms}
.web-illustration svg .svg-elem-111{animation-delay:1540ms}
.web-illustration svg .svg-elem-112{animation-delay:1554ms}
.web-illustration svg .svg-elem-113{animation-delay:1568ms}
.web-illustration svg .svg-elem-114{animation-delay:1582ms}
.web-illustration svg .svg-elem-115{animation-delay:1596ms}
.web-illustration svg .svg-elem-116{animation-delay:1610ms}
.web-illustration svg .svg-elem-117{animation-delay:1624ms}
.web-illustration svg .svg-elem-118{animation-delay:1638ms}
.web-illustration svg .svg-elem-119{animation-delay:1652ms}
.web-illustration svg .svg-elem-120{animation-delay:1666ms}
.web-illustration svg .svg-elem-121{animation-delay:1680ms}
.web-illustration svg .svg-elem-122{animation-delay:1694ms}
.web-illustration svg .svg-elem-123{animation-delay:1708ms}
.web-illustration svg .svg-elem-124{animation-delay:1722ms}
.web-illustration svg .svg-elem-125{animation-delay:1736ms}
.web-illustration svg .svg-elem-126{animation-delay:1750ms}
.web-illustration svg .svg-elem-127{animation-delay:1764ms}
.web-illustration svg .svg-elem-128{animation-delay:1778ms}
.web-illustration svg .svg-elem-129{animation-delay:1792ms}
.web-illustration svg .svg-elem-130{animation-delay:1806ms}
.web-illustration svg .svg-elem-131{animation-delay:1820ms}
.web-illustration svg .svg-elem-132{animation-delay:1834ms}
.web-illustration svg .svg-elem-133{animation-delay:1848ms}
.web-illustration svg .svg-elem-134{animation-delay:1862ms}
.web-illustration svg .svg-elem-135{animation-delay:1876ms}
.web-illustration svg .svg-elem-136{animation-delay:1890ms}
.web-illustration svg .svg-elem-137{animation-delay:1904ms}
.web-illustration svg .svg-elem-138{animation-delay:1918ms}
.web-illustration svg .svg-elem-139{animation-delay:1932ms}
.web-illustration svg .svg-elem-140{animation-delay:1946ms}
.web-illustration svg .svg-elem-141{animation-delay:1960ms}

/* --- دکمه/دایره‌ی کوچیک: بعد از رسم، برای همیشه ضربان می‌زنه --- */
.web-illustration svg .svg-elem-13{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgPulse;
  animation-duration:900ms,1.6s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:168ms,1068ms;
}
.web-illustration svg .svg-elem-14{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgPulse;
  animation-duration:900ms,1.6s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:182ms,1082ms;
}

/* --- نشونه‌های کوچیک: بعد از رسم، برای همیشه چشمک می‌زنن --- */
.web-illustration svg .svg-elem-142{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:1974ms,2874ms;
}
.web-illustration svg .svg-elem-143{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:1988ms,3018ms;
}
.web-illustration svg .svg-elem-144{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:2002ms,3162ms;
}
.web-illustration svg .svg-elem-145{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:2016ms,3306ms;
}
.web-illustration svg .svg-elem-146{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:2030ms,3450ms;
}
.web-illustration svg .svg-elem-147{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:2044ms,3594ms;
}
.web-illustration svg .svg-elem-148{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:2058ms,3738ms;
}
.web-illustration svg .svg-elem-149{
  transform-box:fill-box;transform-origin:center;
  animation-name:svgDraw,svgTwinkle;
  animation-duration:900ms,1.4s;
  animation-timing-function:cubic-bezier(.65,0,.35,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:forwards,none;
  animation-delay:2072ms,2982ms;
}

/* --- خط تزئینی پس‌زمینه: هیچ‌وقت fill نمی‌شه، همیشه محو و در حال حرکته --- */
.web-illustration svg .svg-elem-150{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.5;
  stroke-dasharray:10 14;
  stroke-dashoffset:0;
  opacity:0;
  animation-name:svgFlowIn,svgMarchDash,svgGlowPulse;
  animation-duration:600ms,4s,1.6s;
  animation-timing-function:ease-out,linear,ease-in-out;
  animation-iteration-count:1,infinite,infinite;
  animation-fill-mode:forwards,none,none;
  animation-delay:2086ms,2686ms,2686ms;
}

/* --- احترام به تنظیم کاربرانی که انیمیشن رو محدود کردن --- */
@media (prefers-reduced-motion:reduce){
  .web-illustration svg [class*="svg-elem-"]{
    animation:none!important;
    stroke-dashoffset:0!important;
    stroke:transparent!important;
    fill:var(--final-fill,#1a1a1a)!important;
  }
}