/* Плаваюча кнопка зв'язку (Telegram) — на кожній сторінці, завжди в
   кутку екрана. fixed, а не absolute: має лишатись на місці під час
   прокрutки, незалежно від висоти сторінки. Трохи відступу знизу й
   збоку — щоб не липла до самого краю екрана. */
.contact-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--home-accent-bright, #e63329);
  color: #fff;
  box-shadow: 0 10px 24px rgba(230, 51, 41, 0.35), 0 2px 8px rgba(34, 31, 29, 0.18);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-fab:hover {
  background: var(--home-accent-dark, #b83a2f);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(230, 51, 41, 0.4), 0 4px 10px rgba(34, 31, 29, 0.2);
}

.contact-fab svg {
  width: 27px;
  height: 27px;
}

/* Легке "дихання", щоб кнопка не губилась на тлі — і одразу було
   зрозуміло, що це можна натиснути. Тільки на комп'ютері: на телефоні
   вона й так завжди в полі зору й ближче до пальця. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .contact-fab {
    animation: contact-fab-pulse 3s ease-out infinite;
  }

  .contact-fab:hover {
    animation: none;
  }
}

/* Кільце йде лише «вперед» — розширюється й гасне один раз, а решту
   часу до наступного разу просто стоїть невидимим (30%→100% — те саме
   згасле значення, без зворотного руху назад). Раніше 50%/100% з
   однаковим 0% давало два проходи туди-сюди за цикл — на це й було
   зауваження. */
@keyframes contact-fab-pulse {
  0%   { box-shadow: 0 10px 24px rgba(230, 51, 41, 0.35), 0 2px 8px rgba(34, 31, 29, 0.18), 0 0 0 0 rgba(230, 51, 41, 0.45); }
  30%  { box-shadow: 0 10px 24px rgba(230, 51, 41, 0.35), 0 2px 8px rgba(34, 31, 29, 0.18), 0 0 0 10px rgba(230, 51, 41, 0); }
  100% { box-shadow: 0 10px 24px rgba(230, 51, 41, 0.35), 0 2px 8px rgba(34, 31, 29, 0.18), 0 0 0 10px rgba(230, 51, 41, 0); }
}

/* На телефоні без «важкої» тіні — лише пульсуюче кільце навколо кнопки,
   і завжди (не тільки за наявності hover, як на комп'ютері вище: на
   телефоні hover нема ніколи, тому та умова там не спрацювала б). */
@keyframes contact-fab-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(230, 51, 41, 0.45); }
  30%  { box-shadow: 0 0 0 10px rgba(230, 51, 41, 0); }
  100% { box-shadow: 0 0 0 10px rgba(230, 51, 41, 0); }
}

@media (max-width: 767.98px) {
  .contact-fab {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    box-shadow: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .contact-fab {
      animation: contact-fab-pulse-ring 3s ease-out infinite;
    }
  }

  .contact-fab svg {
    width: 23px;
    height: 23px;
  }
}