/* ==========================================================================
   Древесна — слой анимаций и микровзаимодействий (motion.css)
   Подключать ПОСЛЕ style.css. Цвета — только токены из style.css.
   Скрывающие состояния действуют лишь при классе .mo на <html> (его ставит
   motion.js), поэтому без JS весь контент виден. Анимируем только
   transform / opacity / clip-path, размеры элементов не меняем (без CLS).
   ========================================================================== */

/* ----- Токены движения ----- */
:root {
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
  --mo-out: cubic-bezier(.16, 1, .3, 1);
  --mo-spring: cubic-bezier(.34, 1.45, .64, 1);
  --mo-sheen: color-mix(in srgb, var(--surface) 42%, transparent);
  --mo-shimmer: color-mix(in srgb, var(--surface) 75%, transparent);
  --mo-lift: 0 24px 44px -24px color-mix(in srgb, var(--wood) 55%, transparent);
}
:root[data-theme="dark"] {
  --mo-sheen: color-mix(in srgb, var(--text) 24%, transparent);
  --mo-shimmer: color-mix(in srgb, var(--line) 90%, transparent);
  --mo-lift: 0 24px 44px -22px color-mix(in srgb, var(--bg) 90%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mo-sheen: color-mix(in srgb, var(--text) 24%, transparent);
    --mo-shimmer: color-mix(in srgb, var(--line) 90%, transparent);
    --mo-lift: 0 24px 44px -22px color-mix(in srgb, var(--bg) 90%, transparent);
  }
}

/* ----- 1. Появление при скролле (.rv → .rv.is-in), задержка --rv-d из JS ----- */
.mo .rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .7s var(--mo-ease) var(--rv-d, 0ms), transform .9s var(--mo-out) var(--rv-d, 0ms);
}
.mo .section__title.rv, .mo .page-title.rv { transform: translate3d(0, 16px, 0); }
.mo .card.rv, .mo .cat.rv { transform: translate3d(0, 32px, 0) scale(.985); }
.mo .rv.is-in { opacity: 1; transform: none; }
/* стартовые скрытые состояния ставятся без перехода (иначе браузер «гасит» видимое 1→0) */
.mo-init .rv, .mo-init .mo-hi, .mo-init .mo-w { transition: none !important; }

/* ----- 2. Герой: заголовок по словам, подводки, параллакс, «листайте вниз» ----- */
.mo .hero.mo-intro .mo-hi {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .8s var(--mo-ease), transform 1s var(--mo-out);
}
.mo .hero.mo-intro .mo-w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .42em, 0) rotate(2deg);
  transform-origin: 0 100%;
  transition: opacity .7s var(--mo-ease), transform 1s var(--mo-out);
  transition-delay: calc(140ms + var(--i, 0) * 60ms);
}
.mo .hero.mo-run .mo-hi, .mo .hero.mo-run .mo-w { opacity: 1; transform: none; }
.mo .hero.mo-run .hero__lead.mo-hi { transition-delay: 520ms; }
.mo .hero.mo-run .hero__cta.mo-hi { transition-delay: 680ms; }
.mo .hero.mo-run .hero__facts.mo-hi { transition-delay: 840ms; }

.mo .hero.mo-par .hero__media { scale: 1.12; transition: scale 1.8s var(--mo-out); will-change: transform, scale; }
.mo .hero.mo-par .hero__in { will-change: transform, opacity; }

.mo-hint {
  position: absolute; left: 50%; bottom: 10px; z-index: 1;
  width: 22px; height: 34px; margin-left: -11px;
  border: 1.5px solid currentColor; border-radius: 12px;
  opacity: .7; cursor: pointer;
  transition: opacity .4s var(--mo-ease), transform .5s var(--mo-out);
  animation: mo-hint-in .9s 1.3s var(--mo-out) backwards;
}
.mo-hint i {
  position: absolute; left: 50%; top: 6px;
  width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: currentColor;
  animation: mo-wheel 1.9s 2.2s var(--mo-ease) infinite;
}
.mo-hint:hover { opacity: 1; }
.hero.mo-away .mo-hint { opacity: 0; transform: translate3d(0, 8px, 0); pointer-events: none; }
@keyframes mo-hint-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes mo-wheel {
  0% { opacity: 0; transform: translate3d(0, -2px, 0); }
  25% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translate3d(0, 11px, 0); }
}
@media (max-width: 760px) { .mo-hint { display: none; } }

