/* ======================================================
   TRANSITIONS
   Effects bind to each .slide-layer via data-effect so restoring
   #stage data-transition (HUD picker) cannot retrigger mid-animation.
   Direction uses #stage.going-prev for prev variants.
   ====================================================== */

/* ---- 1. FADE ---- */
.slide-layer[data-effect="fade"].slide-out {
  animation: fade-out 0.7s ease forwards;
}
.slide-layer[data-effect="fade"].slide-in {
  animation: fade-in 0.7s ease forwards;
}
@keyframes fade-out { from { opacity: 1; } to   { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to   { opacity: 1; } }

/* ---- 2. SLIDE (horizontal push) ---- */
.slide-layer[data-effect="slide"].slide-out {
  animation: slide-out-left 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
.slide-layer[data-effect="slide"].slide-in {
  animation: slide-in-right 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
#stage.going-prev .slide-layer[data-effect="slide"].slide-out {
  animation: slide-out-right 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
#stage.going-prev .slide-layer[data-effect="slide"].slide-in {
  animation: slide-in-left 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes slide-out-left  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes slide-in-right  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes slide-in-left   { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ---- 3. ZOOM (reveal.js style) ---- */
.slide-layer[data-effect="zoom"].slide-out {
  animation: zoom-out 0.65s ease forwards;
}
.slide-layer[data-effect="zoom"].slide-in {
  animation: zoom-in 0.65s ease forwards;
}
@keyframes zoom-out {
  from { opacity: 1; transform: scale(1);   }
  to   { opacity: 0; transform: scale(0.75); }
}
@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ---- 4. ROTATE (3D Y-axis door swing) ---- */
.slide-layer[data-effect="rotate"].slide-out {
  transform-origin: left center;
  animation: rotate-out 0.7s ease-in forwards;
}
.slide-layer[data-effect="rotate"].slide-in {
  transform-origin: right center;
  animation: rotate-in 0.7s ease-out forwards;
}
#stage.going-prev .slide-layer[data-effect="rotate"].slide-out {
  transform-origin: right center;
  animation: rotate-out-r 0.7s ease-in forwards;
}
#stage.going-prev .slide-layer[data-effect="rotate"].slide-in {
  transform-origin: left center;
  animation: rotate-in-r 0.7s ease-out forwards;
}
@keyframes rotate-out   { from { opacity: 1; transform: rotateY(0deg); }    to { opacity: 0; transform: rotateY(-90deg); } }
@keyframes rotate-in    { from { opacity: 0; transform: rotateY(90deg); }   to { opacity: 1; transform: rotateY(0deg);   } }
@keyframes rotate-out-r { from { opacity: 1; transform: rotateY(0deg); }    to { opacity: 0; transform: rotateY(90deg);  } }
@keyframes rotate-in-r  { from { opacity: 0; transform: rotateY(-90deg); }  to { opacity: 1; transform: rotateY(0deg);   } }

/* ---- 5. CUBE (zoom-out, 3D cube rotate, zoom-in) ---- */
/* Perspective on .cube-root (outside scale). preserve-3d on every layer - required for iPad Safari. */
.cube-root {
  position: absolute;
  inset: 0;
  perspective: var(--cube-perspective);
  -webkit-perspective: var(--cube-perspective);
  perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.cube-zoom {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.cube-wrapper {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.cube-wrapper > .slide-layer {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cube-face-front {
  transform: rotateY(0deg) translateZ(var(--cube-depth));
}
.cube-face-right {
  transform: rotateY(90deg) translateZ(var(--cube-depth));
}
.cube-face-left {
  transform: rotateY(-90deg) translateZ(var(--cube-depth));
}
@keyframes cube-next {
  0%   { transform: rotateY(0deg); }
  20%  { transform: rotateY(0deg); }
  80%  { transform: rotateY(-90deg); }
  100% { transform: rotateY(-90deg); }
}
@keyframes cube-prev {
  0%   { transform: rotateY(0deg); }
  20%  { transform: rotateY(0deg); }
  80%  { transform: rotateY(90deg); }
  100% { transform: rotateY(90deg); }
}

/* ---- 6. GLIDE (slide + blur) ---- */
.slide-layer[data-effect="glide"].slide-out {
  animation: glide-out 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
.slide-layer[data-effect="glide"].slide-in {
  animation: glide-in 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
#stage.going-prev .slide-layer[data-effect="glide"].slide-out {
  animation: glide-out-r 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
#stage.going-prev .slide-layer[data-effect="glide"].slide-in {
  animation: glide-in-r 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes glide-out   { from { opacity:1; filter:blur(0); transform:translateX(0);     } to { opacity:0.2; filter:blur(8px); transform:translateX(-8%); } }
@keyframes glide-in    { from { opacity:0; filter:blur(6px); transform:translateX(8%);  } to { opacity:1;   filter:blur(0);   transform:translateX(0);   } }
@keyframes glide-out-r { from { opacity:1; filter:blur(0); transform:translateX(0);     } to { opacity:0.2; filter:blur(8px); transform:translateX(8%);  } }
@keyframes glide-in-r  { from { opacity:0; filter:blur(6px); transform:translateX(-8%); } to { opacity:1;   filter:blur(0);   transform:translateX(0);   } }