/* Homepage hero sequence: copy clears on scroll, the treatment remains visible,
   then the reviews section rises over the pinned media. JavaScript adds the
   ready class so the ordinary document flow remains the fallback. */
.hero-reveal-sequence {
  --hero-copy-y: 0px;
  --hero-copy-opacity: 1;
  --hero-wash-opacity: 1;
  position: relative;
  isolation: isolate;
  background: var(--dark-blue);
}

.hero-reveal-sequence__hold {
  display: none;
}

.hero-reveal-sequence.is-reveal-ready > .hero {
  position: sticky !important;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

.hero-reveal-sequence.is-reveal-ready .hero__content {
  min-height: 100svh !important;
  opacity: var(--hero-copy-opacity);
  transform: translate3d(0, var(--hero-copy-y), 0);
  will-change: opacity, transform;
}

.hero-reveal-sequence.is-reveal-ready .hero__wash {
  opacity: var(--hero-wash-opacity);
  will-change: opacity;
}

.hero-reveal-sequence.is-reveal-ready .hero__poster,
.hero-reveal-sequence.is-reveal-ready .hero__video {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-reveal-sequence.is-reveal-ready .hero-reveal-sequence__hold {
  display: block;
  height: clamp(24rem, 58svh, 45rem);
  pointer-events: none;
}

.hero-reveal-sequence.is-reveal-ready > .reviews {
  z-index: 5;
  box-shadow: 0 -2rem 5rem rgb(2 23 34 / 28%);
}

.hero-reveal-sequence.is-copy-cleared .hero__content {
  pointer-events: none;
}

@media (width <= 820px) {
  .hero-reveal-sequence.is-reveal-ready .hero-reveal-sequence__hold {
    height: clamp(25rem, 68svh, 42rem);
  }
}

@media (width <= 560px) {
  .hero-reveal-sequence.is-reveal-ready .hero-reveal-sequence__hold {
    height: 66svh;
    min-height: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal-sequence.is-reveal-ready > .hero {
    position: relative !important;
    height: auto;
  }

  .hero-reveal-sequence.is-reveal-ready .hero-reveal-sequence__hold {
    display: none;
  }

  .hero-reveal-sequence.is-reveal-ready .hero__content,
  .hero-reveal-sequence.is-reveal-ready .hero__wash {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .hero-reveal-sequence.is-reveal-ready > .reviews {
    box-shadow: none;
  }
}