/* Колокольчик в шапке кабинета: точка «есть непрочитанное».
 *
 * Подключается из includes/base.html после argon.css — тема ничего из этого
 * не определяет, но порядок выдержан на случай будущих совпадений имён.
 *
 * Числа на значке намеренно нет: в выпадающем списке оно и так написано
 * словами, а мелкая цифра в углу иконки читалась плохо. Само число остаётся
 * в `aria-label` ссылки — точка для скринридера ничего не значит.
 */

/* Якорь для точки — обёртка вокруг самой иконки, а не ссылка.
 *
 * У `.nav-link` свои отступы, и точка, привязанная к нему, отъезжала бы от
 * колокольчика на их величину. Обёртка облегает иконку, поэтому смещение
 * считается от её края и не зависит от темы. */
.nav-link-notify {
  position: relative;
  display: inline-block;
}

/* Положение точки у колокольчика. `left` отсчитывается от левого края иконки,
   значение подобрано на глаз.

   По вертикали: `top: 50%` ставит верх точки на середину иконки, а перенос на
   -50% высоты поднимает её так, чтобы центр совпал с центром иконки. Поправка
   в 1px — ручная доводка поверх этого центрирования, оставлена отдельным
   слагаемым, чтобы было видно, что именно подкручивали. */
.notification-dot {
  position: absolute;
  top: 20%;
  left: .7em;
  transform: -50%;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: #fb6340;
}

/* Ореол — отдельный слой под точкой: он расширяется и гаснет, а сама точка
   остаётся на месте. Если анимировать сам элемент, «прыгал» бы и он. */
.notification-dot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background-color: #fb6340;
  animation: notification-pulse 2s ease-out infinite;
}

@keyframes notification-pulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  70% {
    transform: scale(2.8);
    opacity: 0;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* Пульсация — украшение, а не смысл: сама точка остаётся видимой, поэтому
   здесь её можно просто остановить, в отличие от кольца загрузчика на
   /comparison, где неподвижное кольцо читалось бы как зависшая страница. */
@media (prefers-reduced-motion: reduce) {
  .notification-dot::after {
    animation: none;
  }
}