/* РКМенеджер · приёмы скилов, которых нет в системе focustrack: полоса хода, разделитель-радуга, бегущий пунктир,
   лазер по кромке (glow-lines); переворот и отскок (ui-feedback-motion); морфинг, капли, орбита (ambient-motion);
   объёмные схемы в движении. Механика — ровно по скилам, цвета — переменными системы и РКМенеджера вместо
   образцовых чисел скилов. Появление содержимого — скил entrance-reveals, подключён своим файлом.
   Подключается после css/rk-base.css. */

/* ══ Согласование с системой ══
   В системе focustrack .er-up — появление при загрузке, в скиле entrance-reveals — по прокрутке. На сайте нужно
   второе: блок появляется, когда до него дочитали. Анимация системы снимается, остаётся переход скила. */
.er-up { animation: none; }
/* лента со сцеплением: полоса прокрутки — тоном системы, а не образцовым синим скила */
:root { --sr-bar: var(--border-default); }
.sr-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-primary); }
.sr-controls .sr-dots button { width: 9px; height: 9px; border: 1px solid var(--text-muted); background: transparent; }
.sr-controls .sr-dots button[aria-current="true"] { background: var(--action-primary); border-color: var(--action-primary); }
.sr-rail { scrollbar-color: var(--sr-bar) transparent; }

/* ══ Полоса хода чтения — gl-progress: доля одним числом, блик гаснет, когда ход стоит ══ */
.gl-progress { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--gl-track); overflow: hidden; --gl-value: 0; }
.gl-progress::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--gl-value)); transform-origin: left;
  background: linear-gradient(90deg, var(--action-primary), var(--brand-accent)); }
