<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <!-- Deferred Google Analytics - loads after critical resources -->
    <script>
      // Minimal gtag stub for early tracking
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      // Defer GA loading until after critical resources
      window.addEventListener('load', function() {
        // Only load GA after page is fully loaded
        setTimeout(function() {
          var script = document.createElement('script');
          script.async = true;
          script.src = 'https://www.googletagmanager.com/gtag/js?id=G-GE9WY9C4KE';
          script.onload = function() {
            gtag('config', 'G-GE9WY9C4KE', {
              send_page_view: true,
              debug_mode: window.location.hostname === 'localhost'
            });
          };
          document.head.appendChild(script);
        }, 100);
      });
    </script>
    
    <!-- Critical preconnect hints - must be early -->
    <link rel="preconnect" href="https://www.googletagmanager.com">
    <link rel="preconnect" href="https://www.google-analytics.com">
    <link rel="preconnect" href="https://image.tmdb.org">
    <link rel="preconnect" href="https://api.themoviedb.org">
    <link rel="dns-prefetch" href="https://www.omdbapi.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    
    <!-- HTTP Link header equivalent -->
    <meta http-equiv="Link" content="<https://image.tmdb.org>; rel=preconnect">
    <meta http-equiv="Link" content="<https://api.themoviedb.org>; rel=preconnect">
    
    <!-- Inlined Security and Performance Scripts -->
    <script>
      // Trusted Types Policy for DOM XSS Protection
      if (window.trustedTypes && trustedTypes.createPolicy) {
        trustedTypes.createPolicy('default', {
          createHTML: (string) => string,
          createScript: (string) => string,
          createScriptURL: (string) => {
            if (string.startsWith('/') || string.startsWith(window.location.origin)) {
              return string;
            }
            throw new Error('Untrusted script URL: ' + string);
          }
        });
      }

      // Multiple preconnect strategies
      (function() {
        const origins = ['https://image.tmdb.org', 'https://api.themoviedb.org'];
        
        // Strategy 1: Insert at beginning
        origins.forEach(origin => {
          const link = document.createElement('link');
          link.rel = 'preconnect';
          link.href = origin;
          document.head.insertBefore(link, document.head.firstChild);
        });
        
        // Strategy 2: Force connection with fetch
        origins.forEach(origin => {
          fetch(origin, { method: 'HEAD', mode: 'no-cors' }).catch(() => {});
        });
        
        // Strategy 3: Warm up connection with actual endpoint
        fetch('https://image.tmdb.org/t/p/w92/', { method: 'HEAD', mode: 'no-cors' }).catch(() => {});
      })();

      // Font loading detection and progressive enhancement
      (function() {
        // Convert preload links to stylesheets when DOM is ready
        function loadFonts() {
          const preloadLinks = ['inter-preload', 'montserrat-preload', 'cofo-preload'];
          
          preloadLinks.forEach(id => {
            const preloadLink = document.getElementById(id);
            if (preloadLink) {
              const styleLink = document.createElement('link');
              styleLink.rel = 'stylesheet';
              styleLink.href = preloadLink.href;
              document.head.appendChild(styleLink);
            }
          });
        }
        
        // Load fonts when DOM is ready
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', loadFonts);
        } else {
          loadFonts();
        }
        
        // Check if fonts are already loaded (cached)
        if (document.fonts && document.fonts.check) {
          if (document.fonts.check('1rem CoFo Sans') && document.fonts.check('800 1rem Montserrat')) {
            document.documentElement.classList.add('fonts-loaded');
          } else {
            // Wait for fonts to load
            document.fonts.ready.then(() => {
              document.documentElement.classList.add('fonts-loaded');
            });
          }
        }
        
        // Preload font files asynchronously after page load
        if (window.requestIdleCallback) {
          window.requestIdleCallback(() => {
            const fontUrls = [
              'https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2',
              'https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5nw.woff2'
            ];
            
            fontUrls.forEach(url => {
              const link = document.createElement('link');
              link.rel = 'prefetch';
              link.href = url;
              link.as = 'font';
              link.type = 'font/woff2';
              link.crossOrigin = 'anonymous';
              document.head.appendChild(link);
            });
          });
        }
      })();
    </script>
    
    <!-- Favicon and App Icons -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Primary Meta Tags -->
    <title>WhatFilm - Discover Your Next Favorite Movie</title>
    <meta name="title" content="WhatFilm - Discover Your Next Favorite Movie" />
    <meta name="description" content="Find personalized movie recommendations with advanced filters. Discover films by genre, streaming service, ratings, and more. Your next favorite movie is just a click away." />
    <meta name="keywords" content="movie recommendations, film discovery, streaming movies, movie finder, random movie generator, what to watch, netflix movies, amazon prime movies, hulu movies, disney plus movies, movie suggestions, hidden gem movies, underrated movies, best movies to watch, movie night ideas, imdb top movies, rotten tomatoes movies, metacritic movies, action movies, comedy movies, horror movies, drama movies, sci-fi movies, romance movies, thriller movies, documentary movies, movie recommendation app, personalized movie suggestions, advanced movie filters, movie discovery platform" />
    <meta name="author" content="WhatFilm" />
    <meta name="robots" content="index, follow" />
    <!-- Canonical URL will be set dynamically by React Helmet -->
    
    <!-- Security Meta Tags -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
    
    <!-- Open Graph and Twitter meta tags will be set dynamically by React Helmet -->
    <meta property="og:site_name" content="WhatFilm" />
    <meta property="twitter:card" content="summary_large_image" />
    
    <!-- Additional SEO Meta Tags -->
    <meta name="theme-color" content="#1a1a1a" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="WhatFilm" />
    
    <!-- Inline critical CSS for above-the-fold content -->
    <style>
      /* Critical CSS for initial render - includes font fallbacks */
      :root {
        --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
        --bg: #1a1a1a;
        --text: #fff;
        --card-bg: #12151b;
        --card-border: #2a2f3a;
        --primary: #6366f1;
        --btn-bg: #1a1f29;
        --btn-border: #3a4252;
        --sk1: #2a2f3a;
        --sk2: #1e232d;
      }
      
      body { 
        margin: 0; 
        font-family: var(--font-fallback); 
        background: var(--bg); 
        color: var(--text);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
      }
      
      .app { 
        min-height: 100vh; 
        max-width: 1120px; 
        margin: 0 auto; 
        padding: 0.5rem;
      }
      
      .app-header { 
        display: grid; 
        grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
        align-items: center; 
        padding: 0.6rem 1rem; 
        background: rgba(26, 26, 26, 0.95); 
        backdrop-filter: blur(6px); 
        border-bottom: 1px solid var(--card-border);
        min-height: 60px;
        gap: 0.5rem 1rem;
      }
      
      .brand h1 { 
        margin: 0; 
        font-size: clamp(1.25rem, 1.2vw + 1rem, 1.8rem); 
        font-weight: 700;
        white-space: nowrap;
      }
      
      .nav { 
        display: inline-flex; 
        gap: 0.5rem; 
        align-items: center;
      }
      
      .nav-link { 
        color: var(--text); 
        text-decoration: none; 
        padding: 0.35rem 0.6rem; 
        border-radius: 0.6rem; 
        border: 1px solid transparent;
        white-space: nowrap;
        transition: all 0.2s;
      }
      
      .nav-link:hover { 
        background: rgba(255, 255, 255, 0.1); 
      }
      
      .loading-container { 
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center; 
        padding: 2rem; 
      }
      
      /* Filter actions - reserve space to prevent layout shifts */
      .filter-actions {
        min-height: 44px;
        height: 44px;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin: 0.75rem 1rem;
        width: 100%;
        box-sizing: border-box;
        contain: layout style size;
        overflow: hidden;
      }
      
      .btn-content {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 1.2em;
        transition: none;
      }
      
      .btn-primary .btn-content {
        min-width: 140px;
      }
      
      .btn-secondary .btn-content {
        min-width: 70px;
      }
      
      /* Reserve exact space for button text changes */
      .btn-primary .btn-content::before {
        content: "🎲 Randomize (R)";
        visibility: hidden;
        position: absolute;
        white-space: nowrap;
        font-weight: inherit;
        font-size: inherit;
        font-family: inherit;
      }
      
      /* Ensure primary buttons don't get too wide */
      .btn-primary {
        width: auto;
        contain: layout style;
      }
      
      /* Filter button should remain normal width */
      .btn-secondary[data-filter-button] {
        min-width: 80px; /* Just enough for "Filters" */
        contain: layout style;
      }
      
      .spinner {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
      }
      
      /* Provider logo stability */
      .provider-logo {
        height: 42px !important;
        width: 42px !important;
        object-fit: contain;
        aspect-ratio: 1/1;
        contain: layout style size;
        display: block;
      }
      
      /* LCP image optimization */
      .card > img {
        content-visibility: auto;
        contain-intrinsic-size: 200px 300px;
        aspect-ratio: 2/3;
        background: var(--sk1);
      }
      
      /* Chips container stability */
      .chips {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin: 0;
        min-height: 32px;
        align-items: flex-start;
        contain: layout style;
        width: 100%;
        box-sizing: border-box;
      }
      
      /* Filter actions container stability */
      .filter-actions {
        min-height: 44px;
        height: 44px;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        contain: layout style size;
        overflow: hidden;
      }
      
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.55rem;
        border-radius: 9999px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        color: var(--text);
        font-size: 0.9rem;
        white-space: nowrap;
        flex-shrink: 0;
        transition: none;
        contain: layout style;
      }
      
      .provider-logos {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        flex-wrap: wrap;
      }
      
      .btn {
        padding: 0.6rem 0.8rem;
        font-size: 1rem;
        background: var(--btn-bg);
        color: var(--text);
        border: 1px solid var(--btn-border);
        border-radius: 0.6rem;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: fit-content;
        white-space: nowrap;
      }
      
      .btn-primary {
        background: var(--primary);
        color: #fff;
        border-color: transparent;
        min-width: 160px;
        box-sizing: border-box;
        position: relative;
      }
      
      .btn-secondary {
        background: var(--btn-bg);
        border-color: var(--btn-border);
        min-width: 80px;
      }
      
      /* Skeleton loading */
      .skeleton-card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
        margin: 0.5rem 0;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 12px;
        min-height: 300px;
      }
      
      .skeleton {
        background: linear-gradient(90deg, var(--sk1) 25%, var(--sk2) 50%, var(--sk1) 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
      }
      
      @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }
      
      .skeleton-poster { width: 200px; height: 300px; border-radius: 0.8rem; }
      .skeleton-content { display: flex; flex-direction: column; gap: 0.75rem; }
      .skeleton-title { height: 2rem; width: 70%; }
      .skeleton-meta { height: 1rem; width: 50%; }
      .skeleton-text { height: 1rem; width: 100%; }
      .skeleton-text.short { width: 60%; }
      
      #root { min-height: 100vh; }
      
      /* Mobile responsive */
      @media (max-width: 720px) {
        .skeleton-card { 
          grid-template-columns: 1fr; 
          gap: 0.5rem; 
        }
        .skeleton-poster { 
          width: 100%; 
          height: auto; 
          aspect-ratio: 2/3; 
        }
        .app { padding: 0 0.75rem; }
        .filter-actions { margin: 0.75rem 0; }
      }
    </style>

    <!-- Structured Data - deferred -->
    <script type="application/ld+json" defer>
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "WhatFilm",
      "description": "Discover personalized movie recommendations with advanced filtering options",
      "url": "https://gleeful-fox-f5ee11.netlify.app/",
      "applicationCategory": "Entertainment",
      "operatingSystem": "Any",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Organization",
        "name": "WhatFilm"
      }
    }
    </script>
    
    <!-- Resource hints for better performance -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Load fonts asynchronously to prevent render blocking -->
    <link rel="preload" href="/fonts/inter.css" as="style" id="inter-preload">
    <link rel="preload" href="/fonts/montserrat.css" as="style" id="montserrat-preload">
    <link rel="preload" href="/fonts/cofo-sans.css" as="style" id="cofo-preload">
    
    <!-- Fallback for no-JS -->
    <noscript>
      <style>/* CoFo Sans font - Progressive enhancement, non-blocking */
