/* ════════════════════════════════════════════════════════════════
   PWA.CSS — стили, активные ТОЛЬКО в установленном PWA
   ════════════════════════════════════════════════════════════════
   Подключается из base.html через
       <link rel="stylesheet" href="/static/css/pwa.css?v=..."
             media="(display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen)">

   media-атрибут на <link> делает файл non-render-blocking в обычной
   вкладке (браузер скачает в фоне с низким приоритетом, но не будет
   парсить и применять правила). Это значит:

   - В обычном браузере правила НЕ применяются → splash-overlay в DOM
     остаётся скрытым (`.app-splash { display: none }` в styles.css —
     дефолтный off-state). Всё остальное PWA-only тоже игнорируется.
   - В установленном PWA (Android Chrome standalone, iOS A2HS) — link
     matchает display-mode и правила перекрывают дефолты.

   Файл использует токены из styles.css (--bg-app, --primary-500,
   --accent-cool, --primary-600, --gradient-warm, --motion-ease-standard).
   styles.css должен подключаться раньше pwa.css в base.html.

   Сюда же будут попадать в будущем: install-banner для iOS Safari,
   permission UI для Web Push, safe-area подгонки под нативный wrapper
   (Capacitor/WebView), iOS apple-touch-startup-image media-queries и
   другие splash/PWA-специфичные правки.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   SPLASH SCREEN
   First-paint экран при cold start PWA использует сцену дыма из караоке.
   Markup живёт в app/templates/components/_app_splash.html.
   Скрытие — классом .app-splash-ready на body после window.load.
   ════════════════════════════════════════════════════════════════ */

.app-splash {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-app);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--motion-duration-slow) var(--motion-ease-standard), visibility 0s linear var(--motion-duration-slow);
}

body.app-splash-ready .app-splash {
    opacity: 0;
    visibility: hidden;
}

/* The shared karaoke scene owns smoke; startup only supplies its bounds. */
.app-splash__smoke {
    --accent-cool: var(--prism-cyan);
    --gradient-warm: var(--prism-gold);
    --lyrics-ambience-outset: 50%;
    pointer-events: none;
}
.app-splash__logo {
    position: relative;
    z-index: 1;
    width: clamp(96px, 30vmin, 144px);
    height: clamp(96px, 30vmin, 144px);
}