/* ========================================
   Hero — Immersive Review Background
   Full-hero drift prototype
   ======================================== */

.hero-reviews {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 32%,
      rgba(0, 0, 0, 0.15) 36%,
      rgba(0, 0, 0, 0.55) 40%,
      black 46%,
      black 82%,
      rgba(0, 0, 0, 0.55) 88%,
      rgba(0, 0, 0, 0.15) 92%,
      transparent 96%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 300px 320px at 74% 50%,
      transparent 0%,
      transparent 36%,
      rgba(0, 0, 0, 0.45) 52%,
      black 68%
    );
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 32%,
      rgba(0, 0, 0, 0.15) 36%,
      rgba(0, 0, 0, 0.55) 40%,
      black 46%,
      black 82%,
      rgba(0, 0, 0, 0.55) 88%,
      rgba(0, 0, 0, 0.15) 92%,
      transparent 96%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 300px 320px at 74% 50%,
      transparent 0%,
      transparent 36%,
      rgba(0, 0, 0, 0.45) 52%,
      black 68%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero-reviews__layer {
  position: absolute;
  inset: -8% 0;
  overflow: hidden;
}

.hero-reviews__layer--rear {
  opacity: 0.4;
  filter: blur(2.5px);
}

.hero-reviews__layer--mid {
  opacity: 0.7;
  filter: blur(0.75px);
}

.hero-reviews__layer--front {
  opacity: 0.85;
  filter: none;
}

.hero-reviews__track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.hero-reviews__track--ltr {
  animation: hero-reviews-scroll-ltr var(--scroll-duration, 180s) linear infinite;
  animation-delay: var(--scroll-delay, -60s);
}

.hero-reviews__track--rtl {
  animation: hero-reviews-scroll-rtl var(--scroll-duration, 180s) linear infinite;
  animation-delay: var(--scroll-delay, -80s);
}

.hero-reviews__set {
  display: flex;
  align-items: flex-start;
  height: 100%;
}

.hero-review-card {
  flex: 0 0 216px;
  width: 216px;
  margin-top: var(--card-y, 20%);
  margin-right: var(--card-gap, 32px);
  padding: 16px 18px;
  background: rgba(22, 22, 22, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.16);
  border-radius: 8px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
  animation: hero-review-float var(--float-duration, 10s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.hero-review-card__stars {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 9px;
  line-height: 1;
}

.hero-review-card__text {
  margin: 0 0 11px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.86);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-review-card__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--grey);
}

@keyframes hero-reviews-scroll-ltr {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

@keyframes hero-reviews-scroll-rtl {
  0% { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}

@keyframes hero-review-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 1024px) {
  .hero-reviews {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        transparent 28%,
        rgba(0, 0, 0, 0.2) 34%,
        black 42%,
        black 80%,
        rgba(0, 0, 0, 0.2) 88%,
        transparent 94%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 240px 260px at 68% 50%,
        transparent 0%,
        transparent 34%,
        rgba(0, 0, 0, 0.45) 50%,
        black 66%
      );
    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        transparent 28%,
        rgba(0, 0, 0, 0.2) 34%,
        black 42%,
        black 80%,
        rgba(0, 0, 0, 0.2) 88%,
        transparent 94%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 240px 260px at 68% 50%,
        transparent 0%,
        transparent 34%,
        rgba(0, 0, 0, 0.45) 50%,
        black 66%
      );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .hero-review-card {
    flex: 0 0 196px;
    width: 196px;
    padding: 14px 16px;
  }
}

@media (max-width: 768px) {
  .hero-reviews {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reviews__track,
  .hero-review-card {
    animation: none !important;
  }

  .hero__logo {
    animation: none !important;
    filter:
      drop-shadow(0 0 36px rgba(201, 168, 76, 0.3))
      drop-shadow(0 25px 40px rgba(0, 0, 0, 0.4))
      brightness(1);
  }
}