/* site-anim.css — анимации лендинга «Мурлок и Ко».
   Принципы: только улучшение (без JS всё видно), анимируем лишь transform / translate / scale / rotate и opacity,
   prefers-reduced-motion выключает всё лишнее. Начальные «спрятанные» состояния живут только внутри
   @media (prefers-reduced-motion: no-preference) и только при классе .mk-js (его ставит строчка в <head>). */

:root {
  --mk-out: cubic-bezier(.2, .8, .2, 1);
  /* пружина: лёгкий перелёт и успокоение */
  --mk-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --mk-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.077 30.7%, 1.002 38.1%, .98 42.3%, .975 46.6%, .99 57.4%, 1.002 66.1%, 1); }
}

/* без JS старые .rv (opacity:0 в index.html) должны быть видны */
html:not(.mk-js) .rv { opacity: 1; transform: none; }

/* ничего не вылезает вбок (повёрнутая бегущая строка, телефоны, выезжающие плашки) — без горизонтального скролла */
main { overflow-x: clip; }

/* ───────── полоска прогресса прокрутки ───────── */
.mk-prog { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 30; pointer-events: none; background: linear-gradient(90deg, var(--pink), var(--gold) 60%, var(--mint)); transform-origin: 0 50%; transform: scaleX(0); }

/* ───────── кнопки с пружиной ───────── */
.mk-js .btn { transition: transform .55s var(--mk-spring); }
@media (hover: hover) { .mk-js .btn:hover { transform: translateY(-3px) scale(1.035); } }
.mk-js .btn:active { transform: translateY(3px) scale(.97); transition-duration: .08s; }
/* мягкая пульсация главной кнопки */
.mk-pulse { position: relative; isolation: isolate; }
.mk-pulse::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--pink); z-index: -1; opacity: 0; pointer-events: none; animation: mk-pulse 2.6s ease-out 2.2s infinite; }
@keyframes mk-pulse { 0% { transform: scale(1); opacity: .5; } 75%, 100% { transform: scale(1.18, 1.45); opacity: 0; } }

/* ───────── первый экран: появление ───────── */
.hero { position: relative; }
.hero .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* пока скрипт не запустился — прячем, но не дольше 2 с (страховка, если JS не загрузился) */
  .mk-js .hero .hand, .mk-js .hero h1, .mk-js .hero .lead, .mk-js .hero .cta, .mk-js .hero .note, .mk-js .hero .phone { opacity: 0; animation: mk-failsafe 0s 2s forwards; }
  .mk-js.mk-go .hero .hand, .mk-js.mk-go .hero .lead, .mk-js.mk-go .hero .cta, .mk-js.mk-go .hero .note { opacity: 1; animation: mk-up .8s var(--mk-out) both; animation-delay: var(--d, 0s); }
  .mk-js.mk-go .hero .phone { opacity: 1; animation: mk-up-big 1.1s var(--mk-out) both; animation-delay: var(--d, 0s); }
  .mk-js.mk-go .hero h1 { opacity: 1; animation: none; }
  .mk-go .hero .mk-w { display: inline-block; animation: mk-word .75s var(--mk-spring) both; animation-delay: var(--d, 0s); }
  .mk-go .hero h1 em::after { transform-origin: 0 50%; animation: mk-under .7s var(--mk-out) both; animation-delay: var(--ud, 1s); }
}
@keyframes mk-failsafe { to { opacity: 1; } }
@keyframes mk-up { from { opacity: 0; translate: 0 22px; } }
@keyframes mk-up-big { from { opacity: 0; translate: 0 70px; } }
@keyframes mk-word { from { opacity: 0; transform: translateY(.5em) rotate(7deg) scale(.88); } }
@keyframes mk-under { from { transform: scaleX(0); } }

