/* ============================================================
   ТОПДОМ — анимации: появление блоков и текста при скролле, наведение на кнопки и карточки.
   По мотивам topdom-auction.ru: expo-кривые, слова «поднимаются» из масок, карточки выскакивают с лёгким поворотом,
   кнопки заливаются от точки касания, текст на кнопке «перекатывается», кнопки слегка тянутся за курсором.
   Используются отдельные свойства translate / scale / rotate — они не мешают существующим transform у элементов.
   Включается js/motion.js (класс html.mo-on); без скрипта ничего не скрывается.
   ============================================================ */
:root { --exp: cubic-bezier(.16, 1, .3, 1); --back: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- появление блоков ---------- */
.mo-on .mo { opacity: 0; translate: 0 40px; transition: opacity 1.1s var(--exp), translate 1.3s var(--exp), scale 1.3s var(--exp), rotate 1.3s var(--exp); transition-delay: var(--md, 0ms); will-change: translate, opacity; }
.mo-on .mo[data-mv="pop"] { translate: 0 80px; scale: .94; rotate: 1.8deg; transition: opacity .9s var(--exp), translate 1.25s var(--back), scale 1.25s var(--back), rotate 1.25s var(--exp); transition-delay: var(--md, 0ms); }
.mo-on .mo[data-mv="left"] { translate: -90px 0; rotate: -3deg; }
.mo-on .mo[data-mv="right"] { translate: 90px 0; rotate: 3deg; }
.mo-on .mo[data-mv="rise"] { translate: 0 120px; rotate: 4deg; transition-duration: 1.2s, 1.5s, 1.5s, 1.5s; }
.mo-on .mo.mo-in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; will-change: auto; }

/* ---------- текст: слова поднимаются из масок ---------- */
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.mo-wi { display: inline-block; translate: 0 115%; rotate: 5deg; transform-origin: 50% 50%; transition: translate 1.3s var(--exp), rotate 1.3s var(--exp); transition-delay: calc(var(--i, 0) * 70ms); will-change: translate; }
.mo-h.mo-in .mo-wi { translate: 0 0; rotate: 0deg; will-change: auto; }
.mo-h.mo-done .mo-w { overflow: visible; }

/* ---------- кнопки: заливка от курсора, «перекат» текста, нажатие ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; --fill: #fff; --hfg: var(--ink); transition: color .4s var(--exp) .06s, background .25s, scale .3s var(--exp); }
.btn::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--fill); transform: scale(0); transition: transform .85s var(--exp); pointer-events: none; }
.btn--light { --fill: var(--ink); --hfg: #fff; }
.btn--outline { --fill: var(--ink); --hfg: #fff; }
@media (hover: hover) {
  .btn:hover { color: var(--hfg); }
  .btn:hover::before { transform: scale(var(--s, 40)); }
  .btn:hover, .btn--light:hover, .btn--outline:hover { background: var(--btn-bg, var(--ink)); }
  .btn--light:hover { --btn-bg: #fff; }
  .btn--outline:hover { --btn-bg: transparent; }
  .btn:hover .btn__ic { background: var(--hfg); color: var(--fill); transform: rotate(45deg); }
}
.btn:active { scale: .96; }
.btn__lab { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; height: 1.3em; line-height: 1.3; }
.btn__l1, .btn__l2 { display: block; transition: translate .6s var(--exp); white-space: nowrap; }
.btn__l2 { position: absolute; left: 0; top: 100%; }
@media (hover: hover) { .btn:hover .btn__l1, .btn:hover .btn__l2 { translate: 0 -100%; } }
.btn .ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; transform: scale(0); animation: moRipple .7s var(--exp) forwards; }
@keyframes moRipple { to { opacity: 0; transform: scale(1); } }
.btn[data-mag] { transition: color .4s var(--exp) .06s, background .25s, scale .3s var(--exp), translate .7s var(--back); }
.btn[data-mag].is-mag { transition: color .4s var(--exp) .06s, background .25s, scale .3s var(--exp), translate .18s ease-out; }

/* ---------- ссылки, пилюли, карточки ---------- */
.link-arrow { position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 26px; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--exp); }
@media (hover: hover) { .link-arrow:hover::after { transform: scaleX(1); transform-origin: left; } }
.pill { transition: background .25s, color .25s, box-shadow .25s, scale .3s var(--back); }
.pill:active { scale: .92; }
.soc { transition: background .25s, color .25s, transform .3s var(--ease), scale .35s var(--back); }
@media (hover: hover) { .soc:hover { scale: 1.1; } }
.footer li a { display: inline-block; transition: color .25s, translate .45s var(--exp); }
@media (hover: hover) { .footer li a:hover { translate: 6px 0; } }
@media (hover: hover) and (min-width: 901px) {
  .pcard, .hc, .vf, .bcard, .built__item, .vcard, .pay, .celeb, .person, .act, .card { transition-property: translate, box-shadow, background, border-color, color, transform, opacity; transition-duration: .7s, .5s, .3s, .3s, .3s, .45s, .6s; transition-timing-function: var(--exp); }
  .pcard:hover, .hc:hover, .vf:hover, .bcard:hover, .built__item:hover, .vcard:hover, .pay:hover, .celeb:hover, .person:hover { translate: 0 -7px; }
  .pcard img, .hc img, .vf img, .bcard img, .built__item img, .loc img, .person img, .celeb img { transition: scale 1.4s var(--exp); }
  .pcard:hover img, .hc:hover img, .vf:hover img, .bcard:hover img, .built__item:hover img, .loc:hover img, .person:hover img, .celeb:hover img { scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-on .mo, .mo-wi { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; transition: none !important; }
  .btn::before, .btn__l1, .btn__l2 { transition: none; }
}