.hero__image,
.page-hero__image {
  animation: hero-image-enter 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-enter {
  animation: hero-content-enter 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-enter--1 {
  animation-delay: 180ms;
}

.hero-enter--2 {
  animation-delay: 300ms;
}

.hero-enter--3 {
  animation-delay: 420ms;
}

.hero-enter--4 {
  animation-delay: 540ms;
}

@keyframes hero-image-enter {
  from {
    opacity: 0.72;
    scale: 1.035;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes hero-content-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.motion-reveal {
  --motion-reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay);
}

.motion-reveal--left {
  transform: translate3d(-2.25rem, 0, 0);
}

.motion-reveal--right {
  transform: translate3d(2.25rem, 0, 0);
}

.motion-reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-delay-1 {
  --motion-reveal-delay: 80ms;
}

.motion-delay-2 {
  --motion-reveal-delay: 160ms;
}

.motion-delay-3 {
  --motion-reveal-delay: 240ms;
}

.motion-image {
  --motion-parallax-y: 0px;
  translate: 0 var(--motion-parallax-y);
  scale: 1;
  transition:
    scale 450ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 450ms ease;
  will-change: translate, scale;
}

.impact__media .motion-image {
  height: calc(100% + 2.5rem);
  margin-top: -1.25rem;
}

.club-gallery figure .motion-image {
  height: calc(100% + 2.5rem);
  margin-top: -1.25rem;
}

.history-hero .motion-image,
.bridge-story__visual .motion-image {
  height: calc(100% + 2.5rem);
  margin-top: -1.25rem;
}

.motion-reveal.motion-image {
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    scale 450ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 450ms ease;
}

.choice-card.motion-reveal,
.amenity-card.motion-reveal,
.membership-card.motion-reveal {
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    border-color var(--transition),
    box-shadow var(--transition);
}

.feature.motion-reveal {
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-reveal-delay),
    border-color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .impact__media:hover .motion-image,
  .motion-image:hover {
    filter: brightness(1.035);
    scale: 1.025;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .page-hero__image,
  .hero-enter {
    opacity: 1;
    scale: 1;
    transform: none;
    animation: none;
  }

  .motion-reveal,
  .motion-reveal--left,
  .motion-reveal--right,
  .motion-reveal--visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .motion-image,
  .motion-image:hover {
    filter: none;
    translate: none;
    scale: 1;
    transition: none;
    will-change: auto;
  }
}