.motion-enabled .hero-scroll {
  height: var(--motion-hero-desktop-scroll);
}

.motion-enabled .hero-stage {
  height: var(--motion-hero-desktop-stage);
  min-height: 40rem;
}

.motion-enabled .hero-acts {
  position: absolute;
  inset: var(--component-header-height-desktop) 0 0;
}

.motion-enabled .hero-act {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-top: 0;
  overflow: visible;
  visibility: visible;
}

.motion-enabled .hero-act::after {
  display: none;
}

.motion-enabled .hero-portrait,
.motion-enabled .hero-profile,
.motion-enabled .hero-field,
.motion-enabled [data-hero-layer-rear],
.motion-enabled [data-hero-layer-middle],
.motion-enabled [data-hero-layer-pendants],
.motion-enabled [data-hero-layer-tree],
.motion-enabled [data-hero-layer-fins],
.motion-enabled [data-hero-parallax-foreground],
.motion-enabled [data-hero-route-progress] {
  will-change: transform, opacity;
}

.reveal {
  opacity: 1;
  transform: none;
}

.motion-enabled .reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}

@media (max-width: 63.99rem) {
  .motion-enabled .hero-scroll {
    height: 188dvh;
  }

  .motion-enabled .hero-stage {
    height: 96dvh;
  }
}

@media (max-width: 47.99rem) {
  .motion-enabled .hero-scroll {
    height: var(--motion-hero-mobile-scroll);
  }

  .motion-enabled .hero-stage {
    height: var(--motion-hero-mobile-stage);
    min-height: 36rem;
  }

  .motion-enabled .hero-acts {
    inset: var(--component-header-height-mobile) 0 0;
  }

  .motion-enabled .hero-act {
    padding-bottom: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .hero-scroll,
  .motion-enabled .hero-stage {
    height: auto;
    min-height: 0;
  }

  .motion-enabled .hero-acts {
    position: relative;
    inset: auto;
  }

  .motion-enabled .hero-act {
    position: relative;
    inset: auto;
    min-height: 46rem;
    visibility: visible;
  }

  .motion-enabled .reveal {
    opacity: 1;
    transform: none;
  }
}