/* Движение на статических страницах (31.10.2026, просьба владельца: «слишком куцо»).
   Правила: текст всегда есть в HTML (поиск его видит), движение — надстройка. Скрытым блок становится только после того,
   как page-fx.js добавил ему класс fx-in; без скрипта страница выглядит как прежде.
   «Уменьшить анимацию» в системе: убираем сдвиги и бесконечные циклы, но короткое проявление, заполнение полос и счётчики оставляем
   (у владельца эта настройка включена Windows-ом, и без них сайт казался бы неподвижным). */

@keyframes pr-rise { from { opacity: 0; transform: translateY(22px) skewX(-4deg); letter-spacing: .06em; } to { opacity: 1; transform: none; letter-spacing: 0; } }
@keyframes pr-pop { 0% { opacity: 0; transform: scale(.45) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes pr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pr-glow { 0%, 100% { text-shadow: 0 0 18px rgba(52,211,153,.35); } 50% { text-shadow: 0 0 34px rgba(52,211,153,.8); } }
@keyframes pr-drift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(5%, 3%, 0) scale(1.12); } 100% { transform: translate3d(-4%, -2%, 0) scale(1); } }

/* Заголовок страницы выезжает при загрузке */
.wrap h1 { animation: pr-rise .75s cubic-bezier(.2, .8, .2, 1) both; }
.wrap .meta { animation: pr-fade .9s .25s both; }

/* Шапка матча: эмблемы «выскакивают», счёт мягко светится */
.mu .cr { animation: pr-pop .8s cubic-bezier(.2, 1.35, .3, 1) both; transition: transform .35s cubic-bezier(.2, 1.4, .3, 1); }
.mu .mu-t:nth-child(3) .cr { animation-delay: .14s; }
.mu .mu-t span { animation: pr-fade .8s .3s both; }
.mu-mid { animation: pr-fade .9s .2s both; }
.mu .mu-t:hover .cr { transform: scale(1.1) rotate(-4deg); }

/* Проявление блоков при прокрутке: класс fx-in ставит скрипт, is-in — когда блок попал в экран */
html.fx .fx-in { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
html.fx .fx-in.is-in { opacity: 1; transform: none; }
html.fx tr.fx-in { transform: translateX(-10px); }
html.fx tr.fx-in.is-in { transform: none; }
html.fx .chip.fx-in { transform: scale(.4); }
html.fx .chip.fx-in.is-in { transform: none; }

/* Линия под подзаголовком вырастает */
html.fx h2.fx-in::after { content: ""; display: block; height: 3px; width: 0; margin-top: 7px; border-radius: 3px;
  background: linear-gradient(90deg, #34d399, rgba(96, 165, 250, .6), transparent); transition: width .9s .15s cubic-bezier(.2, .8, .2, 1); }
html.fx h2.fx-in.is-in::after { width: 72px; }

/* Полосы шансов и сравнения заполняются слева направо */
html.fx .bar-fill > span { transition: width 1.1s cubic-bezier(.2, .8, .2, 1) var(--bd, 0s); }

/* Наведение: карточки и строки чуть приподнимаются, таблица подсвечивает строку */
.card, .offer { transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .card:hover, .offer:hover { transform: translateY(-3px); border-color: rgba(110, 231, 183, .35); background: rgba(255, 255, 255, .055);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 24px rgba(52, 211, 153, .08); }
  li.fx-row a { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  li.fx-row a:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 20px rgba(52, 211, 153, .1); }
  table tbody tr { transition: background .2s ease; }
  table tbody tr:hover { background: rgba(110, 231, 183, .06); }
  .links a { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
  .links a:hover { transform: translateY(-2px); border-color: rgba(110, 231, 183, .45); background: rgba(52, 211, 153, .1); text-decoration: none; }
  .cr { transition: transform .25s cubic-bezier(.2, 1.4, .3, 1); }
  a:hover > .cr, tr:hover .cr { transform: scale(1.18) rotate(-4deg); }
}

/* Постоянное лёгкое движение: только если система его не отключила */
@media (prefers-reduced-motion: no-preference) {
  .mu .cr { animation: pr-pop .8s cubic-bezier(.2, 1.35, .3, 1) both, pr-float 5.5s 1s ease-in-out infinite; }
  .mu .mu-t:nth-child(3) .cr { animation: pr-pop .8s .14s cubic-bezier(.2, 1.35, .3, 1) both, pr-float 5.5s 1.7s ease-in-out infinite; }
  .mu-mid.score { animation: pr-fade .9s .2s both, pr-glow 3.6s 1.2s ease-in-out infinite; }
  body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; left: 8vw; top: -18vmax; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(52, 211, 153, .11), rgba(59, 130, 246, .05) 55%, transparent 75%); animation: pr-drift 26s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  html.fx .fx-in, html.fx tr.fx-in, html.fx .chip.fx-in { transform: none; }
  .wrap h1 { animation-name: pr-fade; }
  .mu .cr { animation-name: pr-fade; }
}