/* The cycling thumbnail's transitions, in one file: the catalog's gallery
   (web/index.html, driven by web/player/09-gallery-events.js) and a tenant
   page's frame (internal/tenantpage, which copies this file and loops the
   same keyframes over the same duration) both load it. */

/* ── Changing the cycling thumbnail (delivery.toml [catalog]
   thumbnail_cycle_transition; web/player/09-gallery-events.js
   showNextGalleryPoster). Transforms and opacity only — the phone's graphics
   chip animates them without layout work. The thumbnail frame
   (.gallery-card-thumbnail-wrap) is position: relative + overflow: hidden, so
   slides are clipped to the card. */
:root {
  --thumbnail-transition-duration: 450ms;
  --thumbnail-page-perspective: 900px;
}

/* fade: out through .gallery-thumbnail's opacity transition (app.css), swapped,
   back in. */
.gallery-thumbnail.is-loaded.is-thumbnail-fading {
  opacity: 0;
}

/* The next thumbnail, only while slide / page runs. Below the badges (z 2–3). */
.gallery-card-thumbnail-wrap .gallery-thumbnail-incoming {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* slide: old out to the left, new in from the right, together. */
.gallery-card-thumbnail-wrap .gallery-thumbnail-incoming.is-thumbnail-sliding-in {
  z-index: 1;
  animation: thumbnail-slide-in var(--thumbnail-transition-duration) ease-in-out both;
}
.gallery-thumbnail.is-thumbnail-sliding-out {
  animation: thumbnail-slide-out var(--thumbnail-transition-duration) ease-in-out both;
}
@keyframes thumbnail-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes thumbnail-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* page: the old thumbnail turns away on its left edge, the new one is
   underneath (incoming stays at z-index 0 behind it). */
.gallery-thumbnail.is-thumbnail-turning {
  position: relative;
  z-index: 1;
  transform-origin: left center;
  backface-visibility: hidden;
  animation: thumbnail-page-turn var(--thumbnail-transition-duration) ease-in both;
}
@keyframes thumbnail-page-turn {
  from { transform: perspective(var(--thumbnail-page-perspective)) rotateY(0deg); }
  to { transform: perspective(var(--thumbnail-page-perspective)) rotateY(-100deg); }
}