/*
   Zusatz-Effekte fuer 1983fotosundtreffen.de.
   Eigenstaendig gehalten, damit Hauptdateien minimal angefasst bleiben.
*/

.polaroid {
  overflow: hidden;
}

.polaroid .ps {
  position: relative;
  z-index: 2;
}

/* KEIN will-change auf allen Karten: erzwingt sonst ~190 dauerhafte
   GPU-Layer -> Tile-Memory voll -> weisse Flaechen. */

.polaroid > img,
.polaroid .zeitreise {
  transition: opacity 1.8s ease, filter 1.8s ease;
}

.polaroid.fx-pending > img,
.polaroid.fx-pending .zeitreise {
  opacity: .82;
  filter: brightness(1.6) contrast(.6) blur(6px) sepia(.5);
}

.polaroid.fx-inview > img,
.polaroid.fx-inview .zr-stack {
  animation: fx-kenburns-a 14s ease-in-out infinite alternate;
}

.galerie .polaroid:nth-child(2n).fx-inview > img,
.galerie .polaroid:nth-child(2n).fx-inview .zr-stack {
  animation-name: fx-kenburns-b;
}

.galerie .polaroid:nth-child(3n).fx-inview > img,
.galerie .polaroid:nth-child(3n).fx-inview .zr-stack {
  animation-name: fx-kenburns-c;
}

.polaroid:not(.fx-inview) > img,
.polaroid:not(.fx-inview) .zr-stack {
  animation-play-state: paused;
}

@keyframes fx-kenburns-a {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}

@keyframes fx-kenburns-b {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(1.4%, -1.2%, 0); }
}

@keyframes fx-kenburns-c {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-.6%, 1.3%, 0); }
}

.zeitreise {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #151018;
  cursor: ew-resize;
  touch-action: none;
}

.zeitreise .zr-stack,
.zeitreise .zr-img {
  position: absolute;
  inset: 0;
}

.zeitreise .zr-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.zeitreise .zr-neu {
  clip-path: inset(0 70% 0 0);
}

.zeitreise .zr-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  width: 2px;
  background: #f0b429;
  transform: translateX(-1px);
  box-shadow: 0 0 18px rgba(240, 180, 41, .45);
  z-index: 4;
}

.zeitreise .zr-knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: #f0b429;
  color: #1a1408;
  font: 700 18px/1 Consolas, "Courier New", monospace;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .polaroid.fx-pending > img,
  .polaroid.fx-pending .zeitreise {
    opacity: 1;
    filter: none;
    transition: none;
  }

  .polaroid.fx-inview > img,
  .polaroid.fx-inview .zr-stack {
    animation: none;
    transform: none;
  }
}