/* Cineverse home media-card performance layer */

@keyframes cineHomeCardReveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.mobile-card {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 1px 230px;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease,
    border-color .2s ease;
}

.mobile-card img {
  transform: translate3d(0, 0, 0) scale(1.001);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

.mobile-card:active {
  transform: translate3d(0, 1px, 0) scale(.985) !important;
}

@supports (animation-timeline: view()) {
  .mobile-card {
    animation: cineHomeCardReveal linear both;
    animation-timeline: view(block);
    animation-range: entry 0% entry 32%;
  }
}

@media (hover: hover) {
  .mobile-card:hover img {
    transform: translate3d(0, 0, 0) scale(1.035);
    filter: saturate(1.04);
  }
}

/* Details page: remove the red ambient glow while preserving the backdrop image. */
.gpu-layer > div:has(+ header) {
  background: #07090D !important;
}

@media (max-width: 768px) {
  .mobile-card {
    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: 1px 200px;
  }
  .mobile-card img { transition-duration: .3s; }

  /* Details page: keep Trailer beside Watchlist instead of wrapping below it. */
  .gpu-layer header div:has(> a[href*="youtube.com"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px !important;
    align-items: center !important;
  }

  .gpu-layer header div:has(> a[href*="youtube.com"]) > :first-child {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .gpu-layer header div:has(> a[href*="youtube.com"]) > :nth-child(2),
  .gpu-layer header div:has(> a[href*="youtube.com"]) > a[href*="youtube.com"] {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-card { animation: none !important; transition: none !important; }
  .mobile-card img { transition: none !important; }
}