/* Photograph movement stays inside its frame; controls do not move. */
[data-parallax] {
  position: relative;
  overflow: hidden;
  /* Clip overscan without creating an inner scroll area that focus can shift. */
  overflow: clip;
  --parallax-travel: 48px;
}

[data-parallax="hero"] {
  --parallax-travel: 88px;
}

.room-photo .parallax-frame { height: 560px; }
.format-photo { aspect-ratio: 4 / 3; }
.neighborhood-photo .parallax-frame { aspect-ratio: 1 / 1.12; }
.dtla-visit .visit-photo { height: 100%; min-height: 480px; }
.parallax-frame > img,
.format-photo > img,
.visit-photo > img { width: 100%; height: 100%; object-fit: cover; }

/* Extra image height keeps the frame covered without an animated zoom. */
.parallax-active > .parallax-media {
  position: absolute;
  inset: calc(-1 * var(--parallax-travel) - 2px) 0 auto;
  width: 100%;
  height: calc(100% + var(--parallax-travel) * 2 + 4px);
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-offset, 0px), 0);
  transition: none;
}

@media (min-width: 761px) and (max-width: 1000px) {
  .room-photo .parallax-frame { height: 530px; }
}

@media (max-width: 760px) {
  [data-parallax] { --parallax-travel: 18px; }
  [data-parallax="hero"] { --parallax-travel: 32px; }
  .room-photo .parallax-frame { height: 400px; }
  .neighborhood-photo .parallax-frame,
  .dtla-visit .visit-photo { aspect-ratio: 4 / 3; }
  .dtla-visit .visit-photo { height: auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-active > .parallax-media {
    inset: 0;
    height: 100%;
    transform: none;
  }
  .text-motion-target { transform: none !important; }
}

@media print {
  .text-motion-target { transform: none !important; }
}