/* ----- 3. Счётчики: моноширинные цифры, чтобы текст не «дрожал» ----- */
.mo-num { font-variant-numeric: tabular-nums; }

/* ----- 4. Кнопки: блик при наведении, рябь при клике, магнит ----- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, var(--mo-sheen) 50%, transparent 70%);
  transform: translate3d(-110%, 0, 0);
  pointer-events: none;
}
@media (hover: hover) {
  .btn--primary:hover::after { transform: translate3d(110%, 0, 0); transition: transform .85s var(--mo-ease); }
}
.mo-ripple {
  position: absolute; z-index: -1;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  animation: mo-ripple .65s var(--mo-out);
}
@keyframes mo-ripple { from { opacity: .22; transform: scale(0); } to { opacity: 0; transform: scale(1); } }

.mo .mo-mag {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background .2s, color .2s, border-color .2s, transform .2s, translate .5s var(--mo-out);
}

/* ----- 5. Карточки: 3D-наклон, подъём, зум фото (только точный указатель) ----- */
@media (hover: hover) and (pointer: fine) {
  .mo .card.mo-tilt {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -4px, 0);
    box-shadow: var(--shadow), var(--mo-lift);
    transition: transform .35s var(--mo-out), box-shadow .35s var(--mo-ease);
    will-change: transform;
  }
  .card .slider__slide { overflow: hidden; }
  .card .slider__slide img { transition: transform .9s var(--mo-out); }
  .card:hover .slider__slide img { transform: scale(1.05); }

  /* спокойный подъём информационных плашек */
  .benefits li, .tier, .promo-card, .office-card, .lbenefits li, .review-card, .partner {
    transition: transform .45s var(--mo-out), box-shadow .45s var(--mo-ease), border-color .3s;
  }
  .benefits li:hover, .tier:hover, .promo-card:hover, .office-card:hover,
  .lbenefits li:hover, .review-card:hover, .partner:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow); }
  .tier--super:hover { box-shadow: inset 0 0 0 1px var(--wood), var(--shadow); }
  .benefits .ico, .promo-card .ico { transition: transform .5s var(--mo-spring); }
  .benefits li:hover .ico, .promo-card:hover .ico { transform: translate3d(0, -2px, 0) rotate(-6deg); }
}

/* ----- 6. «Полёт в корзину» и отклик иконки корзины ----- */
.mo-fly {
  position: fixed; left: 0; top: 0; z-index: 120;
  object-fit: cover;
  border: 2px solid var(--surface);
  border-radius: 22%;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  will-change: transform, opacity;
}
.icon-btn--cart.mo-bump > svg { animation: mo-bump .65s var(--mo-spring); }
.badge.mo-pop { animation: mo-pop .5s var(--mo-spring); }
@keyframes mo-bump {
  30% { transform: translate3d(0, -5px, 0) scale(1.14) rotate(-6deg); }
  60% { transform: translate3d(0, 1px, 0) scale(.96); }
  100% { transform: none; }
}
@keyframes mo-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: none; } }

/* ----- 7. Избранное: пульс сердца, кольцо и частицы ----- */
[data-fav].mo-pulse svg { animation: mo-heart .55s var(--mo-spring); }
[data-fav].mo-pulse::after {
  content: ""; position: absolute; inset: 4px;
  border: 2px solid var(--sale); border-radius: 50%;
  pointer-events: none;
  animation: mo-ring .6s var(--mo-out) forwards;
}
@keyframes mo-heart { 25% { transform: scale(.8); } 55% { transform: scale(1.28); } 100% { transform: none; } }
@keyframes mo-ring { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
.mo-burst { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; }
.mo-burst i {
  position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sale);
  opacity: 0;
  animation: mo-burst .7s var(--mo-out) forwards;
}
.mo-burst i:nth-child(3n+2) { background: var(--star); }
.mo-burst i:nth-child(3n) { background: var(--wood); }
@keyframes mo-burst {
  0% { opacity: 1; transform: rotate(var(--a, 0deg)) translate3d(6px, 0, 0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a, 0deg)) translate3d(var(--r, 24px), 0, 0) scale(.3); }
}

