/* rokuzmin.ru · приёмы скилов, которых нет в системе focustrack: полоса хода, лазер по кромке, угловые диагонали
   (glow-lines); переворот (ui-feedback-motion); морфинг и орбита (ambient-motion). Механика — ровно по скилам,
   цвета — переменными палитры вместо образцовых чисел скилов. Набор перенесён из проекта rkmanager (rk-motion.css) и дополнен угловыми диагоналями.
   Подключается после css/rz-base.css. */

/* ══ Согласование с системой ══
   В системе .er-up — появление при загрузке, в скиле entrance-reveals — по прокрутке. Здесь нужно второе:
   блок появляется, когда до него дочитали. Анимация системы снимается, остаётся переход скила. */
.er-up { animation: none; }

/* ══ Полоса хода — gl-progress: доля одним числом, блик гаснет, когда ход стоит ══ */
.gl-progress { position: relative; display: block; height: 3px; background: var(--gl-track); overflow: hidden; --gl-value: 0; }
.gl-progress::before { content: ""; position: absolute; inset: 0; transform: scaleX(var(--gl-value)); transform-origin: left;
  background: linear-gradient(90deg, var(--hx-1), var(--hx-2), var(--hx-3, var(--hx-1))); }
.gl-progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-on-dark) 55%, transparent), transparent); animation: gl-sweep-rz 1.8s linear infinite; }
.gl-progress[data-gl-paused]::after { animation: none; opacity: 0; }
@keyframes gl-sweep-rz { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ══ Лазер по кромке — gl-laser: точка света обходит рамку; блок не обрезается ══ */
.gl-laser { position: relative; border: 1px solid color-mix(in oklch, var(--action-primary) 40%, var(--border-divider)); }
@supports (offset-path: border-box) {
  .gl-laser::after { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 2px; border-radius: 1px; pointer-events: none;
    background: var(--brand-accent); box-shadow: 0 0 10px var(--brand-accent);
    offset-path: border-box; offset-rotate: auto; offset-distance: 0%; animation: gl-orbit-rz 8s linear infinite; }
  @keyframes gl-orbit-rz { to { offset-distance: 100%; } }
}

/* ══ Угловые диагонали — gl-corners: четыре штриха в углах, подсветка идёт по кругу. Только на тёмном фоне ══ */
.gl-corners { position: relative; }
.gl-corners::before, .gl-corners::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 2px solid var(--s-flow-up); opacity: .35; animation: gl-corner-rz 4.8s linear infinite; }
.gl-corners::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.gl-corners::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; animation-delay: -2.4s; }
@keyframes gl-corner-rz { 0%, 100% { opacity: .3; } 12% { opacity: 1; } 30% { opacity: .3; } }

/* ══ Переворот карточки — uf-flip: и по наведению, и по фокусу, иначе с клавиатуры оборот не открыть ══
   Стороны лежат в одной ячейке сетки, а не поверх друг друга абсолютно: карточка берёт высоту большей стороны, и
   длинный оборот — перечень из пяти пунктов — не вылезает за край */
.uf-flip { perspective: 900px; }
.uf-flip > .uf-flip-inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform .6s var(--motion-ease-enter); height: 100%; }
.uf-flip:hover > .uf-flip-inner, .uf-flip:focus-within > .uf-flip-inner, .uf-flip.is-flipped > .uf-flip-inner { transform: rotateY(180deg); }
.uf-flip .uf-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.uf-flip .uf-face-back { transform: rotateY(180deg); }

/* ══ Морфинг фигуры — am-morph: восемь значений border-radius в пределах 35–65 % ══ */
.am-morph { pointer-events: none; background: radial-gradient(60% 60% at 35% 35%, color-mix(in srgb, var(--hx-1) 34%, transparent), transparent 70%),
  radial-gradient(55% 55% at 70% 70%, color-mix(in srgb, var(--hx-2) 30%, transparent), transparent 72%); animation: am-morph-rz 14s ease-in-out infinite; }
@keyframes am-morph-rz {
  0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33% { border-radius: 40% 60% 35% 65% / 60% 35% 65% 40%; }
  66% { border-radius: 50% 50% 60% 40% / 35% 60% 40% 65%; }
}

/* ══ Орбита вокруг центра — am-orbit: обратный поворот обязателен, фазы — отрицательной задержкой ══ */
.am-orbit > i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hx-1); pointer-events: none;
  animation: am-orbit-rz 9s linear infinite; animation-delay: calc(var(--i, 0) * -3s); --am-orbit-r: 80px; }
.am-orbit > i:nth-of-type(2) { background: var(--hx-2); }
.am-orbit > i:nth-of-type(3) { background: var(--hx-3, var(--brand-accent)); }
@keyframes am-orbit-rz { from { transform: rotate(0turn) translateX(var(--am-orbit-r)) rotate(0turn); } to { transform: rotate(1turn) translateX(var(--am-orbit-r)) rotate(-1turn); } }

/* вне поля зрения движение стоит: признак ставит наблюдатель системы (ambient.pauseOffscreen) */
[data-am-out] .am-morph, .am-morph[data-am-out], [data-am-out].am-orbit > i, [data-am-out] .am-orbit > i { animation-play-state: paused; }

/* ══ Просьба уменьшить движение: псевдоэлементы перечислены явно — «*» их не покрывает ══ */
@media (prefers-reduced-motion: reduce) {
  .gl-progress::after, .gl-laser::after, .gl-corners::before, .gl-corners::after, .am-morph, .am-orbit > i { animation: none !important; }
  .uf-flip > .uf-flip-inner { transition: none !important; }
  /* точки орбиты остаются на видном месте, разведённые по кругу, а не сваленные в одну */
  .am-orbit > i { transform: rotate(calc(var(--i, 0) * 120deg)) translateX(var(--am-orbit-r)); }
}