/* Знак OmniWebers — анимация.

   Сетка 2×2 двигается как сетка. Знак собирается в четыре маленьких
   квадрата, они разом проходят четыре шага по часовой — каждый шаг на
   соседнюю клетку — и снова раскрываются в полный знак. Потом долгий
   покой, чтобы знак не мельтешил в углу экрана.

   Почему квадраты уменьшаются. Соседние блоки, двигаясь по краям сетки,
   на полпути срезают угол: между центрами остаётся по 25 единиц по каждой
   оси, а сторона блока 42 — они наезжали бы друг на друга. Чтобы разойтись,
   сторона должна быть меньше 25, то есть масштаб не больше 0.59. Берём 0.5:
   на самом узком месте остаётся зазор в 4 единицы.

   Прежняя версия гоняла каждый блок по кругу вокруг его собственного
   места со своей задержкой: круги соседей пересекались, блоки сваливались
   в кучу и закрывали героя с «>_».

   Вступления нет: панель рисуется заново на каждом переходе по разделам,
   и «слёт» блоков играл бы при каждом клике. По той же причине ритм идёт
   от реальных часов, а не от загрузки страницы: фазу выставляет
   components/ow_mark_phase.html, и после перехода знак продолжает с того
   же места цикла.

   Разметка — components/ow_mark.html. Наведение работает от родителя с
   классом ow-logo.
*/

.ow-mark { flex-shrink: 0; overflow: visible; }

/* Период цикла — 10 с. Если меняете, поменяйте и OW_PERIOD в
   components/ow_mark_phase.html, иначе переходы между страницами начнут
   сбивать фазу. */
.ow-cell,
.ow-pulse {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: var(--ow-phase, 0s);
    animation-fill-mode: both;
}
.ow-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: ow-pulse;
}
.ow-tl { animation-name: ow-step-tl; }
.ow-tr { animation-name: ow-step-tr; }
.ow-br { animation-name: ow-step-br; }
.ow-bl { animation-name: ow-step-bl; }

/* Таймлайн цикла (10 с = 100%):
     0.00–0.30  собраться: блоки уменьшаются вдвое;
     0.30–0.75  шаг 1, пауза 0.15;
     0.90–1.35  шаг 2, пауза 0.15;
     1.50–1.95  шаг 3, пауза 0.15;
     2.10–2.55  шаг 4 — блоки снова на своих клетках;
     2.55–2.90  раскрыться с лёгким перелётом;
     2.90–10.0  покой. */

@keyframes ow-pulse {
    0%          { transform: scale(1);  animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    3%, 25.5%   { transform: scale(.5); animation-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
    29%, 100%   { transform: scale(1); }
}

/* Шаг — 50 единиц (клетка 42 + зазор 8). Блок трогается мягко и так же
   мягко встаёт в клетку. */
@keyframes ow-step-tl {
    0%, 3%      { transform: translate(0, 0);       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    7.5%, 9%    { transform: translate(50px, 0);    animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    13.5%, 15%  { transform: translate(50px, 50px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    19.5%, 21%  { transform: translate(0, 50px);    animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    25.5%, 100% { transform: translate(0, 0); }
}
@keyframes ow-step-tr {
    0%, 3%      { transform: translate(0, 0);         animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    7.5%, 9%    { transform: translate(0, 50px);      animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    13.5%, 15%  { transform: translate(-50px, 50px);  animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    19.5%, 21%  { transform: translate(-50px, 0);     animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    25.5%, 100% { transform: translate(0, 0); }
}
@keyframes ow-step-br {
    0%, 3%      { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    7.5%, 9%    { transform: translate(-50px, 0);      animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    13.5%, 15%  { transform: translate(-50px, -50px);  animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    19.5%, 21%  { transform: translate(0, -50px);      animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    25.5%, 100% { transform: translate(0, 0); }
}
@keyframes ow-step-bl {
    0%, 3%      { transform: translate(0, 0);         animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    7.5%, 9%    { transform: translate(0, -50px);     animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    13.5%, 15%  { transform: translate(50px, -50px);  animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    19.5%, 21%  { transform: translate(50px, 0);      animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    25.5%, 100% { transform: translate(0, 0); }
}

/* Наведение — сетка раздвигается. Раздвигаем не блоки, а саму сетку
   (масштаб от центра знака), а каждый блок сжимаем обратно вокруг его
   центра: зазоры растут, блоки прежнего размера. Так раздвижка верна в
   любой фазе цикла, даже посреди шага. */
.ow-grid {
    transform-origin: 50px 50px;
    transition: transform .35s cubic-bezier(.2, .9, .25, 1);
}
.ow-tile {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2, .9, .25, 1);
}
.ow-logo:hover .ow-grid { transform: scale(1.12); }
.ow-logo:hover .ow-tile { transform: scale(.893); }

@media (prefers-reduced-motion: reduce) {
    .ow-cell, .ow-pulse { animation: none; }
    .ow-grid, .ow-tile { transition: none; }
}