/* Shared presentation layer for the curated, locally hosted demo photography. */
.photo-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: none !important;
}

.photo-frame > .demo-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}

.photo-frame > .demo-photo ~ * {
  z-index: 2;
}

.venue-photo.photo-frame > :not(.demo-photo, .photo-scrim) {
  position: relative;
}

.hero-visual.photo-frame::after,
.portrait.photo-frame::before,
.lead-photo.photo-frame::after,
.venue-cut.photo-frame::after {
  opacity: 0;
}

.photo-frame > .photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-scrim, linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 52%)));
}

.photo-frame.photo-soft > .demo-photo {
  filter: saturate(.86) contrast(.96);
}

.photo-frame.photo-archive > .demo-photo {
  filter: sepia(.12) saturate(.72) contrast(.95);
}

.photo-frame.photo-night > .demo-photo {
  filter: saturate(.9) contrast(1.06) brightness(.78);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal.visible .demo-photo,
  .reveal.is-visible .demo-photo {
    animation: demo-photo-reveal 1.15s cubic-bezier(.2, .72, .2, 1) both;
  }

  @keyframes demo-photo-reveal {
    from { opacity: .72; transform: scale(1.025); }
    to { opacity: 1; transform: scale(1); }
  }
}