/* плавающие сладости и улики (параллакс через свойство translate, качание — через transform) */
.mk-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mk-p { position: absolute; font-size: var(--s, 30px); line-height: 1; opacity: .9; will-change: translate; }
.mk-p > i { display: block; font-style: normal; animation: mk-float var(--t, 6s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes mk-float { from { transform: translateY(-9px) rotate(-10deg); } to { transform: translateY(11px) rotate(12deg); } }
.mk-px { will-change: translate; }

/* ───────── живой котик Мурлок ───────── */
.mk-cat { position: absolute; z-index: 4; left: 31%; bottom: -3%; width: 40%; max-width: 230px; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.mk-cat svg { display: block; width: 100%; height: auto; overflow: visible; position: relative; }
.mk-shadow { position: absolute; left: 14%; right: 18%; bottom: 0; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 42, 74, .28), transparent); transform-origin: 50% 50%; }
.mk-cat .tail, .mk-cat .head, .mk-cat .eyes, .mk-cat .ear-l, .mk-cat .ear-r, .mk-cat .body, .mk-cat .mk-loupe, .mk-cat .mk-pupil { transform-box: fill-box; }
.mk-cat .tail { transform-origin: 0 100%; animation: mk-tail 2.6s ease-in-out infinite alternate; }
.mk-cat.mk-happy .tail { animation-duration: .32s; }
@keyframes mk-tail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.mk-cat .body { transform-origin: 50% 100%; animation: mk-breath 3.6s ease-in-out infinite; }
@keyframes mk-breath { 50% { transform: scale(1.012, 1.03); } }
.mk-cat .head { transform-origin: 50% 85%; transition: transform .7s var(--mk-spring); }
.mk-cat .eyes { transform-origin: 50% 50%; }
.mk-cat .mk-pupil { transition: transform .3s var(--mk-out); }
.mk-cat .ear-l { transform-origin: 70% 90%; } .mk-cat .ear-r { transform-origin: 30% 90%; }
.mk-cat .mk-loupe { transform-origin: 19% 86%; animation: mk-loupe 3.4s ease-in-out infinite; }
@keyframes mk-loupe { 0%, 100% { transform: rotate(-6deg); } 28% { transform: rotate(13deg) translate(2px, -3px); } 52% { transform: rotate(-3deg); } 74% { transform: rotate(17deg) translate(3px, -2px); } }
.mk-bub { position: absolute; left: 50%; bottom: 100%; margin-bottom: -6%; translate: -50% 0; background: #fff; color: var(--ink); font-weight: 900; font-size: 16px; white-space: nowrap; padding: 8px 14px; border-radius: 16px; box-shadow: 0 8px 20px rgba(59, 42, 74, .16); pointer-events: none; opacity: 0; transform: scale(.4) translateY(10px); transform-origin: 50% 100%; transition: transform .45s var(--mk-spring), opacity .2s; }
.mk-bub::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; }
.mk-bub.on { opacity: 1; transform: none; }
.mk-spark { position: absolute; left: 50%; top: 30%; font-size: 22px; pointer-events: none; animation: mk-spark 1.1s var(--mk-out) forwards; }
@keyframes mk-spark { from { opacity: 1; transform: translate(-50%, 0) scale(.5); } to { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) scale(1.15) rotate(var(--r)); } }
/* котик в финале — в потоке, вместо картинки */
.mk-cat.mk-cat-final { position: relative; left: auto; bottom: auto; width: 200px; margin: 0 auto 10px; }
.mk-off, .mk-off * { animation-play-state: paused !important; }

/* ───────── «появление при прокрутке»: каскад детей и шоты ───────── */
.mk-stag > * { transition: opacity .6s var(--mk-out) var(--dl, 0s), transform .8s var(--mk-spring) var(--dl, 0s), rotate .5s var(--mk-spring), scale .5s var(--mk-spring); }
@media (prefers-reduced-motion: no-preference) {
  .mk-js .rv:not(.in).mk-stag > * { opacity: 0; transform: translateY(26px) scale(.96); }
  .mk-js .feat.rv .shot { transition: transform 1s var(--mk-spring), rotate .5s var(--mk-spring), scale .5s var(--mk-spring); }
  .mk-js .feat.rv:not(.in) .shot { transform: scale(.92) rotate(-2deg); }
  .mk-js .feat.rv:not(.in):nth-of-type(even) .shot { transform: scale(.92) rotate(2deg); }
  .mk-js .steps.rv:not(.in) .step::before { transform: scale(0) rotate(-90deg); }
  .mk-js .steps .step::before { transition: transform .7s var(--mk-spring) calc(var(--dl, 0s) + .25s); }
}

/* микровзаимодействия: лёгкий tilt (через rotate/scale, чтобы не мешать transform появления) */
.grid3, .stats, .steps, .feat, .mk-rep-row { perspective: 1100px; }
.mk-tilt { transition: rotate .5s var(--mk-spring), scale .5s var(--mk-spring); }
.mk-stag > .mk-tilt.mk-tilting { transition-duration: .6s, .8s, .12s, .3s; transition-delay: 0s; }
.mk-rep.mk-tilt.mk-tilting { transition-duration: .12s, .3s; }
.feat .shot.mk-tilt.mk-tilting { transition-duration: 1s, .12s, .3s; }
.mk-tilt:active { scale: .97; }
.card, .stat, .step { -webkit-tap-highlight-color: transparent; }

