<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#0a0a0a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Seroscape — Calm AI Video Shorts</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<!-- ============================================================
     SPLASH SCREEN (shown on first load, unlocks AudioContext)
     ============================================================ -->
<div id="splash" role="button" aria-label="Tap to enter Seroscape" tabindex="0">
  <div class="splash-logo-box">
    <img src="./logo.png" alt="Seroscape" width="180" height="97">
    <div class="splash-title">Seroscape</div>
  </div>
  <div class="splash-tap">Tap to enter</div>
</div>

<!-- ============================================================
     FEED CONTAINER — vertical scroll-snap swipe feed
     ============================================================ -->
<div id="feed-container" aria-label="Scene feed"></div>

<!-- ============================================================
     FIXED CONTROL BAR — shared across all scenes, stays in place
     ============================================================ -->
<div id="control-bar" class="control-bar"></div>

<!-- Desktop nav arrows (hidden on mobile via CSS) -->
<button class="nav-arrow nav-arrow-up" id="nav-up" aria-label="Previous scene">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
</button>
<button class="nav-arrow nav-arrow-down" id="nav-down" aria-label="Next scene">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</button>

<!-- ============================================================
     SLEEP MODAL — built dynamically by app.js
     ============================================================ -->
<div id="sleep-modal"></div>

<!-- ============================================================
     GOODNIGHT SCREEN — shown when sleep timer expires
     ============================================================ -->
<div id="goodnight" aria-label="Goodnight screen">
  <h2>Goodnight</h2>
  <p>Tap anywhere to resume</p>
</div>

<!-- ============================================================
     TOAST NOTIFICATION
     ============================================================ -->
<div id="toast" role="status" aria-live="polite"></div>

<!-- ============================================================
     SCRIPTS — order matters: audio-mixer and ken-burns first
     ============================================================ -->
<script src="./client_logger.js"></script>
<script>if(window.ClientLogger)ClientLogger.init({sessionId:'auto',endpoint:'./api/client-logs'});window.addEventListener('beforeunload',function(){if(window.ClientLogger)ClientLogger.flush()});</script>
<script src="./audio-mixer.js"></script>
<script src="./ken-burns.js"></script>
<script src="./app.js"></script>

<script>
  // Register service worker for stem + asset caching.
  // Non-fatal: app works without SW, offline caching just won't be available.
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js').catch(function(err) {
      console.warn('SW registration failed:', err);
    });
  }
</script>
</body>
</html>
