/* 
 * Performance Optimizations - GPU-Accelerated Animations
 * Fixes non-composited animations for mobile performance
 * 
 * Problem: Animating background-color, color, padding, borders triggers paint on every frame
 * Solution: Use transform, opacity, and will-change for hardware acceleration
 */

/* ===========================================
 * CRITICAL: Override Bootstrap & custom transitions
 * Only allow transform and opacity for GPU compositing
 * =========================================== */

/* Force all buttons/links to only use composited transitions */
.btn,
.hero-btn,
.hero-btn-primary,
.hero-btn-secondary,
.btn-primary,
.btn-secondary,
.btn-outline-light,
.btn-outline-primary,
.btn-premium,
.btn-premium-outline,
.nav-link,
.nav-link-btn,
.navbar-toggler,
.footer-social-link,
.premium-banner-close,
.form-control,
a[href] {
  /* Override Bootstrap's 'transition: all' with GPU-only properties */
  transition: transform 0.15s ease, opacity 0.15s ease !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Override Bootstrap form-control transitions */
.form-control,
.form-control:focus,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"] {
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease !important;
  /* Note: box-shadow can be composited when used with will-change */
}

/* Hero CTA cluster - smooth GPU-accelerated transitions */
.hero-cta,
.hero-cta-cluster,
.hero-cta-inline {
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  will-change: transform, opacity;
}

/* Hero search panel - smooth open/close */
.hero-search-panel {
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  will-change: transform, opacity;
}

/* Navbar - only animate opacity/transform */
.navbar,
.nav-glass {
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Footer links */
.footer-nav-list a,
.footer-nav a,
footer a {
  transition: opacity 0.15s ease !important;
}

/* Search input - allow focus transitions */
#heroSearchInput,
.search-input {
  transition: box-shadow 0.15s ease, opacity 0.15s ease !important;
}

/* Remove all non-composited animations from these specific elements flagged by Lighthouse */
button#ctaExplore,
button#ctaBrowse,
button#heroSearchClose,
button#toggleTheme,
a#loginLink,
a#registerLink,
a.btn-premium,
a.btn-premium-outline,
.premium-banner-close {
  transition: transform 0.12s ease, opacity 0.12s ease !important;
}

/* ===========================================
 * GPU Compositing Layer Hints
 * =========================================== */

/* Enable GPU compositing for interactive elements */
.btn,
.hero-btn {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Replace color transitions with opacity overlays */
.btn,
.hero-btn {
  position: relative;
  overflow: hidden;
}

.btn::before,
.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  will-change: opacity;
}

.btn:hover::before,
.hero-btn:hover::before,
.btn:focus-visible::before,
.hero-btn:focus-visible::before {
  opacity: 1;
}

/* Optimize button hover with scale instead of background-color */
.btn:hover,
.hero-btn:hover {
  transform: translateZ(0) scale(1.02);
  transition: transform 0.2s ease;
}

.btn:active,
.hero-btn:active {
  transform: translateZ(0) scale(0.98);
  transition: transform 0.1s ease;
}

/* Nav links - use transform for hover */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.2s ease;
  will-change: width;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 80%;
}

/* Footer social links - use opacity overlay */
.footer-social-link {
  position: relative;
  overflow: hidden;
}

.footer-social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: opacity;
}

.footer-social-link:hover::before {
  opacity: 1;
}

/* Navbar background - remove backdrop-filter if causing jank */
@media (max-width: 768px) {
  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(13, 13, 13, 1) !important;
  }
}

/* Disable animations during page load */
.loading *,
.loading *::before,
.loading *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* ===========================================
 * Hero Slideshow Fix
 * Use CSS cross-fade approach for smoother transitions
 * The heroSlideshow animation in style.css handles the image rotation
 * =========================================== */

/* Enable GPU compositing for the hero background */
body.home-page header.hero .hero-card::before {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Let the heroSlideshow animation from style.css run */
}

/* Remove background-image animation, use transform only */
.hero-card::before {
  will-change: opacity, transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-card::before {
    animation: none !important;
  }
}

