.gap-3 {
    gap: 0rem;
  }
          html, body {
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
    
      html::-webkit-scrollbar,
      body::-webkit-scrollbar {
        display: none;   
      }
  
      .icon { width: 20px; height: 20px; }
      .text-shadow {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
      }
  
      @media (max-width: 640px) {
        .icon {
          width: 16px;
          height: 16px;
        }
        .btn {
          font-size: 14px;
          padding: 8px 12px;
        }
      }

/* Lazy loading style */
.swiper-slide img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Add transformation for hardware acceleration */
.swiper-slide {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Initially hide the elements for animation */
.slide-content {
  opacity: 0;
  transform: translateY(20px); /* Position elements slightly below */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth fade and slide-up */
}

/* When the element becomes visible (will be added via JS) */
.slide-content.visible {
  opacity: 1;
  transform: translateY(0); /* Reset the position */
}

/* Optional: Add spacing between elements */
.text-container {
  margin-bottom: 10px;
}

.swiper-slide {
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
}
.swiper-slide-active {
  transform: scale(1);
}
.swiper-slide-next,
.swiper-slide-prev {
  transform: scale(0.95);
}

.swiper-slide {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.slide-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-content.visible {
  opacity: 1;
  transform: translateY(0);
}

#poster-backdrop-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.5);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

body {
  background-color: #000; /* Optional dark base */
}

body.fade-in-bg {
  animation: fadeInBg 0.5s ease-in-out forwards;
}

@keyframes fadeInBg {
  from {
    opacity: 0.5;
    background-size: 110%;
  }
  to {
    opacity: 1;
    background-size: cover;
  }
}

body {
  transition: background-image 0.5s ease-in-out, background-size 0.5s ease-in-out;
}

/* Use CSS variable to set dynamic image */
body::before {
  background-image: var(--backdrop-url);
}

body.show-backdrop::before {
  opacity: 1;
}

#shudder-backdrop-blur {
  position: absolute;
  inset: 0;
  z-index: 0; /* Behind the content */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#marvel-backdrop-blur {
    position: absolute;
  inset: 0;
  z-index: 0; /* Behind the content */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#paramount-backdrop-blur {
  position: absolute;
  inset: 0;
  z-index: 0; /* Behind the content */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#disney-backdrop-blur {
    position: absolute;
  inset: 0;
  z-index: 0; /* Behind the content */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#amazon-backdrop-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#shudder-backdrop-blur {
    position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#cartoon-backdrop-blur {
      position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}

#tubi-backdrop-blur {
      position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.4);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
  pointer-events: none;
}