/* числа */
.stat b { font-variant-numeric: tabular-nums; }

/* ───────── веер карточек предметов (Академия) ───────── */
.mk-fan { position: absolute; left: 0; right: 0; bottom: 7%; height: 0; z-index: 2; pointer-events: none; }
.mk-card { --gap: 88px; position: absolute; left: 50%; bottom: 0; width: 96px; margin-left: -48px; padding: 10px 6px; flex-direction: column; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 10px 24px rgba(59, 42, 74, .16); font-weight: 900; font-size: 13px; line-height: 1.15; display: flex; gap: 4px; align-items: center; transform-origin: 50% 100%; transform: translateX(calc(var(--k) * var(--gap))) translateY(var(--y, 0px)) rotate(var(--a)); transition: transform 1s var(--mk-spring) var(--dl, 0s), opacity .35s var(--dl, 0s); }
.mk-card b { font-size: 22px; }
.mk-card:nth-child(2n) { background: var(--plum-2); } .mk-card:nth-child(3n) { background: var(--mint-2); }
@media (hover: hover) { .shot:hover .mk-card { transform: translateX(calc(var(--k) * var(--gap) * 1.12)) translateY(calc(var(--y, 0px) - 12px)) rotate(calc(var(--a) * 1.4)); transition-delay: 0s; } }
@media (prefers-reduced-motion: no-preference) { .mk-js .shot:not(.mk-in) .mk-card { opacity: 0; transform: translateY(70px) scale(.7); } }

