/* ==========================================================================
   Meat Gallery — движение. Всё, что анимируется, живёт здесь: вход секций,
   микро-взаимодействия кнопок, скелетоны, панели, таб-бар.
   Любая анимация выключается системной настройкой «уменьшить движение».
   ========================================================================== */

:root {
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ------------------------- вход первого экрана -------------------------- */
/* до готовности прячем, чтобы не мигало сырым текстом под прелоадером */
body:not(.is-ready) .hero__copy > *,
body:not(.is-ready) .hero__shot,
body:not(.is-ready) .hero__stats li { opacity: 0; }

body.is-ready .hero__copy > * { animation: heroUp .8s var(--e-out) both; }
body.is-ready .hero__copy .kicker { animation-delay: .05s; }
body.is-ready .hero__copy .hero__h1 { animation-delay: .12s; }
body.is-ready .hero__copy .hero__sub { animation-delay: .26s; }
body.is-ready .hero__copy .hero__btns { animation-delay: .34s; }
body.is-ready .hero__shot { animation: heroShot 1.1s var(--e-out) .1s both; }
body.is-ready .hero__stats li { animation: heroUp .7s var(--e-out) both; }
body.is-ready .hero__stats li:nth-child(1) { animation-delay: .42s; }
body.is-ready .hero__stats li:nth-child(2) { animation-delay: .5s; }
body.is-ready .hero__stats li:nth-child(3) { animation-delay: .58s; }
body.is-ready .hero__stats li:nth-child(4) { animation-delay: .66s; }

/* строки заголовка выезжают из-под маски — «дорогой» приём */
body.is-ready .hero__l1, body.is-ready .hero__l2, body.is-ready .hero__l3 {
  animation: lineUp .9s var(--e-out) both;
}
body.is-ready .hero__l2 { animation-delay: .1s; }
body.is-ready .hero__l3 { animation-delay: .2s; }

@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lineUp {
  from { opacity: 0; transform: translateY(.5em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-20% -20% -20% -20%); }
}
@keyframes heroShot {
  from { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* --------------------------- появление секций --------------------------- */
@supports (animation-timeline: view()) {
  .reveal { animation: revealUp both linear; animation-timeline: view(); animation-range: entry 0% entry 92%; }
  /* карточки каталога выезжают «волной» — задержка по колонке */
  .grid .card { animation: revealCard both linear; animation-timeline: view(); animation-range: entry 0% entry 78%; }
  .facts li, .steps .step, .cols .col, .cont li {
    animation: revealUp both linear; animation-timeline: view(); animation-range: entry 0% entry 86%;
  }
  .h2::after {
    content: ''; display: block; width: 100%; max-width: 220px; height: 2px; margin: 18px auto 0;
    background: linear-gradient(90deg, var(--gold), var(--terra));
    transform-origin: left; animation: lineDraw both linear;
    animation-timeline: view(); animation-range: entry 10% entry 80%;
  }
  .sect__head--left .h2::after, .craft .h2::after, .contacts .h2::after { margin-left: 0; }
}
@keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes revealCard { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lineDraw { from { transform: scaleX(0); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }

/* фильтр каталога: карточки «проявляются» после переключения категории */
.card.is-in { animation: cardIn .45s var(--e-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ------------------------------- кнопки --------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn--gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn--gold:hover::after { opacity: 1; animation: shine .9s var(--e-out); }
@keyframes shine { to { left: 120%; } }
.btn:active { transform: scale(.97); }
.iconbtn:active, .pill:active, .catnav__i:active { transform: scale(.94); }

/* волна по нажатию (тач и клик) */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%);
  transform: translate(-50%, -50%) scale(0); animation: ripple .6s var(--e-out) forwards;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }

/* «+» в карточке: нажали → пружина → галочка */
.addbtn svg { transition: transform .3s var(--e-spring); }
.addbtn:active svg { transform: rotate(90deg) scale(.85); }
.addbtn.is-done { animation: pop .45s var(--e-spring); }
.addbtn.is-done svg { transform: rotate(45deg) scale(1.1); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* бейдж корзины подпрыгивает при изменении */
.iconbtn__n.is-bump, .tabbar__n.is-bump { animation: bump .5s var(--e-spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ------------------------------- сторис --------------------------------- */
.story__ring { position: relative; }
.story:hover .story__ring, .story:focus-visible .story__ring { animation: ringSpin 3.2s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg) scale(1.04); } }
.story:hover .story__ring img { transform: rotate(-360deg); transition: none; }
.story--seen .story__ring { background: linear-gradient(140deg, #4a423a, #2a251f); }
.story:active { transform: scale(.95); }
.story { transition: transform .2s var(--e-out); }

/* ------------------------- панели и модалки ----------------------------- */
.dr.is-open .dr__body > *, .md.is-open .md__body > * { animation: panelIn .5s var(--e-out) both; }
.dr.is-open .dr__body > *:nth-child(2), .md.is-open .md__body > *:nth-child(2) { animation-delay: .06s; }
.dr.is-open .dr__body > *:nth-child(3), .md.is-open .md__body > *:nth-child(3) { animation-delay: .12s; }
.dr.is-open .dr__body > *:nth-child(4), .md.is-open .md__body > *:nth-child(4) { animation-delay: .18s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* «ручка» для свайпа вниз на мобильных шторках */
.md__grab { display: none; }
@media (max-width: 900px) {
  .md__grab {
    display: block; width: 42px; height: 4px; margin: 10px auto 2px;
    border-radius: 4px; background: rgba(244, 241, 236, .22);
  }
  .md.is-drag, .dr.is-drag { transition: none; }
}

/* ------------------------------ скелетоны ------------------------------- */
.sk { display: grid; gap: 12px; }
.sk__row { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; }
.sk__b {
  border-radius: 10px;
  background: linear-gradient(100deg, var(--s1) 30%, var(--s2) 50%, var(--s1) 70%);
  background-size: 220% 100%; animation: skShine 1.3s linear infinite;
}
.sk__b--img { width: 74px; height: 74px; border-radius: 12px; }
.sk__b--l { height: 13px; }
.sk__b--s { height: 11px; width: 55%; }
@keyframes skShine { to { background-position: -120% 0; } }

/* -------------------------------- тосты --------------------------------- */
.toast { position: relative; overflow: hidden; animation: toastPop .4s var(--e-spring) both; }
.toast::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold-br), var(--terra));
  transform-origin: left; animation: toastBar 3s linear forwards;
}
@keyframes toastPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------- шапка ---------------------------------- */
.hdr { will-change: transform; }
.hdr.is-hidden { transform: translateY(-102%); }
@media (max-width: 900px) {
  .hdr { transition: transform .35s var(--e-out), background-color .35s, padding .35s; }
  .tabbar__i.is-on svg { animation: tabPop .4s var(--e-spring); }
  @keyframes tabPop { 0% { transform: scale(1); } 45% { transform: scale(1.25) translateY(-2px); } 100% { transform: none; } }
}

/* карточка товара в каталоге: мягкое золотое свечение по наведению */
.card { will-change: transform; }
.card:hover { box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(203, 152, 66, .25); }
.card__fav:active { transform: scale(.85); }
.fav.is-on svg { animation: heartPop .5s var(--e-spring); }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* цена пересчиталась — короткая подсветка */
.cl__sum.is-upd, .sum__total b.is-upd { animation: priceTick .5s var(--e-out); }
@keyframes priceTick { 0% { color: var(--text); transform: scale(1.08); } 100% { color: var(--gold-br); transform: none; } }

/* --------------------- выключение по настройке ОС ----------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  body:not(.is-ready) .hero__copy > *,
  body:not(.is-ready) .hero__shot,
  body:not(.is-ready) .hero__stats li { opacity: 1; }
}

/* ==========================================================================
   Второй заход по анимациям: сторис, корзина, авторизация, оформление.
   ========================================================================== */

/* ------------------------------ сторис ---------------------------------- */
.sv { opacity: 0; transition: opacity .28s var(--e-out); }
.sv.is-open { opacity: 1; }
/* кадр «вырастает» из кружка сторис */
.sv__stage { transform-origin: var(--ox, 50%) var(--oy, 50%); }
.sv.is-in .sv__stage { animation: svGrow .42s var(--e-out) both; }
@keyframes svGrow {
  from { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.12); opacity: .2; border-radius: 50%; }
  to   { transform: none; opacity: 1; }
}
.sv.is-closing { opacity: 0; }
.sv.is-closing .sv__stage { animation: svShrink .3s var(--e-out) both; }
@keyframes svShrink {
  to { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.12); opacity: 0; border-radius: 50%; }
}
/* смена кадра: уезжает в сторону + лёгкий поворот, как «куб» в приложении */
#svMedia.is-next { animation: svNext .42s var(--e-out) both; }
#svMedia.is-prev { animation: svPrev .42s var(--e-out) both; }
@keyframes svNext {
  from { opacity: .2; transform: translateX(28%) rotateY(-14deg) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes svPrev {
  from { opacity: .2; transform: translateX(-28%) rotateY(14deg) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.sv__stage { perspective: 1200px; }
/* подпись въезжает снизу */
.sv__cap b, .sv__cap span { animation: capUp .5s var(--e-out) both; }
.sv__cap span { animation-delay: .08s; }
@keyframes capUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* полосы прогресса: длительность задаётся из JS, пауза — по удержанию */
.sv__bar i { width: 0; }
.sv__bar.is-live i { animation: svBar var(--dur, 5s) linear forwards; }
.sv.is-paused .sv__bar.is-live i { animation-play-state: paused; }
.sv.is-paused #svMedia { filter: brightness(.82); }
.sv__hint {
  position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); z-index: 4;
  padding: 7px 14px; border-radius: 999px; font-size: 12px; color: var(--text2);
  background: rgba(14, 12, 10, .6); backdrop-filter: blur(6px);
  animation: hintFade 3.4s ease forwards;
}
@keyframes hintFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------- добавление в корзину -------------------------- */
/* «призрак» летит по дуге и слегка вращается */
.fly { animation: flyArc .78s cubic-bezier(.45, .05, .55, .95) forwards; box-shadow: 0 12px 26px -10px rgba(0,0,0,.8); }
@keyframes flyArc {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  35%  { transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35 - 60px)) scale(.8) rotate(-8deg); opacity: .95; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.16) rotate(12deg); opacity: .15; }
}
/* «+1» всплывает над кнопкой */
.plus1 {
  position: fixed; z-index: 190; pointer-events: none;
  font-size: 15px; font-weight: 800; color: var(--gold-br);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
  animation: plus1 .8s var(--e-out) forwards;
}
@keyframes plus1 { from { opacity: 0; transform: translateY(0) scale(.8); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-42px) scale(1.1); } }
/* кнопка «+» превращается в галочку */
.addbtn .tick { display: none; }
.addbtn.is-done .plus { display: none; }
.addbtn.is-done .tick { display: block; }
.addbtn.is-done .tick path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: tickDraw .35s var(--e-out) forwards; }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }
/* строка корзины схлопывается при удалении */
.cl.is-out { animation: clOut .32s var(--e-out) forwards; overflow: hidden; }
@keyframes clOut {
  to { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; }
}
.cl { max-height: 260px; }
/* количество «прокручивается» */
.qty span { display: inline-block; }
.qty span.is-roll { animation: roll .32s var(--e-out); }
@keyframes roll { 0% { transform: translateY(6px); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* --------------------------- авторизация / OTP --------------------------- */
.md__body.is-swap { animation: swapIn .34s var(--e-out) both; }
@keyframes swapIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.md__body.is-swap-back { animation: swapBack .34s var(--e-out) both; }
@keyframes swapBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

.otp { display: flex; gap: 10px; justify-content: center; margin: 6px 0 18px; }
.otp input {
  width: 58px; height: 68px; text-align: center; font-size: 26px; font-weight: 700;
  color: var(--text); background: rgba(14, 12, 10, .62);
  border: 1px solid rgba(244, 241, 236, .12); border-radius: 14px;
  transition: border-color .2s, transform .2s var(--e-spring), background-color .2s;
}
.otp input:focus { outline: none; border-color: var(--gold); transform: translateY(-2px); background: rgba(203, 152, 66, .08); }
.otp.is-bad { animation: shake .45s var(--e-out); }
.otp.is-bad input { border-color: var(--terra); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}
.otp.is-ok input { border-color: #4caf50; }

/* поле с «плавающей» подписью */
.fld { position: relative; }
.fld input:focus, .fld textarea:focus { box-shadow: 0 0 0 3px rgba(203, 152, 66, .12); }

/* кнопка в состоянии ожидания */
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy::before {
  content: ''; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%;
  border: 2px solid rgba(28, 21, 9, .35); border-top-color: #1c1509;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------- оформление и «готово» ------------------------- */
.done__ic { position: relative; }
.done__ic svg path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: tickDraw .5s var(--e-out) .12s forwards; }
.done__ic::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(203, 152, 66, .5); animation: ring 1.1s var(--e-out) forwards;
}
@keyframes ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.done .sparkle {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-br); animation: sparkle 1.1s var(--e-out) forwards;
}
@keyframes sparkle {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

/* счётчик бонусов в кабинете */
.bcard__v { transition: none; }

/* крестик всегда выше зон-переключателей внутри кадра */
.sv__close { z-index: 6; }
.sv__nav { z-index: 2; }
.sv__bars { z-index: 5; }
.sv__cap { z-index: 4; }