@media (prefers-reduced-motion: no-preference) {
  .site-loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 34%, rgba(212, 175, 55, .16), transparent 26%),
      var(--color-primary);
    color: var(--color-white);
    contain: layout paint style;
  }

  .site-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
  }

  .site-loader__mark {
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: .16em;
  }

  .site-loader__bar {
    position: absolute;
    bottom: var(--space-9);
    width: min(280px, 48vw);
    height: 2px;
    overflow: hidden;
    border-radius: var(--radius-button);
    background: rgba(255, 255, 255, .18);
  }

  .site-loader__bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
  }

  .page-transition {
    position: fixed;
    z-index: 9998;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    background: var(--color-primary);
    pointer-events: none;
    contain: layout paint style;
  }

  .page-transition.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 260ms var(--ease-out);
  }

  .text-reveal {
    will-change: transform, opacity, filter;
  }
}

.hero__media,
.host-life__media,
.experience-card,
.city-card,
.masonry-preview article,
.final-cta {
  background-size: 115% 115%;
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav__link:hover::after,
  .site-nav__login:hover::after,
  .text-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .button:hover,
  .feature-card:hover,
  .experience-card:hover,
  .city-card:hover,
  .story-card:hover,
  .masonry-preview article:hover,
  .partner-list li:hover,
  .partner-list button:hover,
  .timeline__step:hover {
    transform: translateY(-8px);
  }

  .button:hover {
    box-shadow: var(--shadow-large);
  }

  .button--secondary:hover {
    background: var(--color-white);
    color: var(--color-primary);
  }

  .button--ghost:hover {
    border-color: rgba(212, 175, 55, .7);
    background: rgba(212, 175, 55, .12);
  }

  .feature-card,
  .experience-card,
  .city-card,
  .story-card,
  .masonry-preview article,
  .partner-list li,
  .partner-list button,
  .timeline__step {
    transition:
      transform var(--duration-slow) var(--ease-out),
      box-shadow var(--duration-slow) var(--ease-out),
      border-color var(--duration-slow) var(--ease-out);
  }

  .feature-card:hover,
  .experience-card:hover,
  .city-card:hover,
  .story-card:hover,
  .masonry-preview article:hover {
    border-color: rgba(212, 175, 55, .34);
    box-shadow: var(--shadow-large);
  }

  .map-marker {
    transition:
      transform var(--duration-base) var(--ease-out),
      background var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .map-marker:hover,
  .map-marker.is-active,
  .map-marker:focus-visible {
    transform: translateY(-4px) scale(1.04);
    background: var(--color-accent);
    color: var(--color-black);
    box-shadow: var(--shadow-medium);
  }

  .hero__content {
    animation: fade-up var(--duration-reveal) var(--ease-soft) both;
  }

  .hero__scroll span {
    animation: scroll-dot 1.8s var(--ease-soft) infinite;
  }

  .reveal {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
    transition:
      opacity var(--duration-reveal) var(--ease-soft),
      transform var(--duration-reveal) var(--ease-soft);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .feature-card:nth-child(2),
  .statistic:nth-child(2),
  .experience-card:nth-child(2),
  .city-card:nth-child(2),
  .story-card:nth-child(2),
  .timeline__step:nth-child(2) {
    animation-delay: 80ms;
  }

  .feature-card:nth-child(3),
  .statistic:nth-child(3),
  .experience-card:nth-child(3),
  .city-card:nth-child(3),
  .story-card:nth-child(3),
  .timeline__step:nth-child(3) {
    animation-delay: 160ms;
  }

  .feature-card:nth-child(4),
  .statistic:nth-child(4),
  .experience-card:nth-child(4),
  .city-card:nth-child(4),
  .timeline__step:nth-child(4) {
    animation-delay: 240ms;
  }

  .feature-card:nth-child(5),
  .statistic:nth-child(5),
  .experience-card:nth-child(5),
  .city-card:nth-child(5),
  .timeline__step:nth-child(5) {
    animation-delay: 320ms;
  }

  .feature-card:nth-child(6),
  .statistic:nth-child(6),
  .experience-card:nth-child(6),
  .city-card:nth-child(6) {
    animation-delay: 400ms;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-dot {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(26px);
  }
}

@keyframes review-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}