/*
 * Zontik — зонт. Размер задаёт контейнер или переменная --zontik-size,
 * знак масштабируется по viewBox и сохраняет квадратные пропорции.
 */
.zontik-umbrella {
  display: block;
  width: var(--zontik-size, 100%);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* Запас на всякий случай: при вращении знак и так остаётся внутри viewBox
     (самая дальняя точка — 142,5 от центра при половине стороны 160). */
  overflow: visible;
}

/*
 * Пока скрипт не подготовил знак, прячем его, чтобы статичный зонт не мелькнул
 * перед анимацией. Правило срабатывает, только если в <head> стоит инлайн-скрипт,
 * добавляющий класс .zontik-js на <html>, поэтому без JS знак виден сразу.
 * Если скрипт так и не загрузится, знак всё равно покажется через 3 секунды.
 */
@media (prefers-reduced-motion: no-preference) {
  .zontik-js .zontik-umbrella:not([data-zontik-state]) {
    visibility: hidden;
    animation: zontik-failsafe 0s 3s forwards;
  }
}

@keyframes zontik-failsafe {
  to {
    visibility: visible;
  }
}