/* Touch optimization - remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn:hover::before,
  .hero-btn:hover::before,
  .nav-link:hover::after,
  .footer-social-link:hover::before {
    opacity: 0;
  }
  
  .btn:hover,
  .hero-btn:hover {
    transform: translateZ(0) scale(1);
  }
}

/* Improve scroll performance */
* {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Container query for modern browsers */
@supports (contain: layout style paint) {
  .hero-card,
  .series-tile,
  .card {
    contain: layout style paint;
  }
}

/* Avoid layout thrashing */
img,
video {
  content-visibility: auto;
}

/* INP (Interaction to Next Paint) Optimizations */

/* Optimize button tap targets for touch */
.btn,
.hero-btn,
button[type="button"],
button[type="submit"] {
  touch-action: manipulation; /* Removes 300ms tap delay */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
}

/* Prevent accidental clicks during scroll */
.series-scroll,
.carousel-wrap {
  touch-action: pan-x pan-y;
}

/* Fast click feedback with scale transform (GPU-accelerated) */
.btn:active,
.hero-btn:active,
button:active,
a:active {
  transform: translateZ(0) scale(0.96);
  transition: transform 0.05s ease-out;
}

/* Optimize modal interactions */
.modal {
  will-change: contents;
}

.modal.show {
  will-change: auto;
}

/* Reduce input lag */
input,
textarea,
select {
  touch-action: manipulation;
}

/* Optimize hover states - only show on non-touch devices */
@media (hover: hover) {
  .series-tile:hover,
  .card:hover {
    transform: translateY(-4px);
    transition: transform 0.15s ease-out;
  }
}

/* Optimize click targets - ensure minimum 44x44px */
.btn-icon,
.carousel-btn,
button[aria-label] {
  min-width: 44px;
  min-height: 44px;
}

/* Cursor feedback for interactive elements */
.series-tile,
.card.series,
[role="button"],
[data-series-id],
.search-item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Prevent layout shift during loading */
.series-tile img,
.card img {
  aspect-ratio: 2/3;
  object-fit: cover;
}

/* ===========================================
 * LAZY SECTION RENDERING
 * Dramatically improves fast-scroll performance
 * =========================================== */

/* Content-visibility for off-screen sections - browser skips painting */
#genresRow {
  content-visibility: auto;
  contain-intrinsic-size: auto 2000px; /* Estimated height to prevent scroll jump */
}

/* Each genre block gets its own content-visibility */
#genresRow > .col-12 {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px; /* Height of one genre carousel */
}

/* Lazy placeholder skeleton for unloaded sections */
.genre-section-placeholder {
  min-height: 280px;
  background: linear-gradient(90deg, var(--bg-card, #151515) 0%, var(--bg-surface, #1a1a1a) 50%, var(--bg-card, #151515) 100%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

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

/* Fade-in when lazy section becomes visible */
.genre-section-lazy {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.genre-section-lazy.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce animation work on off-screen carousels */
.series-scroll {
  contain: layout style;
}

/* Optimize carousel images */
.series-tile-cover {
  content-visibility: auto;
  contain-intrinsic-size: 200px 300px;
}

/* Disable animations for off-screen elements */
.series-tile:not(:hover) .series-tile-overlay {
  will-change: auto;
}

/* Fast scroll mode - reduce visual complexity */
@media (prefers-reduced-motion: reduce), (update: slow) {
  .genre-section-lazy {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  #genresRow {
    contain-intrinsic-size: auto 5000px;
  }
}

/* ===========================================
 * Tab Panel Switching - Prevent Scroll Jump
 * =========================================== */

/* Ensure tab buttons don't have focus outline that causes layout shift */
.episode-tabs .tab-btn {
  outline-offset: -2px;
}

.episode-tabs .tab-btn:focus {
  outline: none;
  box-shadow: none;
}

.episode-tabs .tab-btn:focus-visible {
  outline: 2px solid rgba(111, 66, 193, 0.5);
  outline-offset: 2px;
}

/* Prevent layout shift when switching panels */
.episode-panel-pane {
  position: relative;
}

.episode-panel-pane.hidden-tab,
.episode-panel-pane.d-none {
  display: none !important;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Video view toggle button styling */
#videoViewToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

#videoViewToggle:hover {
  background: rgba(111, 66, 193, 0.15);
  color: #a78bfa;
}

#videoViewToggle:active {
  transform: scale(0.96);
}