* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.obs-overlay-body,
html.obs-overlay-html {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background-color: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.overlay-container {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
  perspective: 1200px;
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  overflow: hidden;
}

.overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-layer.layer-active {
  display: block;
  opacity: 1;
  transform: none;
  z-index: 2;
}

.overlay-layer.layer-hidden {
  display: none;
  opacity: 0;
  z-index: 1;
}

/* ===================================================
   TRANSITION KEYFRAME ANIMATIONS
=================================================== */

/* 1. FADE */
.anim-fade-in {
  display: block !important;
  animation: keyframe-fade-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
.anim-fade-out {
  display: block !important;
  animation: keyframe-fade-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes keyframe-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 2. SLIDE LEFT (Move towards left: enters from right 100%, exits to left -100%) */
.anim-slide-left-in {
  display: block !important;
  animation: keyframe-slide-left-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
.anim-slide-left-out {
  display: block !important;
  animation: keyframe-slide-left-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-slide-left-in {
  0% { transform: translate3d(100%, 0, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes keyframe-slide-left-out {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(-100%, 0, 0); opacity: 0; }
}

/* 3. SLIDE RIGHT (Move towards right: enters from left -100%, exits to right 100%) */
.anim-slide-right-in {
  display: block !important;
  animation: keyframe-slide-right-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
.anim-slide-right-out {
  display: block !important;
  animation: keyframe-slide-right-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-slide-right-in {
  0% { transform: translate3d(-100%, 0, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes keyframe-slide-right-out {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(100%, 0, 0); opacity: 0; }
}

/* 4. SLIDE UP (Move upwards: enters from bottom 100%, exits to top -100%) */
.anim-slide-up-in {
  display: block !important;
  animation: keyframe-slide-up-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
.anim-slide-up-out {
  display: block !important;
  animation: keyframe-slide-up-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-slide-up-in {
  0% { transform: translate3d(0, 100%, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes keyframe-slide-up-out {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(0, -100%, 0); opacity: 0; }
}

/* 5. SLIDE DOWN (Move downwards: enters from top -100%, exits to bottom 100%) */
.anim-slide-down-in {
  display: block !important;
  animation: keyframe-slide-down-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
.anim-slide-down-out {
  display: block !important;
  animation: keyframe-slide-down-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-slide-down-in {
  0% { transform: translate3d(0, -100%, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes keyframe-slide-down-out {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}

/* 6. ZOOM */
.anim-zoom-in {
  display: block !important;
  animation: keyframe-zoom-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
.anim-zoom-out {
  display: block !important;
  animation: keyframe-zoom-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-zoom-in {
  0% { transform: scale(0.35); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes keyframe-zoom-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 7. 3D FLIP */
.anim-flip-in {
  display: block !important;
  animation: keyframe-flip-in var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
  backface-visibility: hidden;
}
.anim-flip-out {
  display: block !important;
  animation: keyframe-flip-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
  backface-visibility: hidden;
}
@keyframes keyframe-flip-in {
  0% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; }
  100% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}
@keyframes keyframe-flip-out {
  0% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
  100% { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
}

/* 8. BOUNCE / POP */
.anim-bounce-in {
  display: block !important;
  animation: keyframe-bounce-in var(--trans-duration, 0.6s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 2;
}
.anim-bounce-out {
  display: block !important;
  animation: keyframe-fade-out var(--trans-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 1;
}
@keyframes keyframe-bounce-in {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}