/* ----- 8. Шапка: компактная с тенью; скрытие на мобильных ----- */
.mo .header, .mo .lhead { transition: box-shadow .3s var(--mo-ease), transform .4s var(--mo-out); }
.header.is-scrolled, .lhead.is-scrolled { box-shadow: var(--shadow); }
.mo .header .logo__mark, .mo .header .logo__name, .mo .header .logo__tag {
  transition: transform .4s var(--mo-out), opacity .25s var(--mo-ease);
}
.header.is-scrolled .logo__mark { transform: scale(.86); }
.header.is-scrolled .logo__tag { opacity: 0; transform: translate3d(0, -4px, 0); }
.header.is-scrolled .logo__name { transform: translate3d(0, 6px, 0); }
.header.is-hidden { transform: translate3d(0, calc(-100% - 4px), 0); box-shadow: none; }

/* ----- 9. Смена темы: плавные цвета или круговое раскрытие (View Transitions) ----- */
.mo-theme-anim, .mo-theme-anim *, .mo-theme-anim *::before, .mo-theme-anim *::after {
  transition: background-color .4s var(--mo-ease), color .4s var(--mo-ease), border-color .4s var(--mo-ease),
    fill .4s var(--mo-ease), stroke .4s var(--mo-ease), box-shadow .4s var(--mo-ease) !important;
  transition-delay: 0s !important;
}
.mo-vt::view-transition-old(root), .mo-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-toggle.mo-spin svg { animation: mo-spin .6s var(--mo-out); }
@keyframes mo-spin { from { opacity: 0; transform: rotate(-120deg) scale(.4); } }

/* ----- 10. Акции: дыхание бейджа, баннер, лендинг, таймер ----- */
.mo .mega-banner .tag--sale, .mo .lhero .tag--sale { position: relative; animation: mo-breathe 3.2s ease-in-out infinite; }
.mo .mega-banner .tag--sale::after, .mo .lhero .tag--sale::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--sale);
  opacity: 0;
  pointer-events: none;
  animation: mo-halo 3.2s ease-out infinite;
}
@keyframes mo-breathe { 50% { transform: scale(1.045); } }
@keyframes mo-halo { 0% { opacity: .4; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35, 1.8); } }

.mega-banner__img { transition: transform 1.6s var(--mo-out); }
.mega-banner:hover .mega-banner__img { transform: scale(1.04); }
.mo .lhero__media img { animation: mo-drift 16s ease-in-out infinite alternate; }
@keyframes mo-drift { from { transform: none; } to { transform: scale(1.06) translate3d(-1%, -1%, 0); } }

/* app.js при смене значения ставит .is-tick только на изменившуюся ячейку —
   «въезжает» сверху лишь её цифра (<b>), подпись и соседние ячейки неподвижны */
.mo .countdown span { overflow: hidden; }
.mo .countdown span.is-tick b { animation: mo-digit .45s var(--mo-out); }
@keyframes mo-digit { from { opacity: 0; transform: translate3d(0, -60%, 0); } }

/* ----- 11. Скелетон-шиммер, пока фото грузится ----- */
.mo .mo-skel { position: relative; overflow: hidden; isolation: isolate; }
.mo .mo-skel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 25%, var(--mo-shimmer) 50%, transparent 75%);
  transform: translate3d(-100%, 0, 0);
  animation: mo-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}
.mo .mo-skel.is-loaded::before { animation: none; opacity: 0; transition: opacity .4s var(--mo-ease); }
.mo .mo-skel.is-loaded img { animation: mo-fade .55s var(--mo-ease); }
@keyframes mo-shimmer { to { transform: translate3d(100%, 0, 0); } }

/* ----- 12. Тосты, модалки, лайтбокс ----- */
.mo .toast { animation: mo-toast .5s var(--mo-spring); transform-origin: 100% 0; }
@keyframes mo-toast { from { opacity: 0; transform: translate3d(16px, -6px, 0) scale(.92); } }

