<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- Prerender Ready Flag -->
    <script>window.prerenderReady = false; window.prerendercloudReady = false;</script>
    
    <!-- Critical preconnects FIRST (ordered by priority) -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
    <!-- Supabase preconnect uses generic domain - actual project ID injected at runtime -->
    <link rel="preconnect" href="https://supabase.co" crossorigin />
    <link rel="preconnect" href="https://static-cdn.jtvnw.net" crossorigin />
    <link rel="dns-prefetch" href="https://clips.twitch.tv" />
    
    <!-- Vite will automatically inject the correct modulepreload tags in production builds. -->
    
    <!-- Preload critical fonts (highest priority for FCP) - using v20 Inter for actual font used -->
    <link rel="preload" href="https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="preload" href="https://fonts.gstatic.com/s/orbitron/v35/yMJRMIlzdpvBhQQL_Qq7dy1biN15.woff2" as="font" type="font/woff2" crossorigin />
    
    <!-- Preconnect to Twitch thumbnail CDN for faster hero poster LCP -->
    <link rel="preconnect" href="https://clips-media-assets2.twitch.tv" crossorigin />
    
    <!-- Font stylesheet with display:swap for FCP -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap" />
    
    <!-- Critical inline CSS for instant FCP (minimized) -->
    <style>
      /* Critical CSS - inlined for FCP */
      :root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--primary:190 90% 42%;--hero-bg:190 30% 97%;--muted:210 20% 96%;--border:220 15% 90%}
      .dark{--background:220 25% 6%;--foreground:210 40% 98%;--hero-bg:220 25% 4%;--primary:142 76% 45%;--muted:220 15% 14%;--border:220 15% 18%}
      *,::before,::after{box-sizing:border-box;border:0 solid}
      html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
      body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground))}
      #root{min-height:100vh;min-height:100dvh}
      .min-h-screen{min-height:100vh}.bg-background{background:hsl(var(--background))}
      /* Fixed height hero skeleton - prevents CLS */
      .hero-skeleton{height:420px;min-height:420px;max-height:420px;background:linear-gradient(180deg,hsl(var(--hero-bg)),hsl(var(--background)));contain:strict}
      /* Fixed height navbar skeleton - prevents CLS */
      nav{height:64px;min-height:64px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--background)/.8);contain:layout style}
      /* LCP optimization - eager load hero text */
      .hero-title{font-size:clamp(2rem,5vw,3.75rem);font-weight:900;line-height:1.1;font-family:'Orbitron',system-ui,sans-serif}
    </style>
    
    <!-- Defer GA until user interaction (not blocking) -->
    <script>
      window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
      var gaLoaded=false;function loadGA(){if(gaLoaded)return;gaLoaded=true;
        var s=document.createElement('script');s.src='https://www.googletagmanager.com/gtag/js?id=G-TK0CF86RLT';s.async=true;document.head.appendChild(s);
        gtag('js',new Date());gtag('config','G-TK0CF86RLT',{send_page_view:true});}
      ['scroll','click','touchstart'].forEach(function(e){document.addEventListener(e,loadGA,{once:true,passive:true});});
      if('requestIdleCallback' in window){requestIdleCallback(loadGA,{timeout:5000});}else{setTimeout(loadGA,5000);}
    </script>
    
    <!-- Fallback title - React Helmet will override -->
    <title>StreamerClips - Best Gaming Clips from Twitch</title>
    <meta name="description" content="Discover the best Twitch clips, viral gaming moments, and make predictions on your favorite streamers. AI-powered clip discovery.">
    <meta name="theme-color" content="#0891b2" />

    <link rel="icon" type="image/png" href="/logo.png" />
    <link rel="apple-touch-icon" href="/logo.png" />
    <script type="module" crossorigin src="/assets/index-DxqAW6ir.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-CWUdsVhu.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-query-BKL4kPl5.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-Coab4YFw.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-ui-C5MFbR5J.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-router-W3zE6y2H.js">
    <link rel="stylesheet" crossorigin href="/assets/style-u2nAriRL.css">
  </head>

  <body>
    <div id="root">
      <!-- Static HTML shell for instant FCP - fixed dimensions prevent CLS -->
      <nav style="height:64px;min-height:64px;border-bottom:1px solid hsl(220 15% 90%);background:hsl(0 0% 100%/.8);backdrop-filter:blur(12px);display:flex;align-items:center;padding:0 1rem;contain:layout style;">
        <div style="display:flex;align-items:center;gap:6px;">
          <img src="/logo.png" alt="StreamerClips" width="36" height="36" style="width:36px;height:36px;object-fit:contain;" />
          <span style="font-weight:700;font-size:1.125rem;letter-spacing:-0.025em;">
            <span style="background:linear-gradient(135deg,hsl(190 90% 42%),hsl(160 84% 39%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;">Streamer</span><span>Clips</span>
          </span>
        </div>
      </nav>
      <section class="hero-skeleton" style="height:420px;min-height:420px;max-height:420px;background:linear-gradient(180deg,hsl(190 30% 97%),hsl(0 0% 100%));display:flex;align-items:center;justify-content:center;contain:strict;">
        <div style="text-align:center;padding:2rem;">
          <!-- LCP candidate - visible text immediately -->
          <h1 class="hero-title" style="margin:0;font-family:'Orbitron',system-ui,sans-serif;">
            <span style="color:hsl(190 90% 42%);">STREAM</span><span style="color:hsl(220 20% 20%);">//</span><span style="color:hsl(142 76% 45%);">CLIP</span><span style="color:hsl(220 20% 20%);">//</span><span style="color:hsl(262 83% 58%);">PREDICT</span>
          </h1>
          <p style="color:hsl(215 16% 47%);font-family:monospace;font-size:0.875rem;margin-top:0.75rem;">AI-powered gaming clip discovery</p>
        </div>
      </section>
    </div>
  
<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="632297c5-e71f-4f6a-8187-23e34ca255b5" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiNjMyMjk3YzUtZTcxZi00ZjZhLTgxODctMjNlMzRjYTI1NWI1IiwiYWNjb3VudF9pZCI6IjY5NGViNzBjYmE4OTMxMDg1MDA4MzU3NyIsImRlcGxveV9pZCI6IjY5YjMwYmY0M2YxZDZlMDAwOTJhNDIxYSIsImlzc3VlciI6Im5mc2VydmVyIn0.lGQScul_GGnNxdRde74ZuASi2O_Pu2MkLHPQVtPmipU"></script></body>
</html>
