/*
  Query-gated Home projection reveal.
  Enabled only with ?motion=projection-reveal-v1.
*/

html.home-projection-reveal .site-shell--home .hero-slider {
  background: #000;
  perspective: 1450px;
  perspective-origin: 50% 50%;
}

html.home-projection-reveal .site-shell--home .hero-slider__slides,
html.home-projection-reveal .site-shell--home .hero-slide,
html.home-projection-reveal .site-shell--home .home-projection-reveal__plane {
  transform-style: preserve-3d;
}

html.home-projection-reveal
  .site-shell--home
  .home-projection-reveal__plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
  background: #000;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 52%;
  backface-visibility: hidden;
  pointer-events: none;
}

html.home-projection-reveal
  .site-shell--home
  .home-projection-reveal__plane
  > .hero-slide__spatial-media {
  position: absolute;
  inset: 0;
}

html.home-projection-reveal
  .site-shell--home
  .home-projection-reveal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(circle at 50% 46%, rgba(32, 32, 32, 0.5), transparent 42%),
    #000;
  opacity: 0;
  pointer-events: none;
}

html.home-projection-reveal
  .site-shell--home
  .hero-slide.is-projection-reveal-outgoing,
html.home-projection-reveal
  .site-shell--home
  .hero-slide.is-projection-reveal-incoming {
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
}

html.home-projection-reveal
  .site-shell--home
  .hero-slide.is-projection-reveal-outgoing {
  z-index: 9;
}

html.home-projection-reveal
  .site-shell--home
  .hero-slide.is-projection-reveal-incoming {
  z-index: 8;
}

html.home-projection-reveal-transitioning
  .site-shell--home
  .hero-slide.is-projection-reveal-outgoing
  .home-projection-reveal__plane,
html.home-projection-reveal-transitioning
  .site-shell--home
  .hero-slide.is-projection-reveal-incoming
  .home-projection-reveal__plane {
  will-change: transform, opacity, border-radius;
}

html.home-projection-reveal-transitioning
  .site-shell--home
  .hero-slide.is-projection-reveal-outgoing
  .hero-slide__video,
html.home-projection-reveal-transitioning
  .site-shell--home
  .hero-slide.is-projection-reveal-incoming
  .hero-slide__video {
  animation: none !important;
}

@media (max-width: 720px) {
  html.home-projection-reveal .site-shell--home .hero-slider {
    perspective: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.home-projection-reveal
    .site-shell--home
    .home-projection-reveal__plane {
    transform: none !important;
    border-radius: 0 !important;
    will-change: auto !important;
  }

  html.home-projection-reveal
    .site-shell--home
    .home-projection-reveal__backdrop {
    display: none !important;
  }
}