/* Real Small Town Mahj photography for the homepage shuffle. */
.shuffle-photo--one { --photo: url('/photos/home-shuffle-1.jpg'); }
.shuffle-photo--two { --photo: url('/photos/home-shuffle-2.jpg'); }
.shuffle-photo--three { --photo: url('/photos/home-shuffle-3.jpg'); }
.shuffle-photo--four { --photo: url('/photos/home-shuffle-4.jpg'); }
.shuffle-photo--five { --photo: url('/photos/home-shuffle-5.jpg'); }
.shuffle-photo--six { --photo: url('/photos/home-shuffle-6.jpg'); }

/* Gentle five-second sway with a layered dissolve between images. */
.shuffle-photo {
  transition:
    opacity 1.5s cubic-bezier(.4,0,.2,1),
    filter 1.5s cubic-bezier(.4,0,.2,1),
    transform 1.5s cubic-bezier(.4,0,.2,1) !important;
}

.shuffle-photo__image {
  will-change: transform;
  transform-origin: center center;
}

.shuffle-photo[data-position="0"] .shuffle-photo__image,
.shuffle-photo.is-incoming .shuffle-photo__image {
  animation: small-town-photo-sway 5.4s cubic-bezier(.37,.08,.25,1) forwards;
}

@keyframes small-town-photo-sway {
  from {
    transform:
      translate3d(var(--sway-from-x, -.4%), var(--sway-from-y, .3%), 0)
      scale(var(--sway-from-scale, 1.05));
  }
  to {
    transform:
      translate3d(var(--sway-to-x, 1%), var(--sway-to-y, -.6%), 0)
      scale(var(--sway-to-scale, 1.075));
  }
}

.shuffle-photo[data-position="1"] .shuffle-photo__image,
.shuffle-photo[data-position="2"] .shuffle-photo__image,
.shuffle-photo[data-position="3"] .shuffle-photo__image,
.shuffle-photo[data-position="4"] .shuffle-photo__image,
.shuffle-photo[data-position="5"] .shuffle-photo__image {
  animation: none;
  transform:
    translate3d(var(--sway-from-x, 0%), var(--sway-from-y, 0%), 0)
    scale(var(--sway-from-scale, 1.05));
}

/* Keep the current image fully visible while the next image fades over it.
   This avoids the brief empty-frame blink that can happen when both cards
   change opacity at the same time. */
.shuffle-photo.is-outgoing {
  z-index: 20 !important;
  opacity: 1 !important;
}

.shuffle-photo.is-incoming {
  z-index: 21 !important;
  opacity: 0 !important;
}

.photo-shuffle-hero.is-dissolving .shuffle-photo.is-incoming {
  opacity: 1 !important;
}

.photo-shuffle-hero.is-dissolving .shuffle-photo.is-outgoing {
  opacity: 1 !important;
}

.shuffle-photo[data-position="4"] {
  --photo-rotation: -3deg;
  --photo-x: -10px;
  --photo-y: 30px;
  z-index: 0;
  opacity: .34;
  filter: saturate(.78);
}

.shuffle-photo[data-position="5"] {
  --photo-rotation: 4deg;
  --photo-x: 14px;
  --photo-y: 34px;
  z-index: -1;
  opacity: .22;
  filter: saturate(.72);
}

@media (max-width: 680px) {
  .shuffle-photo {
    transition:
      opacity 1.5s cubic-bezier(.4,0,.2,1),
      filter 1.5s cubic-bezier(.4,0,.2,1) !important;
  }

  .shuffle-photo[data-position="4"],
  .shuffle-photo[data-position="5"] {
    --photo-rotation: 0deg;
    --photo-x: 0px;
    --photo-y: 0px;
    opacity: 0;
  }

  .shuffle-photo__image {
    background-position: center center !important;
    background-size: cover !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shuffle-photo,
  .shuffle-photo__image {
    transition: none !important;
    animation: none !important;
  }

  .shuffle-photo__image,
  .shuffle-photo[data-position="0"] .shuffle-photo__image {
    transform: none !important;
  }
}