/* ============================================================
   Контакти: само движението (като в прототипа).
   - четирите цветни линии се изтеглят една след друга, по тях текат искри към точката, точката пулсира;
   - заглавието изплува, зелената точка до часа пулсира, бутонът „Напишете запитване“ следва мишката;
   - сиянието във формата сменя плавно цвета си според избраната тема.
   Подредбата, размерите и цветовете са в CSS на страницата „Контакти“ (WPBakery → Page settings).
   Всичко спира при „намалено движение“ и докато секцията не се вижда (скриптът слага data-off).
   ============================================================ */

/* „@“ на имейла идва оттук, докато скриптът сглоби адреса (в HTML го няма, заради роботите) */
.kt-at::before { content: '@'; }

/* ---------- линиите ---------- */
.kt-hero { position: relative; }
.kt-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* --u пази еднаква дебелина на линиите при всякакъв размер на екрана (скриптът го мери) */
.kt-l {
  fill: none; stroke-width: calc(1.4 * var(--u, 1)); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75;
  animation: kt-draw 2.4s cubic-bezier(.76, 0, .24, 1) calc(.3s + var(--i) * .16s) forwards;
}
.kt-spark {
  fill: none; stroke-width: calc(2.6 * var(--u, 1)); stroke-linecap: round; stroke-dasharray: .04 .96; stroke-dashoffset: 1; opacity: 0;
  animation: kt-spark 4.8s linear calc(2.6s + var(--i) * .9s) infinite;
}
.kt-dot {
  fill: #F2F0EB; transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: kt-pop 1s cubic-bezier(.16, 1, .3, 1) 2.5s forwards, kt-pulse 4s ease-in-out 3.5s infinite;
}
@keyframes kt-draw { to { stroke-dashoffset: 0; } }
@keyframes kt-spark { 0% { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kt-pop { to { transform: scale(1); } }
@keyframes kt-pulse { 50% { transform: scale(1.8); opacity: .5; } }

/* ---------- заглавието изплува ---------- */
.kt-title { animation: kt-rise 1.4s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes kt-rise { from { opacity: 0; transform: translate3d(0, 56px, 0); } }

/* ---------- часът: зелената точка ---------- */
.kt-time i { animation: kt-live 2.4s ease-out infinite; }
@keyframes kt-live {
  0% { box-shadow: 0 0 0 0 rgba(59, 209, 111, .6); }
  70% { box-shadow: 0 0 0 10px rgba(59, 209, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 209, 111, 0); }
}

/* ---------- „магнитът“ (скриптът мести бутона) ---------- */
.kt-mag { display: inline-block; will-change: transform; }

/* ---------- формата: цветът на избраната тема (--kt) се сменя плавно ---------- */
@property --kt { syntax: '<color>'; inherits: true; initial-value: #2AC4EA; }
.kt-form-sec { transition: --kt 1.2s cubic-bezier(.2, .7, .2, 1); }

/* ---------- скрито или „намалено движение“: нищо не се движи ---------- */
[data-plabo='kontakti'][data-off] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .kt-l { animation: none; stroke-dashoffset: 0; }
  .kt-spark, .kt-time i, .kt-title { animation: none; }
  .kt-dot { animation: none; transform: none; }
  .kt-form-sec { transition: none; }
}