/* ========== HERO СЕКЦИЯ ========== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  padding-top: 80px;
}

.hero img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroZoom 1.6s ease-out both;
  transition: opacity .5s ease;
}

.hero img.bg.fadeOut {
  opacity: 0;
}

@keyframes heroZoom {
  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 38, 34, .66) 0%, rgba(43, 38, 34, .20) 40%, rgba(43, 38, 34, 0) 64%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(40px, 7vh, 88px);
  color: var(--white);
}

.hero .eyebrow {
  display: none !important;
}

.h1-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.price-sticker {
  background: var(--accent);
  color: var(--white);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 800;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: 999px;
  margin-top: clamp(8px, 1.5vw, 22px);
  box-shadow: 0 8px 24px rgba(181, 118, 74, .45);
  white-space: nowrap;
  display: none;
}

.hero p.sub {
  max-width: 560px;
  margin-top: 16px;
  font-size: clamp(13px, 1.4vw, 16px);
  color: rgba(255, 255, 255, .92);
}

/* ========== ГОРИЗОНТАЛЬНЫЙ СЛАЙДЕР МОДУЛЕЙ ========== */

.hero-products-slider {
  position: absolute;
  right: clamp(8px, 3vw, 48px);
  top: 47%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  pointer-events: auto;
}

.slider-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: rgba(181, 118, 74, .25);
  cursor: pointer;
  font-size: 24px;
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  transition: all .2s ease;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  z-index: 101;
}

.slider-arrow-btn:hover {
  background: rgba(255, 255, 255, .26);
  border-color: var(--white);
  transform: scale(1.1);
}

.slider-arrow-btn:active {
  transform: scale(0.95);
}

.hero-slider-track {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow: visible;
  width: clamp(240px, 24vw, 320px);
  height: auto;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-slider-slide {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
}

.hero-slider-slide.active {
  animation: slideRight .5s cubic-bezier(.34, .1, .68, 1) forwards;
}

.hero-slider-slide.active.slideFromBottom {
  animation: slideLeftIn .5s cubic-bezier(.34, .1, .68, 1) forwards;
}

.hero-slider-slide.prev {
  animation: slideRightOut .5s cubic-bezier(.34, .1, .68, 1) forwards;
}

.hero-slider-slide.prevUp {
  animation: slideLeftOut .5s cubic-bezier(.34, .1, .68, 1) forwards;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeftIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeftOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideRightOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.hero-slider-slide img {
  width: clamp(260px, 20vw, 380px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .2));
  transform: translate(-12%, -9%);
}

.hero-socket {
  --sw: clamp(260px, 20vw, 380px);
  position: absolute;
  width: var(--sw);
  height: auto;
  left: calc(50% + var(--sw) * 0.78);
  top: calc(50% + var(--sw) * 0.18);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .2));
  z-index: 5;
  pointer-events: none;
}

.hero-socket.slideOutRight {
  animation: socketSlideOutRight .3s cubic-bezier(.34, .1, .68, 1) forwards;
}

.hero-socket.slideOutLeft {
  animation: socketSlideOutLeft .3s cubic-bezier(.34, .1, .68, 1) forwards;
}

.hero-socket.slideRight {
  animation: socketSlideRight .3s cubic-bezier(.34, .1, .68, 1) forwards;
}

.hero-socket.slideLeftIn {
  animation: socketSlideLeftIn .3s cubic-bezier(.34, .1, .68, 1) forwards;
}

@keyframes socketSlideOutRight {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }

  to {
    opacity: 0;
    transform: translate(30%, 0);
  }
}

@keyframes socketSlideOutLeft {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }

  to {
    opacity: 0;
    transform: translate(-45%, 0);
  }
}

@keyframes socketSlideRight {
  from {
    opacity: 0;
    transform: translate(-45%, 0);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes socketSlideLeftIn {
  from {
    opacity: 0;
    transform: translate(30%, 0);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ========== ЦВЕТ ТЕКСТА В ЗАВИСИМОСТИ ОТ ФОНА ========== */

/* БЕЛЫЙ ФОН (Arctic White) - коричневый текст */
.hero.white-bg .hero-content {
  color: #8B6F47;
}

.hero.white-bg .eyebrow {
  color: #D4AF37;
}

.hero.white-bg p.sub {
  color: #8B6F47;
}

.hero.white-bg h1 {
  color: #8B6F47;
}

.hero.white-bg .price-sticker {
  background: #D4AF37;
}

/* СВЕТЛЫЙ ФОН (Epic Gold) - коричневый текст */
.hero.light-bg .hero-content {
  color: #8B6F47;
}

.hero.light-bg .eyebrow {
  color: #2B2622;
}

.hero.light-bg p.sub {
  color: #8B6F47;
}

.hero.light-bg h1 {
  color: #8B6F47;
}

.hero.light-bg .price-sticker {
  background: #2B2622;
  color: #D4AF37;
}

/* ТЕМНЫЙ ФОН (Velvet Grey) - белый текст (по умолчанию) */
.hero.dark-bg .hero-content {
  color: var(--white);
}

.hero.dark-bg .eyebrow {
  color: rgba(255, 255, 255, .85);
}

.hero.dark-bg p.sub {
  color: rgba(255, 255, 255, .92);
}

.hero.dark-bg h1 {
  color: var(--white);
}

.hero.dark-bg .price-sticker {
  background: var(--accent);
}

/* ========== МОБИЛЬНАЯ ВЕРСИЯ ========== */
@media (max-width: 768px) {
  .hero-products-slider {
    position: relative;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
    margin-top: clamp(48px, 11vh, 88px);
    width: 100%;
    justify-content: center;
    padding: 0 5%;
  }

  .hero-slider-track {
    width: min(38vw, 170px);
    max-width: 170px;
  }

  .hero-slider-slide img {
    width: clamp(140px, 55vw, 300px);
    max-width: none;
    transform: translate(-10%, -7%);
  }

  .slider-arrow-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .hero-socket {
    --sw: clamp(140px, 55vw, 300px);
    width: var(--sw);
    left: calc(50% - var(--sw) * 0.12);
    right: auto;
    top: calc(50% + var(--sw) * 0.96);
    bottom: auto;
  }

  .h1-row h1 {
    font-size: clamp(32px, 8vw, 56px);
  }
}