.home-page {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}

.home-carousel-wrapper {
  display: flex;
  justify-content: center;
  width: 100vw;
  margin-inline: calc((100% - 100vw) / 2);
  transform: translateY(clamp(84px, 14dvh, 128px));
  overflow: visible;
}

.home-carousel-scene {
  width: min(360px, 100%);
  height: 460px;
  perspective: 1000px;
  position: relative;
  overflow: visible;
}

.home-carousel-floating-overlay {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(50% - 150px);
  width: 150px;
  height: 150px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.home-carousel-floating-overlay-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-carousel-floating-overlay-image--out {
  opacity: clamp(0, calc((0.82 - var(--floating-progress, 0)) * 1.22), 1);
  transform:
    translateY(calc(var(--floating-progress, 0) * 30px - 30px))
    scale(calc(1 - var(--floating-progress, 0)));
  transform-origin: center center;
  filter: drop-shadow(
    0 10px 16px rgba(31, 7, 63, calc((1 - var(--floating-progress, 0)) * 0.48))
  );
}

.home-carousel-floating-overlay-image--in {
  opacity: clamp(0, calc((var(--floating-progress, 0) - 0.18) * 1.22), 1);
  transform:
    translateY(calc((1 - var(--floating-progress, 0)) * 60px - 30px))
    scale(var(--floating-progress, 0));
  transform-origin: center center;
  filter: drop-shadow(
    0 10px 16px rgba(31, 7, 63, calc(var(--floating-progress, 0) * 0.48))
  );
}

.home-carousel-scene .home-carousel.keen-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: visible;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
}

.carousel__item {
  position: absolute;
  width: 130px;
  left: 0;
  right: 0;
  margin-inline: auto;
  top: 110px;
  height: 220px;
  overflow: visible;
  transform-origin: center bottom;
}

.carousel__cell {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(8, 4, 18, 0.08) 100%),
    linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 180ms ease-out;
  box-shadow:
    0 8px 18px rgba(8, 4, 18, 0.38),
    0 2px 8px rgba(8, 4, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 3px 7px rgba(255, 222, 255, 0.2),
    inset 0 -2px 0 rgba(12, 7, 27, 0.58),
    inset 0 -8px 14px rgba(8, 4, 18, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.carousel__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 42%,
    rgba(106, 35, 173, 0.28) 58%,
    rgba(57, 7, 101, 0.66) 78%,
    rgba(35, 2, 69, 0.9) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.home-carousel-icon-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) rotateX(var(--ui-counter-tilt, 0deg)) scaleY(1.06);
  transform-origin: center center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, #2e1b3d 0%, #23183e 100%),
    linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 -4px 10px rgba(7, 0, 18, 0.38),
    0 4px 10px rgba(5, 2, 12, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 2px 5px rgba(255, 222, 255, 0.09),
    inset 0 -2px 0 rgba(12, 7, 27, 0.72),
    inset 0 -6px 10px rgba(8, 4, 18, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 0 0 2px rgba(17, 10, 35, 0.32);
}

.home-carousel-text {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 14px;
  text-align: center;
  padding-inline: 10px;
  transform: rotateX(var(--ui-counter-tilt, 0deg)) scaleY(1.06);
  transform-origin: center bottom;
}

.home-carousel-label {
  display: block;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.home-carousel-subtitle {
  position: static;
  display: block;
  width: 100%;
  margin-top: 4px;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: #fff;
  font-weight: 500;
  opacity: 0.92;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.home-carousel-image {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: rotateX(var(--ui-counter-tilt, 0deg)) scaleY(1.06);
  transform-origin: center center;
}