.mo dialog.modal[open] { animation: mo-dialog .45s var(--mo-out); }
.mo dialog.lightbox[open] { animation: mo-fade .35s var(--mo-ease); }
.mo dialog.lightbox[open] .lightbox__img, .mo .lightbox__img.mo-swap { animation: mo-zoom .5s var(--mo-out); }
.mo dialog.modal[open]::backdrop, .mo dialog.lightbox[open]::backdrop { animation: mo-fade .4s var(--mo-ease); }
@keyframes mo-dialog { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); } }
@keyframes mo-zoom { from { opacity: 0; transform: scale(.94); } }
@keyframes mo-fade { from { opacity: 0; } }

/* плавное закрытие — там, где браузер умеет анимировать display/overlay */
@supports (transition-behavior: allow-discrete) {
  .mo dialog.modal, .mo dialog.lightbox {
    transition: opacity .22s var(--mo-ease), transform .22s var(--mo-ease),
      overlay .22s allow-discrete, display .22s allow-discrete;
  }
  .mo dialog.modal:not([open]) { opacity: 0; transform: scale(.97); }
  .mo dialog.lightbox:not([open]) { opacity: 0; }
  .mo dialog.modal::backdrop, .mo dialog.lightbox::backdrop {
    transition: opacity .22s var(--mo-ease), overlay .22s allow-discrete, display .22s allow-discrete;
  }
  .mo dialog.modal:not([open])::backdrop, .mo dialog.lightbox:not([open])::backdrop { opacity: 0; }
}

/* ----- 13. Навигация: линия под ссылкой, каскад выпадающего меню ----- */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--mo-ease);
  pointer-events: none;
}
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
@media (max-width: 1180px) { .nav__link::after { left: 9px; right: 9px; } }

.nav__drop li { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .25s var(--mo-ease), transform .35s var(--mo-out); }
.nav__item--drop:hover .nav__drop li, .nav__item--drop:focus-within .nav__drop li {
  opacity: 1; transform: none;
  transition-delay: calc(40ms + var(--i, 0) * 35ms);
}
.nav__drop li:nth-child(2) { --i: 1; }
.nav__drop li:nth-child(3) { --i: 2; }
.nav__drop li:nth-child(4) { --i: 3; }
.nav__drop li:nth-child(5) { --i: 4; }
.nav__drop li:nth-child(6) { --i: 5; }
.nav__drop li:nth-child(7) { --i: 6; }
.nav__drop li:nth-child(n+8) { --i: 7; }

/* ----- 14. Прогресс чтения статьи и кнопка «наверх» ----- */
.mo-progress {
  position: fixed; left: 0; top: 0; z-index: 45;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--wood), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.mo-top {
  position: fixed; right: 20px; bottom: 84px; z-index: 30;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(.9);
  transition: opacity .3s var(--mo-ease), transform .45s var(--mo-out), visibility 0s .45s,
    background-color .2s, color .2s, border-color .2s;
}
.mo-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mo-top:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mo-top svg { transition: transform .3s var(--mo-out); }
.mo-top:hover svg { transform: translate3d(0, -2px, 0); }
.mo-top--low { bottom: 20px; }
@media (max-width: 760px) {
  .mo-top { right: 19px; bottom: 78px; width: 42px; height: 42px; }
  .mo-top--low { bottom: 14px; }
  body:has(.buybar.is-shown) .mo-top { bottom: 148px; }
}

/* ----- 15. Уменьшение движения и печать: только мгновенные состояния ----- */
@media (prefers-reduced-motion: reduce) {
  .mo .rv, .mo .mo-hi, .mo .mo-w { opacity: 1 !important; transform: none !important; }
  .mo .hero__media, .mo .hero__in { transform: none !important; scale: none !important; opacity: 1 !important; }
  .mo-mag { translate: none !important; }
  .mo .card.mo-tilt, .card:hover .slider__slide img { transform: none !important; }
  .btn--primary::after, .mo-ripple, .mo-hint, .mo-fly, .mo-burst, .mo-skel::before { display: none !important; }
  .header.is-hidden { transform: none !important; }
  .nav__drop li { opacity: 1; transform: none; }
}
@media print {
  .rv, .mo-hi, .mo-w { opacity: 1 !important; transform: none !important; }
  .mo-top, .mo-progress, .mo-hint, .mo-fly, .mo-burst { display: none !important; }
}