/* =========================================================
   MIRIDEA · motion layer v1.0
   Подключается поверх styles.min.css. Дизайн не меняет —
   только добавляет движение и микро-взаимодействия.
   Цвета взяты из фирменного стиля сайта.
   ========================================================= */
:root {
  --m-red: #f93c3c;
  --m-pink: #cd0973;
  --m-violet: #a068f8;
  --m-blue: #3f55c3;
  --m-navy: #184eae;
  --m-grad-red: linear-gradient(169deg, #f93c3c 0%, #cd0973 100%);
  --m-grad-btn: linear-gradient(120deg, #a068f8 0%, #3f55c3 35%, #184eae 55%, #a068f8 80%, #3f55c3 100%);
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }

/* ---------- Прогресс прокрутки ---------- */
.m-progress {
  position: fixed; top: 0; left: 0; z-index: 1000;
  height: 3px; width: 100%;
  background: var(--m-grad-red);
  transform-origin: 0 50%;
  transform: scaleX(var(--m-p, 0));
  pointer-events: none;
}

/* ---------- Шапка ---------- */
.header__menu a { position: relative; transition: color .3s; }
.header__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--m-grad-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s var(--m-ease);
}
.header__menu a:hover::after { transform: scaleX(1); transform-origin: left center; }
.header__logo img { transition: transform .5s var(--m-ease-back); }
.header__logo:hover img { transform: rotate(-4deg) scale(1.04); }
.header .phone img { animation: m-ring 6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes m-ring {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-16deg); } 92% { transform: rotate(14deg); }
  94% { transform: rotate(-10deg); } 96% { transform: rotate(6deg); }
}