/* ───────── улика открывается по мере прокрутки ───────── */
.mk-clue { position: absolute; right: 5%; bottom: 6%; width: 168px; height: 110px; z-index: 2; pointer-events: none; rotate: -6deg; perspective: 600px; }
.mk-env-back, .mk-env-front, .mk-flap { position: absolute; left: 0; right: 0; }
.mk-env-back { top: 0; bottom: 0; background: #E9B072; border-radius: 10px; box-shadow: 0 14px 28px rgba(59, 42, 74, .25); }
.mk-env-front { bottom: 0; height: 100%; background: #F6C78E; border-radius: 10px; clip-path: polygon(0 18%, 50% 62%, 100% 18%, 100% 100%, 0 100%); z-index: 3; }
.mk-flap { top: 0; height: 64%; background: #DDA05E; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; z-index: 4; backface-visibility: visible; }
.mk-flap.back { z-index: 1; }
.mk-note { position: absolute; left: 9%; right: 9%; top: 10%; height: 92%; background: #fff; border-radius: 8px; padding: 10px 10px 0; z-index: 2; font-weight: 900; font-size: 14px; line-height: 1.2; text-align: center; box-shadow: 0 2px 6px rgba(59, 42, 74, .12); }
.mk-note b { display: block; font-size: 26px; }
.mk-note span { color: var(--pink-d); }

/* ───────── отчёт для родителей (макет) ───────── */
.mk-rep-row { margin-top: clamp(40px, 6vw, 72px); display: flex; justify-content: center; }
.mk-rep { overflow: hidden; width: min(640px, 100%); background: var(--bg); border-radius: 28px; padding: clamp(18px, 3vw, 28px); box-shadow: var(--sh2); }
.mk-rep-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mk-rep-h b { font-size: 20px; } .mk-rep-h span { color: var(--muted); font-weight: 800; font-size: 15px; }
.mk-rep-b { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: end; }
.mk-cap { font-size: 13px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.mk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 140px; align-items: end; }
.mk-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.mk-bar i { align-self: end; height: calc(var(--h) * 100%); border-radius: 8px 8px 4px 4px; background: linear-gradient(var(--pink), #FF8FB1); transform-origin: 50% 100%; transition: transform .9s var(--mk-spring) var(--dl, 0s); }
.mk-bar:nth-child(odd) i { background: linear-gradient(var(--plum), #A58BF0); }
.mk-acc { background: #fff; border-radius: 20px; padding: 16px; }
.mk-acc b { display: block; font-size: 44px; line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.mk-track { height: 10px; border-radius: 9px; background: var(--mint-2); overflow: hidden; }
.mk-track i { display: block; height: 100%; width: 100%; background: var(--mint); border-radius: 9px; transform-origin: 0 50%; transform: scaleX(var(--v)); transition: transform 1.4s var(--mk-out) .3s; }
.mk-tags { display: grid; gap: 10px; margin-top: 16px; }
.mk-tag { border-radius: 16px; padding: 12px 14px; font-weight: 800; font-size: 15px; transition: transform .8s var(--mk-spring) var(--dl, 0s), opacity .4s var(--dl, 0s); }
.mk-tag.good { background: var(--mint-2); } .mk-tag.grow { background: var(--gold-2); }
.mk-tag small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 900; }
@media (prefers-reduced-motion: no-preference) {
  .mk-js .mk-rep:not(.mk-in) .mk-bar i { transform: scaleY(0); }
  .mk-js .mk-rep:not(.mk-in) .mk-track i { transform: scaleX(0); }
  .mk-js .mk-rep:not(.mk-in) .mk-tag { opacity: 0; transform: translateX(60px); }
}

/* ───────── мини-демо «столбик» ───────── */
.mk-col { display: block; width: max-content; max-width: 100%; background: #fff; border: 2px dashed var(--line); border-radius: 20px; padding: 14px 18px 12px; margin: 0 0 22px; box-shadow: var(--sh); cursor: pointer; }
.mk-col-h { font-weight: 900; font-size: 15px; margin-bottom: 8px; }
.mk-grid { display: grid; grid-template-columns: repeat(5, 26px) 30px; font-size: 26px; font-weight: 900; line-height: 1.25; font-variant-numeric: tabular-nums; text-align: center; }
.mk-grid > span { transition: opacity .25s, transform .4s var(--mk-spring); }
.mk-grid .ok { color: var(--mint); font-size: 20px; align-self: center; }
.mk-grid .ln { grid-column: 1 / 6; height: 3px; border-radius: 2px; background: var(--ink); margin: 2px 0 4px; transform-origin: 100% 50%; transition: transform .35s var(--mk-out); }
.mk-col-ok { margin-top: 8px; font-weight: 900; color: var(--mint); transition: opacity .3s, transform .5s var(--mk-spring); }
.mk-col.mk-typing .mk-grid > span:not(.on), .mk-col.mk-typing .mk-col-ok:not(.on) { opacity: 0; transform: translateY(-10px) scale(.6); }
.mk-col.mk-typing .mk-grid .ln:not(.on) { opacity: 1; transform: scaleX(0); }
.mk-grid .cur { color: var(--pink); }

/* ───────── видео-обзор ───────── */
.mk-vbox { position: relative; border-radius: var(--r); overflow: hidden; background: var(--night); box-shadow: var(--sh2); aspect-ratio: 16 / 9; }
.mk-vbox video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--night); }
.mk-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; font-size: 34px; padding-left: 8px; cursor: pointer; box-shadow: 0 8px 0 var(--pink-d), 0 20px 50px rgba(0, 0, 0, .3); transition: transform .5s var(--mk-spring), opacity .25s; }
.mk-play:hover { transform: scale(1.08); } .mk-play:active { transform: scale(.94); }
.mk-play:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
.mk-vbox.playing .mk-play { opacity: 0; pointer-events: none; transform: scale(.6); }

/* ───────── телефон ───────── */
@media (max-width: 900px) {
  .mk-cat { left: 30%; width: 42%; bottom: -2%; }
  .mk-rep-b { grid-template-columns: 1fr; }
  .mk-col { margin-inline: auto; }
}
@media (max-width: 420px) {
  .mk-cat { width: 46%; left: 27%; }
  .mk-card { --gap: 64px; width: 74px; margin-left: -37px; flex-direction: column; text-align: center; font-size: 11.5px; padding: 8px 4px; gap: 3px; border-radius: 14px; }
  .mk-card b { font-size: 22px; }
  .mk-clue { scale: .78; transform-origin: 100% 100%; right: 3%; bottom: 3%; }
  .mk-bars { height: 110px; gap: 6px; }
  .mk-bub { font-size: 14px; }
}

/* ───────── уменьшение движения: всё лишнее выключено ───────── */
@media (prefers-reduced-motion: reduce) {
  .mk-prog, .mk-fx { display: none; }
  .mk-pulse::before, .mk-cat *, .mk-p > i { animation: none !important; }
  .mk-js .btn, .mk-tilt, .mk-stag > *, .mk-card, .mk-tag, .mk-bar i, .mk-track i, .mk-grid > span, .mk-cat .head, .mk-cat .mk-pupil { transition: none !important; }
  .mk-js .btn:hover { transform: none; }
}