
/* RSD Hero Motion v1.1
   Static images with restrained Ken-Burns motion + 2-slide crossfade.
   No video/framework required. */
.rsd-hero-motion {
  position: relative;
  min-height: clamp(620px, 78vh, 900px);
  overflow: hidden;
  background: #111;
  isolation: isolate;
}
.rsd-hero-motion__slides,
.rsd-hero-motion__slide,
.rsd-hero-motion__picture {
  position: absolute;
  inset: 0;
}
.rsd-hero-motion__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}
.rsd-hero-motion__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.rsd-hero-motion__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transform: scale(1.035);
  will-change: transform;
}
.rsd-hero-motion__slide.is-active .rsd-hero-motion__picture img {
  animation: rsdKenBurns 6.5s ease-out both;
}
.rsd-hero-motion__slide:nth-child(2) .rsd-hero-motion__picture img {
  object-position: 50% 48%;
}
.rsd-hero-motion__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.24) 37%, rgba(0,0,0,.04) 70%),
    linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,0) 50%);
}
.rsd-hero-motion__content {
  position: relative;
  z-index: 3;
  max-width: var(--max, 1240px);
  margin: 0 auto;
  min-height: inherit;
  padding: clamp(116px, 15vh, 165px) var(--gutter, 42px) 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.rsd-hero-motion__eyebrow {
  font-family: var(--sans, Arial, sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rsd-hero-motion__title {
  font-family: var(--serif, Georgia, serif);
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.025em;
}
.rsd-hero-motion__subline {
  font-family: var(--sans, Arial, sans-serif);
  margin: 18px 0 0;
  max-width: 700px;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.3;
}
.rsd-hero-motion__progress {
  position: absolute;
  z-index: 4;
  left: max(var(--gutter, 42px), calc((100% - var(--max, 1240px)) / 2 + var(--gutter, 42px)));
  bottom: 34px;
  display: flex;
  gap: 9px;
}
.rsd-hero-motion__dot {
  width: 42px;
  height: 20px;
  border: 0;
  padding: 0;
  position: relative;
  background: transparent;
  cursor: pointer;
}
.rsd-hero-motion__dot::before {
  content: "";
  position: absolute;
  inset: 9px 0 auto;
  height: 2px;
  background: rgba(255,255,255,.42);
}
.rsd-hero-motion__dot.is-active::before { background: #fff; }

@keyframes rsdKenBurns {
  0%   { transform: scale(1.035) translate3d(0,0,0); }
  100% { transform: scale(1.105) translate3d(-.6%, -.35%, 0); }
}

@media (max-width: 760px) {
  .rsd-hero-motion { min-height: min(820px, 92svh); }
  .rsd-hero-motion__content {
    padding: 110px var(--gutter, 22px) 72px;
    justify-content: flex-end;
  }
  .rsd-hero-motion__shade {
    background:
      linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 58%, rgba(0,0,0,.05) 100%);
  }
  .rsd-hero-motion__title {
    font-size: clamp(36px, 11vw, 52px);
    max-width: 92%;
  }
  .rsd-hero-motion__subline { font-size: 18px; max-width: 92%; }
  .rsd-hero-motion__progress {
    left: var(--gutter, 22px);
    bottom: 24px;
  }
  .rsd-hero-motion__slide:nth-child(2) .rsd-hero-motion__picture img {
    object-position: 50% 47%;
  }
}

/* Accessibility: motion is removed when requested by the OS. */
@media (prefers-reduced-motion: reduce) {
  .rsd-hero-motion__slide,
  .rsd-hero-motion__picture img {
    transition: none !important;
    animation: none !important;
  }
}
