/*
  Анимация словесного знака OnFocus.ru — «тумблер включается и собирается в слово».
  Подключается только на входных страницах (index/login/register/app).
  Покой = статичное кольцо-«o» из brand.css; проигрыш добавляется классом
  .is-playing (его ставит brand-animate.js). Один самодостаточный проход:
  кольцо → тумблер OFF (пауза) → щелчок ON → буква отрывается и падает
  (темп B2) с тенью → кольцо. «.ru» появляется на первом отскоке.

  Раскладка времени (--of-cycle, по умолч. 2.8с):
    0–9%   ring → тумблер OFF        (появление тумблера)
    9–30%  пауза OFF                 (тумблер выключен, читается)
    30–37% щелчок: ползунок вправо   (включение)
    37–40% ползунок зеленеет
    40–44% отрыв в кольцо (в воздухе)
    44–69% падение B2 с отскоком     (крепкое, апексы = одиночные кадры)
    69–100% покой = кольцо
*/

.of-brand--anim .of-brand__pill {
  display: block;
  position: absolute;
  left: -0.40em;
  bottom: 0.38em;
  width: 1.0em;
  height: 0.72em;
  border-radius: 99em;
  /* дорожка тумблера выводится из акцента темы (fallback — зелёный) */
  background: linear-gradient(135deg, #65ebb0, #2fcf7f);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #39d98a) 74%, #ffffff 26%),
    color-mix(in srgb, var(--accent, #39d98a) 88%, #000000 12%)
  );
  opacity: 0;
}

.of-brand--anim .of-brand__shad {
  display: block;
  position: absolute;
  left: 0.065em;
  bottom: -0.085em;
  width: 0.5em;
  height: 0.09em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(0.02em);
  opacity: 0;
}

.of-brand--anim.is-playing .of-brand__knob { animation: of-cycle-knob var(--of-cycle, 2.8s) both; }
.of-brand--anim.is-playing .of-brand__pill { animation: of-cycle-pill var(--of-cycle, 2.8s) both; }
.of-brand--anim.is-playing .of-brand__shad { animation: of-cycle-shad var(--of-cycle, 2.8s) both; }
.of-brand--anim.is-playing .of-brand__ru   { animation: of-cycle-ru   var(--of-cycle, 2.8s) both; }

@keyframes of-cycle-knob {
  /* кольцо (покой) — акцент темы */
  0% {
    left: 0.04em; bottom: -0.01em; width: 0.55em; height: 0.55em;
    border-width: 0.145em; border-color: var(--accent, #39d98a); background: transparent;
  }
  /* → тумблер OFF: тёмный ползунок слева, отцентрован в пилюле */
  9% {
    left: -0.30em; bottom: 0.46em; width: 0.56em; height: 0.56em;
    border-width: 0.28em; border-color: #0a1512; background: #0a1512;
  }
  /* пауза «выключено» */
  30% {
    left: -0.30em; bottom: 0.46em; width: 0.56em; height: 0.56em;
    border-width: 0.28em; border-color: #0a1512; background: #0a1512;
  }
  /* щелчок ON: ползунок вправо (ещё тёмный) */
  37% {
    left: 0.04em; bottom: 0.46em; width: 0.56em; height: 0.56em;
    border-width: 0.28em; border-color: #0a1512; background: #0a1512;
  }
  /* ползунок окрашивается в акцент */
  40% {
    left: 0.04em; bottom: 0.46em; width: 0.56em; height: 0.56em;
    border-width: 0.28em; border-color: var(--accent, #39d98a); background: var(--accent, #39d98a);
  }
  /* отрыв в кольцо, ещё в воздухе — старт падения */
  44% {
    left: 0.04em; bottom: 0.46em; width: 0.55em; height: 0.55em;
    border-width: 0.145em; border-color: var(--accent, #39d98a); background: transparent;
    animation-timing-function: cubic-bezier(.4, 0, .9, .4);
  }
  /* падение с отскоком (темп B2), апексы — одиночные кадры */
  56.5% { bottom: -0.01em; animation-timing-function: cubic-bezier(.1, .6, .6, 1); }
  61%   { bottom: 0.13em;  animation-timing-function: cubic-bezier(.4, 0, .9, .4); }
  65.5% { bottom: -0.01em; animation-timing-function: cubic-bezier(.1, .6, .6, 1); }
  67.5% { bottom: 0.035em; animation-timing-function: cubic-bezier(.4, 0, .9, .4); }
  69%, 100% {
    left: 0.04em; bottom: -0.01em; width: 0.55em; height: 0.55em;
    border-width: 0.145em; border-color: var(--accent, #39d98a); background: transparent;
  }
}

@keyframes of-cycle-pill {
  0% { opacity: 0; transform: scale(.85); }
  9%, 40% { opacity: 1; transform: scale(1); }
  47%, 100% { opacity: 0; transform: scale(.85); }
}

/* «.ru» уходит на выключении, возвращается на первом отскоке */
@keyframes of-cycle-ru {
  0% { opacity: .5; transform: translateY(0); }
  9%, 56.5% { opacity: 0; transform: translateY(.14em); }
  65.5%, 100% { opacity: .5; transform: translateY(0); }
}

/* контактная тень: растёт при подлёте, пульсирует с отскоками, тает */
@keyframes of-cycle-shad {
  0%, 44% { opacity: 0; transform: scaleX(.55); }
  56.5% { opacity: .5; transform: scaleX(1); }
  61% { opacity: .22; transform: scaleX(.78); }
  65.5% { opacity: .45; transform: scaleX(.97); }
  69% { opacity: .3; transform: scaleX(.94); }
  80%, 100% { opacity: 0; transform: scaleX(.94); }
}

@media (prefers-reduced-motion: reduce) {
  .of-brand--anim.is-playing .of-brand__knob,
  .of-brand--anim.is-playing .of-brand__pill,
  .of-brand--anim.is-playing .of-brand__shad,
  .of-brand--anim.is-playing .of-brand__ru {
    animation: none !important;
  }
  .of-brand--anim .of-brand__pill,
  .of-brand--anim .of-brand__shad {
    opacity: 0;
  }
}