/* ============================================================
   АНИМАЦИЯ ОБЩИХ БЛОКОВ НА СТРАНИЦЕ САЙТОВ (30.09.2026)
   Подключается пустым блоком web-anim — только на этой странице.
   pricing: карточки въезжают, у карточки договора по рамке бежит
            свет, пункты «из чего цена» появляются по очереди.
   dir-cta: в синей половине плывут световые пятна и кольца,
            у кнопки пульсирует свечение, шаги после заявки —
            по очереди, номера загораются.
   Появление — по .is-in, который ставит web-anim.js.
   ============================================================ */
@property --wa-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- стоимость ---------- */
.wa .pricing__card{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.wa .pricing__card--deal{ transition-delay:.15s; }
.wa.is-in .pricing__card{ opacity:1; transform:none; }
.wa .pricing__steps li, .wa .pricing__checks li, .wa .pricing__factors li{
  opacity:0; transform:translateX(-12px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.wa.is-in .pricing__steps li, .wa.is-in .pricing__checks li, .wa.is-in .pricing__factors li{ opacity:1; transform:none; }
.wa .pricing__steps li:nth-child(1){ transition-delay:.25s; }
.wa .pricing__steps li:nth-child(2){ transition-delay:.55s; }
.wa .pricing__steps li:nth-child(3){ transition-delay:.85s; }
.wa .pricing__steps li:nth-child(4){ transition-delay:1.15s; }
.wa .pricing__checks li:nth-child(1){ transition-delay:.45s; }
.wa .pricing__checks li:nth-child(2){ transition-delay:.7s; }
.wa .pricing__checks li:nth-child(3){ transition-delay:.95s; }
.wa .pricing__checks li:nth-child(4){ transition-delay:1.2s; }
.wa .pricing__checks li:nth-child(5){ transition-delay:1.45s; }
.wa .pricing__factors li:nth-child(1){ transition-delay:1.4s; }
.wa .pricing__factors li:nth-child(2){ transition-delay:1.6s; }
.wa .pricing__factors li:nth-child(3){ transition-delay:1.8s; }
/* свет бежит по рамке карточки договора */
.wa .pricing__card--deal{ position:relative; }
.wa .pricing__card--deal::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding:1.5px;
  background:conic-gradient(from var(--wa-a), transparent 0 62%, rgba(var(--accent-rgb), .15) 72%, var(--accent-2) 86%, var(--accent-1) 94%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:wa-border 6s linear infinite;
}
@keyframes wa-border{ to{ --wa-a:360deg; } }
/* кнопка «Получить оценку» дышит свечением */
.wa .pricing__btn{ animation:wa-glow 2.8s ease-in-out infinite; }
@keyframes wa-glow{
  0%,100%{ box-shadow:0 10px 26px rgba(var(--accent-rgb), .22); }
  50%{ box-shadow:0 10px 34px rgba(var(--accent-rgb), .5), 0 0 0 6px rgba(var(--accent-rgb), .08); }
}

/* ---------- призыв ---------- */
.dirk__fx{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.dirk__fx i{ position:absolute; border-radius:50%; }
/* световые пятна */
.dirk__fx i:nth-child(1){ width:60%; aspect-ratio:1; right:-18%; top:-30%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); animation:wa-drift 12s ease-in-out infinite; }
.dirk__fx i:nth-child(2){ width:45%; aspect-ratio:1; left:-12%; bottom:-35%;
  background:radial-gradient(circle, rgba(140,180,255,.35), transparent 65%); animation:wa-drift 15s ease-in-out -5s infinite reverse; }
/* кольца — медленно вращаются, на них светлая точка */
.dirk__fx i:nth-child(3){ width:clamp(260px, 30vw, 460px); aspect-ratio:1; right:-12%; bottom:-40%;
  border:1px solid rgba(255,255,255,.22); animation:wa-spin 26s linear infinite; }
.dirk__fx i:nth-child(3)::after{ content:""; position:absolute; left:50%; top:-4px; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px #fff, 0 0 24px rgba(255,255,255,.7); }
.dirk__fx i:nth-child(4){ width:clamp(180px, 20vw, 320px); aspect-ratio:1; right:-4%; bottom:-22%;
  border:1px dashed rgba(255,255,255,.18); animation:wa-spin 40s linear infinite reverse; }
/* искры */
.dirk__fx i:nth-child(n+5){ width:3px; height:3px; background:#fff; opacity:0; animation:wa-twinkle 3.2s ease-in-out infinite; }
.dirk__fx i:nth-child(5){ left:62%; top:22%; }
.dirk__fx i:nth-child(6){ left:78%; top:48%; animation-delay:-1s; }
.dirk__fx i:nth-child(7){ left:54%; top:70%; animation-delay:-2s; }
.dirk__fx i:nth-child(8){ left:88%; top:18%; animation-delay:-.5s; }
.dirk__fx i:nth-child(9){ left:70%; top:84%; animation-delay:-2.6s; }
@keyframes wa-drift{ 0%,100%{ translate:0 0; } 50%{ translate:-8% 10%; } }
@keyframes wa-spin{ to{ rotate:360deg; } }
@keyframes wa-twinkle{ 0%,100%{ opacity:0; scale:.5; } 50%{ opacity:.9; scale:1.4; } }
.dirk__main .btn--fill{ animation:wa-white 2.8s ease-in-out infinite; }
@keyframes wa-white{
  0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.18), 0 0 0 0 rgba(255,255,255,.5); }
  50%{ box-shadow:0 10px 26px rgba(0,0,0,.18), 0 0 0 10px rgba(255,255,255,0); }
}
.wa .dirk__main > :not(.dirk__fx), .wa .dirk__steps li{
  opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.wa.is-in .dirk__main > :not(.dirk__fx), .wa.is-in .dirk__steps li{ opacity:1; transform:none; }
.wa .dirk__main > :nth-child(3){ transition-delay:.1s; }
.wa .dirk__main > :nth-child(4){ transition-delay:.2s; }
.wa .dirk__main > :nth-child(5){ transition-delay:.3s; }
.wa .dirk__main > :nth-child(n+6){ transition-delay:.4s; }
.wa .dirk__steps li:nth-child(1){ transition-delay:.45s; }
.wa .dirk__steps li:nth-child(2){ transition-delay:.75s; }
.wa .dirk__steps li:nth-child(3){ transition-delay:1.05s; }
.wa .dirk__steps li::before{ transition:background .4s var(--ease), color .4s var(--ease); }
.wa.is-in .dirk__steps li:nth-child(1)::before{ animation:wa-num .5s var(--ease) .9s both; }
.wa.is-in .dirk__steps li:nth-child(2)::before{ animation:wa-num .5s var(--ease) 1.2s both; }
.wa.is-in .dirk__steps li:nth-child(3)::before{ animation:wa-num .5s var(--ease) 1.5s both; }
@keyframes wa-num{ 50%{ transform:scale(1.18); } to{ background:var(--accent-1); color:#fff; } }

@media (prefers-reduced-motion: reduce){
  .dirk__fx i, .wa .pricing__card--deal::after, .wa .pricing__btn, .dirk__main .btn--fill{ animation:none; }
  .wa .pricing__card, .wa .pricing__steps li, .wa .pricing__checks li, .wa .pricing__factors li,
  .wa .dirk__main > *, .wa .dirk__steps li{ opacity:1; transform:none; transition:none; }
}