html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000;
}

#slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide.incoming {
  z-index: 2;
}

/* Keyframes */
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-right {
  from { opacity: 1; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-left {
  from { opacity: 1; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-up {
  from { opacity: 1; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoom-out {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Transition utility classes */
.t-fade {
  animation-name: fade;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.t-slide-right {
  animation-name: slide-right;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.t-slide-left {
  animation-name: slide-left;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.t-slide-up {
  animation-name: slide-up;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.t-zoom-in {
  animation-name: zoom-in;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.t-zoom-out {
  animation-name: zoom-out;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}