/* rpmotion.css — анимация на странице «Кембриджские экзамены» (rptica.ru). Версия 1 · 18.10.2026.
   Только transform / opacity / scale / rotate; запускается, когда блок появился на экране или когда нажали.
   Кто отключил анимацию в системе (prefers-reduced-motion) или класс .rpm-off на корневом элементе html — всё стоит на месте. */

/* ---------- 1. Плашка: эмблема-наклейка приклеивается к сертификату ---------- */
.rpx .rpc-emblem { position: relative; border-radius: 50%; }
.rpx.rpm-wait .rpx__face--front .rpc-emblem { opacity: 0; }
.rpx .rpc-emblem.rpm-stick { animation: rpm-stick .8s cubic-bezier(.2, .75, .25, 1.12) both; }
.rpx .rpc-emblem.rpm-stick--short { animation: rpm-stick .55s cubic-bezier(.2, .75, .25, 1.12) both; }
@keyframes rpm-stick {
  0%   { opacity: 0; transform: translate(-9%, -17%) scale(1.42) rotate(-18deg); filter: drop-shadow(0 26px 20px rgba(44, 22, 54, .36)); }
  58%  { opacity: 1; transform: translate(0, 0) scale(.93) rotate(3deg); filter: drop-shadow(0 5px 4px rgba(44, 22, 54, .26)); }
  78%  { transform: scale(1.03) rotate(-1deg); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 1px rgba(44, 22, 54, .16)); }
}
/* блик по золоту */
.rpx .rpc-emblem::after {
  content: ""; position: absolute; left: 4%; top: 4%; right: 4%; bottom: 4%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .58) 50%, rgba(255, 255, 255, 0) 64%);
  background-size: 260% 100%; background-position: 130% 0; opacity: 0; mix-blend-mode: screen;
}
.rpx .rpc-emblem.rpm-stick::after { animation: rpm-shine .95s ease-out .55s both; }
.rpx .rpc-emblem.rpm-stick--short::after { animation: rpm-shine .75s ease-out .35s both; }
@keyframes rpm-shine {
  0%   { opacity: 0; background-position: 130% 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}
/* звёзды курса загораются по одной */
.rpx .rpc-emblem polygon.rpm-star { transform-box: fill-box; transform-origin: center; animation: rpm-star .45s cubic-bezier(.3, 1.6, .5, 1) var(--rpm-d, 0ms) both; }
@keyframes rpm-star {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- 2. Лестница: птица прыгает по ступеням до выбранного класса ---------- */
.rpm-bird {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: var(--rpm-bw, 54px); opacity: 0; will-change: transform;
}
.rpm-bird.is-on { opacity: 1; }
.rpm-bird__body { display: block; transform-origin: 50% 100%; }
.rpm-bird__body img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(27, 22, 96, .22)); }
.rpm-bird.is-live .rpm-bird__body img { animation: rpm-bob 2.8s ease-in-out infinite; }
.rpm-bird.is-left .rpm-bird__body { scale: -1 1; }
@keyframes rpm-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
/* медаль на ступени с экзаменом приподнимается над птицей */
.rpcl-stairs .rpcl-step__exam { transition: translate .28s ease; }
.rpcl-stairs[data-rpm-perch="0"] .rpcl-step:nth-child(1) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="1"] .rpcl-step:nth-child(2) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="2"] .rpcl-step:nth-child(3) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="3"] .rpcl-step:nth-child(4) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="4"] .rpcl-step:nth-child(5) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="5"] .rpcl-step:nth-child(6) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="6"] .rpcl-step:nth-child(7) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="7"] .rpcl-step:nth-child(8) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="8"] .rpcl-step:nth-child(9) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="9"] .rpcl-step:nth-child(10) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="10"] .rpcl-step:nth-child(11) .rpcl-step__exam,
.rpcl-stairs[data-rpm-perch="11"] .rpcl-step:nth-child(12) .rpcl-step__exam { translate: 0 calc(-1 * var(--rpm-bh, 70px)); }
/* медаль вспыхивает */
.rpcl-step__exam img.rpm-pulse { animation: rpm-pulse .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes rpm-pulse {
  0%   { scale: 1; filter: drop-shadow(0 6px 8px rgba(150, 100, 0, .25)); }
  45%  { scale: 1.42; filter: drop-shadow(0 0 10px rgba(255, 211, 0, .95)); }
  100% { scale: 1; filter: drop-shadow(0 6px 8px rgba(150, 100, 0, .25)); }
}
/* на телефоне птицы на ступенях нет: карточка класса мягко появляется */
.rpcl-detail__card.rpm-pop { animation: rpm-pop .32s ease-out both; }
@keyframes rpm-pop { 0% { opacity: 0; translate: 0 10px; } 100% { opacity: 1; translate: 0 0; } }
@media (max-width: 991px) { .rpm-bird { display: none; } }

/* ---------- 3. Калькулятор: скидка «подпрыгивает» ---------- */
.rpcalc-r__off.rpm-pop2 { display: inline-block; animation: rpm-pop2 .42s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rpm-pop2 { 0% { scale: .6; } 60% { scale: 1.18; } 100% { scale: 1; } }

/* ---------- 5. Тест уровня: птица на полоске прогресса ---------- */
.rpt-q__top.rpm-qtop { position: relative; }
.rpm-qbird { position: absolute; left: 0; top: 0; z-index: 2; width: 30px; pointer-events: none; will-change: transform; }
.rpm-qbird img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 3px rgba(27, 22, 96, .25)); }

/* ---------- 4. Звёздочки сайта чуть мерцают ---------- */
.rpm-tw { animation: rpm-tw var(--rpm-tw-t, 4.6s) ease-in-out var(--rpm-tw-d, 0s) infinite both; animation-play-state: paused; }
.rpm-in .rpm-tw, .rpm-tw.rpm-in { animation-play-state: running; }
@keyframes rpm-tw {
  0%, 100% { scale: 1; rotate: 0deg; opacity: 1; }
  45%      { scale: .86; rotate: -7deg; opacity: .78; }
  60%      { scale: 1.06; rotate: 3deg; opacity: 1; }
}

/* ---------- без анимации ---------- */
@media (prefers-reduced-motion: reduce) {
  .rpx .rpc-emblem, .rpx .rpc-emblem::after, .rpx .rpc-emblem polygon, .rpm-bird__body img, .rpcl-step__exam img,
  .rpcl-detail__card, .rpcalc-r__off, .rpm-tw { animation: none !important; }
  .rpx.rpm-wait .rpx__face--front .rpc-emblem { opacity: 1; }
  .rpm-bird { display: none; }
  .rpcl-stairs .rpcl-step__exam { translate: none !important; }
}
.rpm-off .rpx .rpc-emblem, .rpm-off .rpx .rpc-emblem::after, .rpm-off .rpx .rpc-emblem polygon, .rpm-off .rpm-bird__body img,
.rpm-off .rpcl-step__exam img, .rpm-off .rpcl-detail__card, .rpm-off .rpcalc-r__off, .rpm-off .rpm-tw { animation: none !important; }
.rpm-off .rpx.rpm-wait .rpx__face--front .rpc-emblem { opacity: 1; }
.rpm-off .rpm-bird { display: none; }
.rpm-off .rpcl-stairs .rpcl-step__exam { translate: none !important; }