/* ---------- Первый экран ---------- */
.block-intro__pic img {
  animation: m-float 7s ease-in-out infinite;
  translate: var(--m-px, 0) var(--m-py, 0);
  transition: translate .6s var(--m-ease);
  will-change: transform;
}
@keyframes m-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.m-letters { display: inline-block; white-space: nowrap; }
.m-letter {
  display: inline-block;
  background: inherit; -webkit-background-clip: text; background-clip: text;
}
.swiper-slide-active .block-intro__name   { animation: m-up .8s var(--m-ease) both .1s; }
.swiper-slide-active .block-intro__title  { animation: m-up .8s var(--m-ease) both .2s; }
.swiper-slide-active .m-letter            { animation: m-letter .9s var(--m-ease) both; animation-delay: calc(.3s + var(--i) * .045s); }
.swiper-slide-active .block-intro__center li { animation: m-up .7s var(--m-ease) both; }
.swiper-slide-active .block-intro__center li:nth-child(1) { animation-delay: .65s; }
.swiper-slide-active .block-intro__center li:nth-child(2) { animation-delay: .75s; }
.swiper-slide-active .block-intro__center li:nth-child(3) { animation-delay: .85s; }
.swiper-slide-active .block-intro__item > .link { animation: m-up .7s var(--m-ease) both 1s; }
.swiper-slide-active .block-intro__pic { animation: m-zoom 1.2s var(--m-ease) both; }
@keyframes m-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes m-letter {
  from { opacity: 0; transform: translateY(.6em) rotateX(-70deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes m-zoom { from { opacity: 0; transform: scale(.94) translateX(30px); } to { opacity: 1; transform: none; } }

/* Ссылки-стрелки «Узнать больше» */
.link img { transition: transform .4s var(--m-ease); }
.link:hover img { transform: translateX(8px); }
.block-intro-pagination-fraction .swiper-pagination-current { display: inline-block; animation: m-up .5s var(--m-ease); }

/* ---------- Заголовки секций ---------- */
html.m-js .title2.m-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--m-ease);
}
html.m-js .title2.m-reveal.m-in { clip-path: inset(0 -2% 0 0); }
.title2 { background-size: 200% 100% !important; }
.title2.m-in { animation: m-sheen 2.4s ease-out .4s 1; }
@keyframes m-sheen { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Универсальное появление при скролле ---------- */
html.m-js .m-reveal:not(.title2) {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s var(--m-ease), transform .9s var(--m-ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
html.m-js .m-reveal.m-scale { transform: translateY(30px) scale(.94); }
html.m-js .m-reveal.m-left  { transform: translateX(-40px); }
html.m-js .m-reveal.m-right { transform: translateX(40px); }
html.m-js .m-reveal.m-in:not(.title2) { opacity: 1; transform: none; }
/* У карточек есть собственный opacity .9 — сохраняем его */
html.m-js .cards__column.m-reveal.m-in { opacity: .9; }
.cards.cards--transparent .cards__column.m-reveal.m-in { opacity: 1; }

/* ---------- Карточки: подсветка под курсором и подъём ---------- */
.m-spot {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(249, 60, 60, .14), rgba(160, 104, 248, .08) 40%, transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.cards__column:hover .m-spot { opacity: 1; }
.block-services .cards__column,
.block-stats .cards__column { transition: border-radius .3s, transform .5s var(--m-ease), box-shadow .5s var(--m-ease), border-color .3s, opacity .9s var(--m-ease); }
.block-services .cards__column:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -12px rgba(63, 85, 195, .28); }
.cards__icon img { transition: transform .6s var(--m-ease-back); }
.cards__column:hover .cards__icon img { transform: translateY(-4px) rotate(-6deg) scale(1.12); }
.block-services--other .cards__column:hover { border-color: var(--m-red); }

/* ---------- Кнопки ---------- */
.btn--primary {
  background: var(--m-grad-btn) !important;
  background-size: 250% 100% !important;
  background-position: 0 0 !important;
  overflow: hidden; isolation: isolate;
  transition: background-position .8s var(--m-ease), transform .35s var(--m-ease), box-shadow .4s, opacity .3s !important;
  will-change: transform;
}
.btn--primary:hover { opacity: 1 !important; background-position: 100% 0 !important; box-shadow: 0 12px 30px -8px rgba(63, 85, 195, .55); }
.btn--primary::after,
.block-forms__btn::after,
.block-promo__btn::after {
  content: ""; position: absolute; top: 0; left: -60%; z-index: 1; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: m-shine 5s ease-in-out infinite;
}
.btn--primary:hover::after { animation-duration: 1.2s; }
@keyframes m-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.block-forms__btn, .block-promo__btn { position: relative; overflow: hidden; transition: transform .35s var(--m-ease), box-shadow .4s, opacity .3s !important; }
.block-forms__btn:hover, .block-promo__btn:hover { opacity: 1 !important; box-shadow: 0 12px 30px -10px rgba(241, 50, 71, .55); }

/* Плавающая кнопка «Получить предложение» */
.fixed-button { transition: transform .4s var(--m-ease), opacity .3s; }
.fixed-button::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: #f13247; animation: m-pulse 2.8s ease-out infinite;
}
.fixed-button:hover { opacity: 1; transform: translateX(-6px); }
.fixed-button img { transition: transform .4s var(--m-ease); }
.fixed-button:hover img { transform: rotate(-180deg) translateX(6px); }
@keyframes m-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }

/* ---------- 5 причин ---------- */
.block-features__bg1,
.block-stats__bg1,
.block-guarantees__bg1 { translate: 0 var(--m-par, 0); scale: 1.12; will-change: translate; }
.block-features__number span { display: inline-block; }
.block-features__column.m-in .block-features__number span { animation: m-pop .8s var(--m-ease-back) both; animation-delay: calc(var(--d, 0) * 120ms + .2s); }
.block-features__number img { animation: m-nudge 2.4s ease-in-out infinite; }
@keyframes m-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes m-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

/* ---------- Наши работы ---------- */
.block-works__column img { transition: transform 1.1s var(--m-ease), filter .6s; }
.block-works__column::after {
  content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 300 64px/1 Rubik, sans-serif; color: #fff;
  background: linear-gradient(160deg, rgba(249, 60, 60, .55), rgba(63, 85, 195, .55));
  opacity: 0; transition: opacity .5s var(--m-ease);
}
.block-works__column:hover::after { opacity: 1; }
.block-works__column:hover img { transform: scale(1.08); }
.m-works-more { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Цифры ---------- */
.block-stats .cards__column:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .7); }
.m-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Клиенты ---------- */
.block-clients__slide img { filter: grayscale(1); opacity: .65; transition: filter .5s, opacity .5s, transform .5s var(--m-ease); }
.block-clients__slide:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* ---------- Этапы ---------- */
.block-steps__line { position: relative; overflow: hidden; }
.block-steps__line::after {
  content: ""; position: absolute; inset: 0; background: var(--m-grad-red);
  transform: scaleX(0); transform-origin: left;
}
.block-steps__thumb.swiper-slide-thumb-active .block-steps__line::after { animation: m-line 1.2s var(--m-ease) forwards; }
/* Автопрокрутка: линия активного шага заполняется как таймер */
.block-steps.m-playing .block-steps__thumb.swiper-slide-thumb-active .block-steps__line::after { animation: m-line var(--m-step, 4000ms) linear forwards; }
.block-steps.m-paused .block-steps__thumb.swiper-slide-thumb-active .block-steps__line::after { animation-play-state: paused; }
.block-steps__number { transition: transform .4s var(--m-ease-back); }
.block-steps__thumb:hover .block-steps__number { transform: scale(1.1); }
.block-steps__thumb.swiper-slide-thumb-active .block-steps__number { animation: m-pop .6s var(--m-ease-back); }
@keyframes m-line { to { transform: scaleX(1); } }
.block-steps__slide.swiper-slide-active .block-steps__item > img { animation: m-icon .9s var(--m-ease-back) both; }
.block-steps__slide.swiper-slide-active .block-steps__text p { animation: m-up .7s var(--m-ease) both; }
.block-steps__slide.swiper-slide-active .block-steps__text p:nth-child(2) { animation-delay: .1s; }
.block-steps__slide.swiper-slide-active .block-steps__text p:nth-child(3) { animation-delay: .2s; }
@keyframes m-icon { from { opacity: 0; transform: scale(.5) rotate(-20deg); } to { opacity: 1; transform: none; } }
.m-inline-link { color: inherit; background: var(--m-grad-red); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; border-bottom: 1px dashed var(--m-red); }

/* ---------- Преимущества ---------- */
.block-benefits .cards__column.m-in .cards__icon img { animation: m-icon .9s var(--m-ease-back) both; animation-delay: calc(var(--d, 0) * 80ms + .25s); }

/* ---------- Гарантии ---------- */
.block-guarantees li.m-in img { animation: m-check .7s var(--m-ease-back) both; animation-delay: calc(var(--d, 0) * 120ms + .2s); }
@keyframes m-check { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.block-guarantees__image img { animation: m-float 8s ease-in-out infinite; }

/* ---------- Форма ---------- */
.block-forms .input, .popup .input { transition: border-color .3s, box-shadow .3s, transform .3s var(--m-ease); }
.block-forms .input:focus, .popup .input:focus {
  border-color: var(--m-red) !important;
  box-shadow: 0 0 0 4px rgba(249, 60, 60, .12);
  outline: none;
}
.block-forms__image img { animation: m-float 9s ease-in-out infinite; }
.popup__content { transition: transform .5s var(--m-ease), opacity .4s !important; }

/* ---------- Подвал ---------- */
.block-fixed__column img { transition: transform .5s var(--m-ease-back); }
.block-fixed__column:hover img { transform: translateY(-6px) scale(1.1); }
.footer-center a img { transition: transform .35s var(--m-ease); }
.footer-center a:hover img { transform: translateX(5px); }
.footer-right__social img { transition: transform .5s var(--m-ease-back); }
.footer-right__social:hover img { transform: scale(1.15) rotate(-8deg); }

/* ---------- Фокус с клавиатуры ---------- */
a:focus-visible, button:focus-visible, .fixed-button:focus-visible {
  outline: 2px solid var(--m-red); outline-offset: 3px;
}

/* ---------- Доступность: без анимации ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html.m-js .m-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* =========================================================
   Акционные баннеры на первом экране (v4)
   ========================================================= */
.m-promo .block-intro__item { gap: 26px; }
.m-promo .block-intro__title { font-size: clamp(30px, 3.2vw, 46px); }
.m-promo .block-intro__titles span { font-size: clamp(44px, 5.6vw, 84px); white-space: nowrap; }
.m-promo .block-intro__pic img { aspect-ratio: 800 / 495; }
.m-promo__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.m-promo__price {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 18px 10px 16px;
  border-left: 3px solid #f93c3c;
  background: linear-gradient(90deg, rgba(249, 60, 60, .08), rgba(249, 60, 60, 0));
  border-radius: 0 14px 14px 0;
}
.m-promo__price small { font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #8090aa; }
.m-promo__price b { font-size: 26px; line-height: 1.1; font-weight: 700; color: #39404b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-promo .m-promo__actions .btn--primary { min-height: 52px; padding: 5px 30px; }
.swiper-slide-active .m-promo__actions { animation: m-up .7s var(--m-ease) both .95s; }
.swiper-slide-active .m-promo__price b { animation: m-price 1.1s var(--m-ease-back) both 1.1s; display: inline-block; }
@keyframes m-price { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.swiper-slide-active.m-promo .block-intro__item > .link { animation-delay: 1.15s; }

@media (max-width: 992px) {
  .m-promo__actions { justify-content: center; }
  .m-promo__price { align-items: center; border-left: 0; border-bottom: 3px solid #f93c3c; border-radius: 14px 14px 0 0; background: linear-gradient(0deg, rgba(249, 60, 60, .08), rgba(249, 60, 60, 0)); }
}
@media (max-width: 768px) {
  .m-promo .block-intro__title { font-size: 28px; }
  .m-promo .block-intro__titles span { font-size: clamp(38px, 11vw, 56px); }
  .m-promo__price b { font-size: 22px; }
}