/* ===== Хиро-слайдер: два посыла (зелёный кофе / упаковка) на одном акварельном фоне =====
   Подключается ПОСЛЕ основных стилей сайта. Анимация появления текста теперь живёт на слайде
   (.hero-slide.reveal…), а не на всём .hero — так каждый слайд проявляется заново при смене. */

/* слайды текста лежат друг на друге в одной клетке сетки, высота блока — по самому высокому */
.landing-content .hero-slides { display: grid; }
.landing-content .hero-slide { grid-area: 1 / 1; min-width: 0; transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.landing-content .hero-slide:not(.is-active) { visibility: hidden; pointer-events: none; }
.landing-content .hero-slide.is-leaving { visibility: visible; opacity: 0; transform: translateY(-10px); filter: blur(6px); }

/* заголовок второго слайда — h2, но выглядит как h1 (на странице остаётся один h1) */
.landing-content .hero .hero-title { font: 600 45px/1.15 Montserrat, Arial, sans-serif; color: #26245b; letter-spacing: 0;
  overflow-wrap: anywhere; max-width: 660px; margin: 0 0 31px; }

/* появление строк и кнопок — те же мазок и подъём, что были у хиро */
.landing-content .hero-slide .line { display: block; }
.landing-content .hero-slide.reveal .line > span { opacity: 0; filter: blur(10px); max-width: 100%; display: inline-block;
  transform: translateY(.55em);
  -webkit-mask-image: linear-gradient(90deg, #000 42%, #0000 58%); mask-image: linear-gradient(90deg, #000 42%, #0000 58%);
  -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.landing-content .hero-slide.reveal.go .line > span { animation: hero-ink 1.4s cubic-bezier(.22, .7, .2, 1) var(--d) forwards; }
.landing-content .hero-slide.reveal .hero-actions .btn { opacity: 0; transform: translateY(18px) scale(.94); }
.landing-content .hero-slide.reveal.go .hero-actions .btn { animation: hero-rise 1s cubic-bezier(.2, .8, .2, 1.15) var(--d) forwards; }
.landing-content .hero-slide.reveal.done .hero-actions .btn { opacity: 1; animation: none; transform: none; }
@keyframes hero-ink { 60% { filter: blur(0); } to { opacity: 1; filter: blur(0); transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes hero-rise { to { opacity: 1; transform: none; } }

/* картинки слайдов меняются мягкой сменой: старая растворяется, новая проявляется из лёгкого расфокуса */
.landing-content .hero-art img { opacity: 0; transform: scale(.985); filter: blur(6px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .9s ease; }
.landing-content .hero-art img.is-active { opacity: 1; transform: none; filter: none; transition-delay: .15s; }

/* кнопки на слайдах: не уже, чем на сайте (180px), но длинная надпись («Подобрать оборудование») помещается в одну строку */
.landing-content .hero-slide .hero-actions .btn { width: auto; min-width: 180px; padding: 0 24px; white-space: nowrap; }

/* переключатель: тонкие полоски, у активной заполняется прогресс до смены слайда */
.landing-content .hero-dots { display: flex; gap: 10px; margin-top: 44px; }
.landing-content .hero-dot { position: relative; width: 44px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.landing-content .hero-dot::before, .landing-content .hero-dot::after { content: ""; position: absolute; left: 0; top: 9px; height: 2px; border-radius: 2px; }
.landing-content .hero-dot::before { right: 0; background: rgba(37, 33, 102, .16); transition: background-color .3s; }
.landing-content .hero-dot::after { width: 0; background: #252166; }
.landing-content .hero-dot.run::after { animation: hero-progress var(--hero-interval, 8s) linear forwards; }
@keyframes hero-progress { to { width: 100%; } }
.landing-content .hero-dot:hover::before { background: rgba(37, 33, 102, .32); }
.landing-content .hero-dot:focus-visible { outline: 2px solid #81a94f; outline-offset: 3px; border-radius: 4px; }

@media (max-width: 980px) {
  .landing-content .hero .hero-title { max-width: 500px; font-size: 34px; margin-top: 0; }
  .landing-content .hero-dots { margin-top: 28px; }
  .landing-content .hero-slide .hero-actions .btn { min-width: 170px; }
}
@media (max-width: 560px) {
  .landing-content .hero .hero-title { max-width: 330px; margin: 0 0 31px; font-size: 26px; }
  /* если строка заголовка не влезает, делим её поровну, а не оставляем одно слово на новой строке */
  .landing-content .hero-slide :is(h1, .hero-title) .line > span { text-wrap: balance; }
  .landing-content .hero-dots { justify-content: center; margin-top: 22px; }
  .landing-content .hero-slide .hero-actions .btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-content .hero-slide, .landing-content .hero-art img { transition: none; }
}