/* check-bots.ru — система движения главной. Только transform/opacity (+ширина шкалы).
   Классы ставит motion.js по событиям cb:check-start / cb:result / cb:feed-update. */

/* нажатие и наведение */
.go:active:not(:disabled), .plat:active, .wopt:active, .r-actions a.act:active, .recent-more a:active { transform: scale(.98); }

/* прогресс проверки: 4 шага в строке статуса */
.m-prog { height: 3px; margin: 12px 0 0; border-radius: 3px; overflow: hidden; background: var(--surface-3); opacity: 0; transition: opacity var(--d-2) var(--e-out); }
.m-prog:not(.on) { height: 0; margin: 0; }
.m-prog.on { opacity: 1; }
.m-prog > b { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-4) var(--e-out); }
html[dir="rtl"] .m-prog > b { transform-origin: right center; }
.m-prog + .status { margin-top: 8px; }

/* результат: хореография появления */
@keyframes m-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes m-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes m-bar { from { transform: scaleX(0); } to { transform: none; } }
@keyframes m-ring { 0% { opacity: .9; box-shadow: 0 0 0 0 color-mix(in srgb, var(--vc) 55%, transparent); } 100% { opacity: 0; box-shadow: 0 0 0 12px color-mix(in srgb, var(--vc) 0%, transparent); } }
#result.m-play { animation: m-rise var(--d-3) var(--e-out) both; }
#result.m-play .r-verdict { animation: m-up var(--d-3) var(--e-out) 80ms both; }
#result.m-play .r-stats > div { animation: m-up var(--d-3) var(--e-out) both; animation-delay: calc(300ms + var(--i, 0) * 60ms); }
#result.m-play .r-feats > .feat { animation: m-up var(--d-3) var(--e-out) both; animation-delay: calc(480ms + var(--i, 0) * 50ms); }
#result.m-play .r-feats > .feat i b { transform-origin: left center; animation: m-bar 700ms var(--e-out) both; animation-delay: calc(480ms + var(--i, 0) * 50ms); }
html[dir="rtl"] #result.m-play .r-feats > .feat i b { transform-origin: right center; }
#result.m-play .r-reasons, #result.m-play .feat-more { animation: m-up var(--d-3) var(--e-out) 640ms both; }
#result.m-ring::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: m-ring 900ms var(--e-out) 800ms both; }

/* лента: новая карточка и переоценка */
@keyframes m-card-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes m-num { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.recent .card-new[class] { animation: m-card-in var(--d-3) var(--e-out) both; }
.recent .card-up .sc-n, .recent .card-down .sc-n { display: inline-block; animation: m-num 600ms var(--e-out); }

/* раскрытие details */
details.watch-row[open] .watch-opts, .feat-more[open] .feat-rest { animation: m-up var(--d-2) var(--e-out) both; }

/* появление при прокрутке (класс ставит JS только для блоков ниже первого экрана) */
.m-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out); }
.m-reveal.m-in { opacity: 1; transform: none; }

/* смена темы через View Transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-3); animation-timing-function: var(--e-in-out); }

@media (prefers-reduced-motion: reduce) {
    .go:active:not(:disabled), .plat:active, .wopt:active, .r-actions a.act:active, .recent-more a:active { transform: none; }
    #result.m-play, #result.m-play *, #result.m-ring::after, .recent .card-new[class], .recent .card-up .sc-n, .recent .card-down .sc-n,
    details.watch-row[open] .watch-opts, .feat-more[open] .feat-rest { animation: none !important; }
    .m-reveal { opacity: 1; transform: none; transition: none; }
    .m-prog > b { transition: none; }
    .recent .card:not(.ad):hover { transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}