.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-rk 1.8s linear infinite; }
.gl-progress[data-gl-paused]::after { animation: none; opacity: 0; }
@keyframes gl-sweep-rk { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ══ Разделитель-радуга — gl-rainbow: три сектора круга Иттена, из которых выведена палитра, — 8, 9, 10, и обратно;
   первый и последний цвет совпадают. Полный круг с жёлтыми и красными снят: тёплых тонов на сайте нет ══ */
.gl-rainbow { display: block; height: 4px; background-image: linear-gradient(90deg,
    var(--deco-wheel-8), var(--deco-wheel-9), var(--deco-wheel-10), var(--deco-wheel-9), var(--deco-wheel-8));
  background-size: 200% 100%; animation: gl-slide-rk 12s linear infinite; }
@keyframes gl-slide-rk { to { background-position: -200% 0; } }   /* сдвиг равен размеру фона: стык без шва */

/* ══ Бегущий пунктир — gl-ants: повторяющийся градиент, сдвиг равен периоду ══ */
.gl-ants { background-image: repeating-linear-gradient(180deg, var(--border-hover) 0 8px, transparent 8px 16px); background-size: 2px 16px; background-repeat: repeat-y; animation: gl-march-rk 1.2s linear infinite; }
@keyframes gl-march-rk { to { background-position: 0 16px; } }

/* ══ Лазер по кромке — gl-laser: точка света обходит рамку; блок не обрезается ══ */
.gl-laser { position: relative; border: 1px solid color-mix(in oklch, var(--action-primary) 50%, 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(--action-primary-hover); box-shadow: 0 0 10px var(--action-primary-hover);
    offset-path: border-box; offset-rotate: auto; offset-distance: 0%; animation: gl-orbit-rk 7s linear infinite; }
  @keyframes gl-orbit-rk { to { offset-distance: 100%; } }
}

/* ══ Переворот карточки — uf-flip: и по наведению, и по фокусу, иначе с клавиатуры оборот не открыть ══ */
.uf-flip { perspective: 900px; }
.uf-flip > .uf-flip-inner { position: relative; transform-style: preserve-3d; transition: transform .6s var(--uf-ease); 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 { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.uf-flip .uf-face-back { transform: rotateY(180deg); }
.rk-flips { list-style: none; margin: 24px 0 0; padding: 0 !important; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.rk-flip { height: 190px; margin: 0 !important; }
.rk-flip .uf-face { display: grid; align-content: center; justify-items: start; gap: 8px; padding: 18px; border-radius: var(--rk-radius); }
.rk-flip__front { background: var(--ruki-fill, var(--bg-card)); color: var(--ruki-ink, var(--text-primary)); border: 1px solid transparent; }
.rk-flip__back { background: var(--ruki-soft, var(--bg-card)); color: var(--text-primary); border: 1px solid var(--border-divider); font-size: 15px; line-height: 1.45; }
.rk-flip__back a { color: var(--ruki, var(--text-link)); font-weight: 500; }
.rk-flip__letter { font: 800 44px/1 var(--font-heading); }
.rk-flip__front span { font: 700 18px var(--font-heading); }
.rk-flip__btn { margin-top: 4px; font: 500 13px var(--font-text); color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 5px 12px; cursor: pointer; opacity: .9; }
.rk-flip--quiz { height: 210px; }
.rk-flip--quiz .rk-flip__front { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-divider); box-shadow: var(--elev-1); }
.rk-flip--quiz .rk-flip__back { background: var(--bg-selection); border-color: transparent; }
.rk-flip__q { font-family: var(--font-mono); font-size: 12px; color: var(--rk-accent-ink); }
.rk-flip--quiz p { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.3; }
.rk-flip--quiz .rk-flip__back p { font-family: var(--font-text); font-weight: 500; }

/* ══ Отскок — uf-bounce: кривая с перелётом, только у мелких предметов ══ */
.uf-bounce { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
.uf-bounce[data-uf-on] { transform: translateY(-6px); }

/* ══ Морфинг фигуры — am-morph: восемь значений border-radius в пределах 35–65 % ══ */
.am-morph { pointer-events: none; background: radial-gradient(60% 60% at 35% 35%, color-mix(in srgb, var(--action-primary) 26%, transparent), transparent 70%),
  radial-gradient(55% 55% at 70% 70%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 72%); animation: am-morph-rk 14s ease-in-out infinite; }
@keyframes am-morph-rk {
  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-gooey: сплошной фон, внутри ни строчки текста ══ */
.am-gooey { pointer-events: none; display: grid; place-items: center; background: var(--bg-page); filter: blur(9px) contrast(22); }
.am-gooey > i { grid-area: 1 / 1; width: 64px; height: 64px; border-radius: 50%; background: var(--action-primary); animation: am-float-rk 7s ease-in-out infinite; }
.am-gooey > i:nth-of-type(2) { background: var(--brand-accent); animation-delay: -2.4s; }
.am-gooey > i:nth-of-type(3) { background: var(--entity-stream); width: 44px; height: 44px; animation-delay: -4.7s; }
@keyframes am-float-rk { 0%, 100% { transform: translate(-46px, 6px); } 50% { transform: translate(46px, -6px); } }

/* ══ Орбита вокруг центра — am-orbit: обратный поворот обязателен, фазы — отрицательной задержкой ══ */
.am-orbit { display: grid; place-items: center; }
.am-orbit > * { grid-area: 1 / 1; }
.am-orbit > i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-accent); pointer-events: none; animation: am-orbit-rk 5.4s linear infinite; animation-delay: calc(var(--i, 0) * -1.8s); --am-orbit-r: 26px; }
.am-orbit > i:nth-of-type(2) { background: var(--action-primary-hover); }
.am-orbit > i:nth-of-type(3) { background: var(--entity-stream); }
@keyframes am-orbit-rk { from { transform: rotate(0turn) translateX(var(--am-orbit-r)) rotate(0turn); } to { transform: rotate(1turn) translateX(var(--am-orbit-r)) rotate(-1turn); } }

/* ══ Объёмные схемы в движении ══ */
.rk3d--cube .rk3d__cube { animation: rk-cube-spin 18s linear infinite; }
@keyframes rk-cube-spin { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(-360deg); } }
.rk3d--prism .rk3d__prism { animation: rk-prism-sway 9s ease-in-out infinite alternate; }
@keyframes rk-prism-sway { from { transform: rotateX(-10deg) rotateY(-28deg); } to { transform: rotateX(-10deg) rotateY(28deg); } }
.rk3d--ruki .rk3d__scene, .rk3d--pyramid .rk3d__scene { animation: rk-sway 10s ease-in-out infinite alternate; }
@keyframes rk-sway { from { transform: rotateY(-7deg); } to { transform: rotateY(7deg); } }
.rk3d--ruki .rk3d__scene { translate: 0 6%; }
.rk3d--pyramid .rk3d__scene { translate: 0 16%; }

/* вне поля зрения движение стоит: признак ставит наблюдатель из сценария */
[data-am-out] .am-morph, [data-am-out] .am-gooey > i, [data-am-out] .am-orbit > i,
.am-morph[data-am-out], .am-gooey[data-am-out] > i, .am-orbit[data-am-out] > i,
.rk3d-spin[data-am-out] .rk3d__scene, .rk3d-spin[data-am-out] .rk3d__cube, .rk3d-spin[data-am-out] .rk3d__prism { animation-play-state: paused; }

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