@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5nw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa5pL7W0Q5nw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa-5L7W0Q5nw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Apply CoFo Sans font as progressive enhancement */
body, .app {
  font-family: 'CoFo Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
</style>
      <style>/* Montserrat ExtraBold font - For WhatFilm title */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Apply Montserrat ExtraBold to WhatFilm title */
.brand h1 {
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
}
</style>
      <style>/* CoFo Sans font - Modern, clean typeface */
@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CoFo Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
    </noscript>
    
    <!-- Font loading and performance optimization -->
    <script type="module" crossorigin src="/assets/index-BQmqtlGH.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-D8TcbYY7.js">
    <link rel="modulepreload" crossorigin href="/assets/helmet-RB_rc-r2.js">
    <style>:root{font-family:ui-sans-serif,system-ui,Arial;color-scheme:light;--bg: #ffffff;--text: #111111;--muted: #555555;--card-bg: #ffffff;--card-border: #eeeeee;--shadow: 0 6px 20px rgba(0,0,0,.06);--btn-bg: #f9f9f9;--btn-border: #cccccc;--primary: #4f46e5;--font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;--font-inter: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;--font-montserrat: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;--font-cofo: "CoFo Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;--radius: 12px;--shadow-lg: 0 12px 30px rgba(0,0,0,.1);--ring: rgba(99,102,241,.35);--track-bg: #e8e8e8;--range-bg: #b5d3ff;--thumb-bg: var(--primary);--thumb-border: #ffffff;--sk1: #f0f0f0;--sk2: #e6e6e6;--text-color: var(--text);--text-muted: var(--muted);--border-color: var(--card-border);--hover-bg: color-mix(in oklab, var(--card-bg) 92%, var(--text) 8% / 6%);--bg-secondary: var(--card-bg);--text-primary: var(--text);--text-secondary: var(--muted);--accent-color: var(--primary)}html{background:var(--bg)}html.dark{color-scheme:dark;--bg: #0f1115;--text: #e8e8e8;--muted: #a3a3a3;--card-bg: #12151b;--card-border: #2a2f3a;--shadow: 0 6px 20px rgba(0,0,0,.3);--btn-bg: #1a1f29;--btn-border: #3a4252;--track-bg: #2a2f3a;--range-bg: #2b6cb0;--thumb-bg: #2b6cb0;--thumb-border: #0f1115;--sk1: #2a2f3a;--sk2: #1e232d}.spinner{display:inline-block;width:14px;height:14px;margin-right:6px;border:2px solid rgba(0,0,0,.2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg,var(--sk1) 25%,var(--sk2) 50%,var(--sk1) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes sh{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-card{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1.5rem;margin:.5rem 0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-height:350px;height:350px;contain:layout style size;grid-template-rows:min-content}.skeleton-poster{width:200px;height:300px;border-radius:.8rem}.skeleton-content{display:flex;flex-direction:column;gap:.75rem;min-height:280px;contain:layout style}.skeleton-title{height:2rem;width:70%;margin-bottom:.25rem}.skeleton-meta{height:1rem;width:50%;margin-bottom:.5rem}.skeleton-ratings{height:28px;width:80%;margin-bottom:.75rem}.skeleton-actions{height:36px;width:100%;margin-top:.5rem}.skeleton-text{height:1rem;width:100%}.skeleton-text.short{width:60%}.loading-container{min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:0;min-height:40px;align-items:flex-start;contain:layout style size;width:100%;box-sizing:border-box;align-content:flex-start;overflow:visible}.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .55rem;border-radius:9999px;background:var(--card-bg);border:1px solid var(--card-border);color:var(--text);font-size:.9rem;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:none;contain:layout style;min-height:32px;height:32px;max-width:none;vertical-align:baseline}.chip:hover{background:color-mix(in oklab,var(--card-bg) 85%,var(--text) 15% / 3%)}.chip-x{font-weight:700;margin-left:2px}.toast-container{position:fixed;right:14px;bottom:14px;display:grid;gap:.5rem;z-index:1000}.toast{background:var(--card-bg);color:var(--text);border:1px solid var(--card-border);border-left:4px solid var(--primary);padding:.6rem .8rem;border-radius:.6rem;box-shadow:var(--shadow-lg)}.toast.success{border-left-color:var(--primary)}.watchlist-container,.watched-container,.ignorelist-container,.main-container{max-width:1200px;margin:2.5px auto 0;padding:0 20px 20px;position:relative;top:0}.donate-container{max-width:1200px;margin:0 auto;padding:20px}.donate-container h1{text-align:center;margin-bottom:1rem;color:var(--text)}.donate-container>p{text-align:center;color:var(--muted);margin-bottom:3rem;font-size:1.1rem;max-width:600px;margin-left:auto;margin-right:auto}.donation-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.donation-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:2rem;text-align:center;box-shadow:var(--shadow)}.donation-card h3{margin:0 0 1rem;color:var(--text)}.donation-card p{color:var(--muted);margin-bottom:1.5rem}.donation-btn{display:inline-block;text-decoration:none;min-width:200px}.donate-footer{text-align:center;padding-top:2rem;border-top:1px solid var(--card-border)}.donate-footer p{margin-bottom:1rem;color:var(--text)}.crypto-address{display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1px solid var(--card-border);border-radius:.5rem;padding:.75rem;margin-top:1rem}.crypto-address code{flex:1;font-family:Courier New,monospace;font-size:.85rem;word-break:break-all;background:transparent;border:none;color:var(--text)}.copy-btn{flex-shrink:0;padding:.5rem .75rem;font-size:.85rem}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-state h2{margin-bottom:10px;color:var(--text-primary)}.empty-state p{margin-bottom:20px}.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}.movie-card{background:var(--bg-secondary);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.movie-card:hover{transform:translateY(-2px)}.movie-poster{width:100%;height:200px;object-fit:cover}.movie-info{padding:15px}.movie-info h3{margin:0 0 5px;font-size:1.1em;color:var(--text-primary)}.movie-year{color:var(--text-muted);font-size:.9em;margin:0 0 10px}.movie-overview{font-size:.85em;color:var(--text-secondary);line-height:1.4;margin:0 0 15px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.movie-actions{display:flex;gap:10px;flex-wrap:wrap}.movie-actions .btn{flex:1;min-width:100px;font-size:.85em;padding:8px 12px}.nav-link.active{background:var(--accent-color);color:#fff;border-radius:4px}.similar-movies{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.similar-movies h3{margin-bottom:1rem;color:var(--text-color);font-size:1.2rem}.similar-movies-grid{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.similar-movie-item{flex:0 0 auto}.similar-movie-poster{width:200px;height:300px;object-fit:cover;border-radius:.8rem;box-shadow:var(--shadow);transition:opacity .3s ease,transform .3s ease;aspect-ratio:2/3;background:var(--card-bg)}.similar-movie-poster:hover{transform:scale(1.05)}.similar-movie-item:hover .similar-movie-poster{transform:scale(1.05);box-shadow:0 4px 12px #0003}.app.dark{color-scheme:dark;--bg: #0f1115;--text: #e8e8e8;--muted: #a3a3a3;--card-bg: #12151b;--card-border: #2a2f3a;--shadow: 0 6px 20px rgba(0,0,0,.3);--btn-bg: #1a1f29;--btn-border: #3a4252;--track-bg: #2a2f3a;--range-bg: #2b6cb0;--thumb-bg: #2b6cb0;--thumb-border: #0f1115;--sk1: #2a2f3a;--sk2: #1e232d}body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-cofo);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-y:auto}.fonts-loaded body,.fonts-loaded .app{font-family:var(--font-cofo)}html{background:var(--bg);margin:0;padding:0}#root{margin:0;padding:0}.app{background:var(--bg);color:var(--text)}h1{margin:0;font-size:clamp(1.25rem,1.2vw + 1rem,1.8rem)}h2{font-size:clamp(1.05rem,.8vw + .9rem,1.4rem);margin:0 0 .25rem}.app{max-width:1120px;margin:0 auto;padding:0;display:grid;gap:0;background:var(--bg);color:var(--text);min-height:100vh;overflow-y:visible;box-sizing:border-box}.app>*:not(.app-header):not(.card):not(.watchlist-container):not(.watched-container):not(.ignorelist-container):not(.main-container){padding:.75rem 1rem}.controls{display:grid;gap:.5rem;align-items:end}input,select,button{padding:.6rem .8rem;font-size:1rem;background:var(--btn-bg);color:var(--text);border:1px solid var(--btn-border);border-radius:.6rem;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .06s ease}button{cursor:pointer}.card{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1.5rem;margin:.5rem 0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);transition:transform .15s ease,box-shadow .15s ease;min-height:350px;contain:layout style;grid-template-rows:min-content}.card>:not(img){grid-column:2}.card:hover{transform:translateY(-2px)}.meta{color:#374151;font-size:.95rem;display:flex;gap:.8rem;flex-wrap:wrap}.card>img{width:200px;height:300px;object-fit:cover;border-radius:.8rem;display:block;margin:1.75rem 0;background:var(--sk1);transition:opacity .3s ease;aspect-ratio:2/3;box-shadow:var(--shadow);content-visibility:auto;contain-intrinsic-size:200px 300px}.card>img[loading]{opacity:0}.card>img.loaded{opacity:1}.links a{margin-right:.6rem;color:#3730a3;text-decoration:none}.links a:hover{text-decoration:underline}.title-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.25rem;flex-wrap:wrap;gap:.6rem;min-height:40px;contain:layout style}.title-section{flex:1}.details{display:flex;flex-direction:column;gap:.3rem}.card>.details{align-self:start;justify-content:flex-start;grid-column:2;grid-row:1}.details>p{margin:.2rem 0}.details>.meta{gap:.25rem;font-size:.9rem;color:var(--text-color)}.movie-ratings .rating-logo{font-size:1rem}.movie-ratings .rating-label{font-size:.8rem;color:var(--text-muted)}.movie-ratings .rating-value{font-weight:600}.movie-ratings{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;min-height:28px;contain:layout style;align-content:flex-start}.movie-ratings .rating-item{display:flex;align-items:center;gap:.4rem;min-height:24px;min-width:60px;vertical-align:baseline}.movie-title{margin:0;flex:1 1 auto;min-width:200px}.title-actions{display:flex;gap:.4rem;margin-left:auto;flex-wrap:nowrap;align-items:center;min-height:36px;contain:layout style}.trailer{margin-top:.8rem;width:min(480px,100%);aspect-ratio:16/9;border-radius:.6rem;overflow:hidden;background:#000;box-shadow:var(--shadow);margin-inline:auto}.trailer iframe{width:100%;height:100%;border:0;display:block}.provider-strip{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:.6rem;border-top:1px dashed var(--card-border);padding-top:1.5rem}.provider-strip-label{font-size:.75rem;color:var(--muted);margin-right:.5rem;white-space:nowrap}.provider-logos{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}.provider-logo{height:42px!important;width:42px!important;object-fit:contain;background:transparent;border:none;border-radius:8px;padding:0;box-shadow:none;display:block;aspect-ratio:1/1;contain:layout style size}.provider-link{position:relative;display:inline-flex;align-items:center}.provider-link:focus-visible .provider-logo{box-shadow:0 0 0 3px var(--ring),var(--shadow)}.provider-link:after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%) translateY(2px);background:var(--text);color:var(--bg);padding:4px 6px;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:5}.provider-link:before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);border:6px solid transparent;border-top-color:var(--text);opacity:0;transition:opacity .15s ease;z-index:5}.provider-link:hover:after,.provider-link:focus-visible:after{opacity:1;transform:translate(-50%) translateY(0)}.provider-link:hover:before,.provider-link:focus-visible:before{opacity:1}.controls.primary{grid-template-columns:repeat(5,minmax(0,1fr));width:calc(100% - 2rem)!important;margin:0 1rem!important}.controls.secondary{grid-template-columns:1.3fr 1.3fr auto auto auto;align-items:center;margin-top:.5rem}.row-span-all{grid-column:1 / -1}.filters-content{max-width:100%!important;overflow-x:hidden!important}.controls.primary{max-width:100%!important;overflow:hidden!important;box-sizing:border-box!important}.yr-wrap,.rt-wrap{width:60%!important;max-width:60%!important;overflow:visible!important;box-sizing:border-box!important;position:relative;margin:0 auto!important;padding:0 10px!important}.controls.primary .row-span-all{width:100%!important;max-width:100%!important;overflow:hidden!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important}.controls.primary>div:has(select)+div:has(input){margin-top:1rem!important}.controls.primary>div{margin-bottom:.5rem!important}.controls.primary>div:not(.section-label):not(.row-span-all){display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:100%!important}.controls.primary>div:not(.section-label):not(.row-span-all)>label{text-align:center!important;width:100%!important}.controls.primary>div:not(.section-label):not(.row-span-all)>input,.controls.primary>div:not(.section-label):not(.row-span-all)>select{width:80%!important;max-width:200px!important;text-align:center!important}.controls.primary>div:not(.section-label):not(.row-span-all)>.language-dropdown{width:80%!important;max-width:200px!important;margin:0 auto!important;text-align:center!important}.controls.secondary>div:not(.section-label):not(.row-span-all){display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:100%!important}.controls.secondary>div:not(.section-label):not(.row-span-all)>label{text-align:center!important;width:100%!important}.controls.secondary>div:not(.section-label):not(.row-span-all)>input,.controls.secondary>div:not(.section-label):not(.row-span-all)>select,.controls.secondary>div:not(.section-label):not(.row-span-all)>.language-dropdown,.controls.secondary>div:not(.section-label):not(.row-span-all)>.genre-dropdown,.controls.secondary>div:not(.section-label):not(.row-span-all)>.provider-dropdown{width:80%!important;max-width:200px!important;text-align:center!important}.language-dropdown,.genre-dropdown,.provider-dropdown{margin:0 auto!important;text-align:center!important}.language-dropdown>button,.genre-dropdown>button,.provider-dropdown>button{width:100%!important;text-align:center!important;justify-content:center!important}select{text-align:center!important;text-align-last:center!important}.section-label{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.25rem;padding-top:.35rem;border-top:1px dashed var(--border-color);text-align:center;display:flex;justify-content:center}input:focus,select:focus,button:focus{outline:none;box-shadow:0 0 0 3px var(--ring);border-color:var(--primary)}.btn{border-radius:.6rem;min-width:fit-content;white-space:nowrap}.btn-primary{background:var(--primary);color:#fff;border-color:transparent;min-width:160px;box-sizing:border-box;position:relative}.btn-primary:hover{filter:brightness(.98)}.btn-secondary{background:var(--btn-bg);border-color:var(--btn-border);min-width:80px}.btn-secondary:hover{background:#ececec}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover{background:#0000000d}.filter-actions{min-height:44px;height:44px;display:flex;gap:.5rem;align-items:center;width:100%;box-sizing:border-box;contain:layout style size;will-change:auto;overflow:hidden;position:relative;margin:0;padding:0}.btn-content{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:1.2em;transition:none;position:relative}.btn-primary .btn-content{min-width:140px}.btn-secondary .btn-content{min-width:70px}.btn-primary .btn-content:before{content:"🎲 Randomize (R)";visibility:hidden;position:absolute;white-space:nowrap;font-weight:inherit;font-size:inherit;font-family:inherit;top:0;left:0;right:0;pointer-events:none;z-index:-1}.btn-primary .btn-content:after{content:"Loading...";visibility:hidden;position:absolute;white-space:nowrap;font-weight:inherit;font-size:inherit;font-family:inherit;top:0;left:0;right:0;pointer-events:none;z-index:-1}.spinner{flex-shrink:0;width:14px;height:14px}.app-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--card-border);padding:.25rem max(1rem,calc((100vw - 1120px)/2));margin:0 calc(-50vw + 50%);width:100vw;max-width:100vw;left:0;display:grid;grid-template-columns:minmax(0,max-content) 1fr minmax(0,max-content);grid-template-areas:"brand search toggle";align-items:center;gap:.5rem 1rem;min-height:50px;height:50px;box-sizing:border-box}@media (min-width: 1400px){.app-header{padding:.25rem max(1rem,calc((100vw - 1320px)/2))}}.app-header .brand{grid-area:brand;min-width:0;display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap;overflow:visible}.app-header .brand h1{white-space:nowrap;font-family:var(--font-montserrat);font-weight:800;font-style:normal}.app-header .theme-toggle-btn{grid-area:toggle;justify-self:end;position:static;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:.6rem;padding:.6rem;cursor:pointer;transition:all .2s ease;min-width:44px;flex-shrink:0}.app-header .theme-toggle-btn:hover{background:var(--card-bg);border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);transform:scale(1.05)}.app-header .theme-toggle-btn .icon{font-size:1.2rem;line-height:1}.app-header .search{grid-area:search;justify-self:end;width:44px;min-width:44px;max-width:420px;overflow:visible;transition:width .3s ease}.app-header .search-input{width:100%;border-radius:9999px;padding-right:36px;background:var(--btn-bg);border-color:var(--btn-border);opacity:0;pointer-events:none;transition:opacity .3s ease}.app-header .search.expanded{width:300px}.app-header .search.expanded .search-input{opacity:1;pointer-events:auto}.app-header .search .search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;z-index:10}.nav{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap}.nav-link{color:var(--text);text-decoration:none;padding:.35rem .6rem;border-radius:.6rem;border:1px solid transparent;white-space:nowrap;transition:all .2s ease}.nav-link:hover{background:color-mix(in oklab,var(--card-bg) 85%,var(--text) 15% / 6%);border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.nav-link.active{background:var(--card-bg);border-color:var(--card-border);box-shadow:var(--shadow)}.rating-item{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .4rem;background:var(--card-bg);border:1px solid var(--card-border);border-radius:.4rem;font-size:.8rem;white-space:nowrap;min-height:24px;min-width:50px;box-sizing:border-box;contain:layout style}.rating-link{text-decoration:none;color:inherit;transition:all .2s ease;cursor:pointer}.rating-link:hover{background:color-mix(in oklab,var(--card-bg) 85%,var(--primary) 15%);border-color:var(--primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.rating-logo{font-size:.9rem}.rating-label{font-weight:500;color:var(--muted)}.rating-value{font-weight:600;color:var(--text)}.switch{position:relative;display:inline-block;width:48px;height:28px}.switch input{opacity:0;width:0;height:0}.switch .slider{position:absolute;inset:0;cursor:pointer;border-radius:9999px;background:var(--track-bg);border:1px solid var(--btn-border);transition:background .2s ease,border-color .2s ease}.switch .slider:before{content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%);width:22px;height:22px;border-radius:9999px;background:var(--btn-bg);border:1px solid var(--btn-border);box-shadow:0 1px 2px #0003;transition:transform .2s ease,background .2s ease,border-color .2s ease}.switch input:checked+.slider{background:var(--range-bg);border-color:var(--thumb-bg)}.switch input:checked+.slider:before{transform:translate(20px,-50%);background:var(--thumb-bg);border-color:var(--thumb-bg)}.search{position:relative;flex:1 1 420px;min-width:260px}.search-input{width:100%;padding-right:36px;box-sizing:border-box}.app-header .search-input{width:100%}.search-spinner{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card-bg);color:var(--text);border:1px solid var(--card-border);border-radius:.6rem;box-shadow:var(--shadow-lg);list-style:none;margin:0;padding:6px;z-index:9999;max-height:360px;overflow:auto}.suggest-item{display:flex;align-items:center;padding:.75rem;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background-color .2s}.suggest-item:hover,.suggest-item.is-active{background-color:var(--hover-bg)}.suggest-item .thumb{width:40px;height:60px;object-fit:cover;border-radius:4px;margin-right:.75rem;flex-shrink:0}.suggest-main{flex:1}.suggest-title{font-weight:500;color:var(--text-color);margin-bottom:.25rem}.suggest-meta{display:flex;align-items:center;gap:.75rem;margin-top:.25rem}.suggest-year{font-size:.875rem;color:var(--text-muted)}.suggest-ratings{display:flex;gap:.5rem;flex-wrap:wrap}.suggest-ratings .rating-item{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--text-muted)}.suggest-ratings .rating-logo{font-size:.75rem}.suggest-ratings .rating-value{font-weight:500}.language-dropdown{transition:border-color .2s ease}.language-dropdown:hover{border-color:var(--primary)!important}@media (max-width: 1250px){.app-header{grid-template-columns:1fr auto;grid-template-areas:"brand brand" "search toggle"}.app-header .search{width:100%;margin-right:0}.app-header .search-input{width:100%}}@media (max-width: 720px){body{margin:0}.app{padding:0 .75rem;max-width:100%}.app-header{padding:.4rem 0}.app-header h1{font-size:1.1rem}.toggle-row{padding:4px 8px}.toggle-text{display:none}.controls{grid-template-columns:1fr!important;gap:.6rem;align-items:stretch}.card{grid-template-columns:1fr;gap:.5rem}.card>:not(img){grid-column:1}.card>img{width:100%!important;height:auto!important;aspect-ratio:2/3!important;max-width:100%!important;object-fit:cover!important;display:block!important;visibility:visible!important;opacity:1!important;grid-column:1!important;grid-row:1!important;margin:1rem 0!important;order:-1!important;background:var(--sk1)!important}.card{display:flex!important;flex-direction:column!important}.card>:not(img){order:1!important}.filters-content{padding:.75rem!important}.controls.primary{max-width:100%!important;overflow:hidden!important}.yr-wrap,.rt-wrap{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important}.controls.primary .row-span-all{width:100%!important;max-width:100%!important;overflow:hidden!important}.similar-movies-grid{flex-direction:column;align-items:center;gap:1rem}.similar-movie-poster{width:100px;height:150px}.movie-grid{grid-template-columns:1fr;gap:1rem}.title-row{flex-direction:column;align-items:flex-start;gap:.5rem}.title-actions{margin-left:0;width:100%;justify-content:flex-start}.movie-ratings{flex-wrap:wrap;gap:.5rem}.trailer{width:100%;max-width:100%}.provider-logos{justify-content:flex-start}}@media (max-width: 480px){.toast-container{left:50%;right:auto;transform:translate(-50%);width:min(92%,420px)}.app-header h1{font-size:1rem}.app{padding:0 .5rem}.card{padding:1.25rem}.title-actions{flex-direction:column;gap:.5rem;width:100%}.title-actions button{width:100%;justify-content:center}.similar-movies-grid{flex-direction:row;flex-wrap:wrap;justify-content:center}.similar-movie-poster{width:80px;height:120px}.movie-ratings{font-size:.8rem}.provider-strip{flex-direction:column;align-items:flex-start;gap:.5rem}.provider-logos{width:100%;justify-content:center}}@media (min-width: 1400px){.app{max-width:1320px}.card{grid-template-columns:240px 1fr}.card>img{width:240px;height:360px}}
</style>
  </head>
  <body>
    <div id="root">
      <!-- Loading placeholder to prevent layout shift -->
      <div class="app">
        <header class="app-header">
          <div class="brand">
            <h1>WhatFilm</h1>
          </div>
        </header>
        <div class="loading">Loading your next favorite movie...</div>
      </div>
    </div>
    <script>
      // Preload critical API endpoints and optimize network chain
      (function() {
        console.log('🚀 Starting critical data preload...');
        
        // Start critical API requests as early as possible
        const criticalRequests = [
          fetch('/api/genres').then(r => { console.log('✅ Genres preloaded'); return r; }).catch(e => { console.log('❌ Genres failed:', e); return null; }),
          fetch('/api/providers?region=US').then(r => { console.log('✅ Providers preloaded'); return r; }).catch(e => { console.log('❌ Providers failed:', e); return null; }),
          fetch('/api/languages').then(r => { console.log('✅ Languages preloaded'); return r; }).catch(e => { console.log('❌ Languages failed:', e); return null; }),
          fetch('/api/random-movie?runtime_min=40&region=US').then(r => { console.log('✅ Movie preloaded'); return r; }).catch(e => { console.log('❌ Movie failed:', e); return null; })
        ];
        
        // Store responses for later use
        window.__criticalData = Promise.all(criticalRequests).then(responses => {
          console.log('🔄 Processing preloaded responses...');
          return Promise.all(responses.map((r, i) => {
            if (!r) {
              console.log(`❌ Response ${i} is null`);
              return null;
            }
            return r.json().then(data => {
              console.log(`✅ Response ${i} parsed:`, data ? 'Success' : 'No data');
              return data;
            }).catch(e => {
              console.log(`❌ Response ${i} JSON parse failed:`, e);
              return null;
            });
          }));
        }).then(data => {
          console.log('🎯 Critical data ready:', data.map((d, i) => `${i}: ${d ? 'OK' : 'NULL'}`).join(', '));
          
          // Preload LCP image if we have movie data
          const movieData = data[3];
          if (movieData && movieData.poster) {
            console.log('🖼️ Preloading LCP image:', movieData.poster);
            const link = document.createElement('link');
            link.rel = 'preload';
            link.as = 'image';
            link.href = movieData.poster;
            link.fetchPriority = 'high';
            document.head.appendChild(link);
          }
          
          return data;
        }).catch(e => {
          console.log('❌ Critical data failed:', e);
          return [null, null, null, null];
        });
        
        // Preload additional endpoints and optimize connections
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', () => {
            // Warm up API endpoints without causing errors
            setTimeout(() => {
              fetch('/api/random-movie?runtime_min=40&region=US', { method: 'HEAD' }).catch(() => {});
            }, 1000);
          });
        }
      })();

      // Preload first movie image for faster LCP
      window.addEventListener('DOMContentLoaded', () => {
        // Get the first movie image when it appears
        const observer = new MutationObserver((mutations) => {
          mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
              if (node.nodeType === 1) { // Element node
                const img = node.querySelector?.('img[fetchpriority="high"]') || 
                           (node.tagName === 'IMG' && node.getAttribute('fetchpriority') === 'high' ? node : null);
                if (img && img.src) {
                  // Create preload link for LCP image
                  const preloadLink = document.createElement('link');
                  preloadLink.rel = 'preload';
                  preloadLink.as = 'image';
                  preloadLink.href = img.src;
                  preloadLink.fetchPriority = 'high';
                  document.head.appendChild(preloadLink);
                  observer.disconnect(); // Stop observing after first image
                }
              }
            });
          });
        });
        observer.observe(document.body, { childList: true, subtree: true });
      });
    </script>
  </body>
</html>
