/* ------------------------ */
/*        FILMTV           */
/* ------------------------ */

.filmtv-section {
  position: relative;
  height: 100vh;
  width: 100%;
  /* overflow: hidden; */
  perspective: 1600px;
  display: block;
    touch-action: pan-y; /* Crucial: Allows vertical page scroll, blocks horizontal */
    overflow: hidden;    /* Keeps posters from creating a horizontal scrollbar */

}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ------------------------ */
/*        POSTERS           */
/* ------------------------ */

.poster {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 260px;
  height: 390px;

  transform-origin: center;
  will-change: transform;

  margin: 0;
  padding: 0;

  transform-style: preserve-3d;
  /* transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0.5s; */
}

/* image */
.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border-radius: 10px;

  backface-visibility: hidden;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.poster {
  opacity: 1 !important;
  filter: none !important;
}

.poster * {
  opacity: 1 !important;
}

/* ------------------------ */
/*   ACTIVE STATE ONLY      */
/* ------------------------ */

.poster.active {
  z-index: 999;
}

/* ------------------------ */
/*   REFLECTION (OPTIONAL)  */
/* ------------------------ */

.poster::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;

  width: 100%;
  height: 100%;

  border-radius: 10px;

  background-image: url(""); /* will be set via JS */
  background-size: cover;
  background-position: center;

  transform: scaleY(-1);

  opacity: 0.10;
  filter: blur(2px);

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    transparent 75%
  );

  pointer-events: none;
}

/* ------------------------ */
/*   SAFETY RESET           */
/* ------------------------ */

.carousel,
.carousel-track,
.filmtv-section {
  transform: none !important;
}

.poster .meta {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

/* ONLY active (center) poster shows meta */
.poster.active .meta {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(1px);
  transition: opacity 220ms ease, transform 220ms ease;
}