.hero-stage,
.hero-slide,
.hero-slide__background,
.hero-product {
  position: absolute;
  inset: 0;
}

.hero-stage { z-index: 0; }

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.05s cubic-bezier(.2,.75,.2,1), visibility 1.05s;
}

.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 7s cubic-bezier(.15,.7,.2,1);
}

.hero-slide.is-active .hero-slide__background { transform: scale(1); }

.hero-product {
  inset: auto auto var(--product-bottom, 10%) var(--product-left, 36%);
  width: var(--product-width, 34%);
  height: var(--product-height, 66%);
  transform: translateX(-50%);
  perspective: 900px;
}

.hero-product__bottle {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 13px rgba(0,0,0,.24));
  opacity: 0;
  transform: translate3d(-70px,8px,0) rotateY(-8deg) scale(.96);
  transform-origin: center bottom;
  transition: opacity .7s ease .08s, transform 1.05s cubic-bezier(.17,.82,.24,1) .05s;
}

.hero-product__shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -1.2%;
  width: 76%;
  height: 7%;
  border-radius: 50%;
  background: rgba(0,0,0,.43);
  filter: blur(13px);
  opacity: 0;
  transform: translateX(-50%) scaleX(.72);
  transition: opacity .7s ease .2s, transform 1.05s cubic-bezier(.17,.82,.24,1) .08s;
}

.hero-slide.is-active .hero-product__bottle {
  opacity: 1;
  transform: translate3d(0,0,0) rotateY(0) scale(1);
}

.hero-slide.is-active .hero-product__shadow {
  opacity: .72;
  transform: translateX(-50%) scaleX(1);
}

.hero-slide.is-leaving .hero-product__bottle {
  opacity: 0;
  transform: translate3d(78px,-4px,0) rotateY(7deg) scale(.98);
  transition-delay: 0s;
}

.hero-slide--stone {
  --product-left: 27%;
  --product-bottom: 24%;
  --product-width: 29%;
  --product-height: 61%;
}

.hero-slide--nocturne {
  --product-left: 29%;
  --product-bottom: 9%;
  --product-width: 41%;
  --product-height: 59%;
}

.hero-shade { z-index: 1; pointer-events: none; }
.hero-copy { z-index: 3; }

.hero[data-slide="0"] .hero-shade,
.hero[data-slide="2"] .hero-shade {
  background: linear-gradient(270deg,rgba(4,7,11,.78) 0%,rgba(4,7,11,.26) 43%,rgba(4,7,11,.04) 68%),linear-gradient(0deg,rgba(3,5,8,.42),transparent 48%);
}

.hero[data-slide="1"] .hero-shade {
  background: linear-gradient(270deg,rgba(16,15,14,.72) 0%,rgba(16,15,14,.4) 43%,rgba(16,15,14,.06) 68%),linear-gradient(0deg,rgba(16,15,14,.34),transparent 48%);
}

.hero-pagination {
  position: absolute;
  z-index: 4;
  right: 3vw;
  bottom: 2.8rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.hero-dot {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%,-50%);
  transition: width .32s ease, height .32s ease, background .32s ease, border-color .32s ease;
}

.hero-dot[aria-current="true"]::before {
  width: 9px;
  height: 9px;
  background: #fff;
  border-color: #fff;
}

.hero-dot:hover::before,
.hero-dot:focus-visible::before { border-color: #d0ad69; }

@media (max-width: 820px) {
  .hero-product {
    --product-left: 54%;
    --product-bottom: 16%;
    --product-width: 55%;
    --product-height: 48%;
  }
  .hero-slide--stone {
    --product-left: 52%;
    --product-bottom: 22%;
    --product-width: 48%;
    --product-height: 43%;
  }
  .hero-slide--nocturne {
    --product-left: 52%;
    --product-bottom: 13%;
    --product-width: 65%;
    --product-height: 42%;
  }
  .hero-slide__background { object-position: center; }
  .hero[data-slide] .hero-shade {
    background: linear-gradient(0deg,rgba(3,5,8,.9) 0%,rgba(3,5,8,.32) 58%,rgba(3,5,8,.08));
  }
  .hero-pagination { right: 1.15rem; bottom: 1.1rem; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide__background,
  .hero-product__bottle,
  .hero-product__shadow { transition: none; }
  .hero-slide__background { transform: none; }
}