/* ==========================================================================
   MODALS (Detail Modal Engine, Smooth Scroll & Performance Optimizations)
   ========================================================================== */

#modal-scroll-body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  will-change: transform, scroll-position;
}

#modal-sheet-box {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  transform: translateY(8vh) scale(0.96);
  transform-origin: bottom center;
  will-change: transform, opacity, max-width, border-top-left-radius, border-top-right-radius;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #090a0d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-top-left-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-top-right-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  #modal-sheet-box {
    max-width: 1024px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}

#modal-sheet-box.fullscreen {
  max-width: 100vw;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  transform: translateY(0) scale(1);
}

/* Custom Minimal Scrollbar for Modal Inner Content */
#modal-scroll-body::-webkit-scrollbar {
  width: 6px;
}

#modal-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}

#modal-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

#modal-scroll-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Hardware-Accelerated Shimmer Effect */
.shimmer-pulse {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.shimmer-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translate3d(-100%, 0, 0);
  animation: smartSkeletonShimmer 1.6s infinite linear;
  pointer-events: none;
}

/* Content Fade In Animation */
@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: content-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* PC LAYOUT: Expand details container outwards when fullscreen */
#modal-sheet-box .max-w-5xl {
  max-width: 1024px;
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#modal-sheet-box.fullscreen .max-w-5xl {
  max-width: 1400px;
}

/* ==========================================================================
   FANTOMTV PREMIUM EMBEDDED PLAYER CONNECTING LOADER
   ========================================================================== */

@keyframes loaderCircle {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 6px 12px 0 #38bdf8 inset,
      0 12px 18px 0 #005dff inset,
      0 36px 36px 0 #1e40af inset,
      0 0 3px 1.2px rgba(56, 189, 248, 0.3),
      0 0 6px 1.8px rgba(0, 93, 255, 0.2);
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 6px 12px 0 #60a5fa inset,
      0 12px 6px 0 #0284c7 inset,
      0 24px 36px 0 #005dff inset,
      0 0 3px 1.2px rgba(56, 189, 248, 0.3),
      0 0 6px 1.8px rgba(0, 93, 255, 0.2);
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 6px 12px 0 #4dc8fd inset,
      0 12px 18px 0 #005dff inset,
      0 36px 36px 0 #1e40af inset,
      0 0 3px 1.2px rgba(56, 189, 248, 0.3),
      0 0 6px 1.8px rgba(0, 93, 255, 0.2);
  }
}

@keyframes loaderLetter {
  0%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.15);
  }
  40% {
    opacity: 0.7;
    transform: translateY(0);
  }
}

.animate-loaderCircle {
  animation: loaderCircle 5s linear infinite;
}

.animate-loaderLetter {
  animation: loaderLetter 3s infinite;
}

.shine-text {
  background: linear-gradient(90deg, #64748b 0%, #ffffff 50%, #64748b 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textShine 2.5s linear infinite;
}

@keyframes textShine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}