/* Self-hosted-style fonts via Bunny (privacy-respecting Google Fonts proxy) */
@import url('https://fonts.bunny.net/css?family=geist:400,500,600,700|geist-mono:400,500,600|unbounded:400,500,600,700,800,900&display=swap');
@import "tailwindcss";
@import "leaflet/dist/leaflet.css";

@theme {
  /* ─── Surfaces (layered dark with warm undertone) ─────────────── */
  --color-void: #07080A;
  --color-surface: #0F1114;
  --color-elevated: #15181D;
  --color-higher: #1D2127;
  --color-muted: #2A2F38;
  --color-line: #3A3F4A;

  /* Glass surfaces (use with backdrop-blur) */
  --color-glass: rgba(15, 17, 20, 0.72);
  --color-glass-strong: rgba(15, 17, 20, 0.88);
  --color-glass-light: rgba(255, 255, 255, 0.04);

  /* ─── Text (luminance-disciplined dark mode) ─────────────────── */
  --color-text-1: rgba(255, 255, 255, 0.95);
  --color-text-2: rgba(255, 255, 255, 0.68);
  --color-text-3: rgba(255, 255, 255, 0.46);
  --color-text-4: rgba(255, 255, 255, 0.28);
  --color-text-5: rgba(255, 255, 255, 0.16);

  /* ─── Accent (refined warm amber, the Jellybloom heritage) ─────── */
  --color-accent: #F5B642;
  --color-accent-hover: #FFC656;
  --color-accent-press: #E5A82E;
  --color-accent-dim: rgba(245, 182, 66, 0.14);
  --color-accent-glow: rgba(245, 182, 66, 0.22);
  --color-accent-text: #FFD17A;
  --color-accent-deep: #B07A1C;

  /* Secondary cool accent for contrast moments */
  --color-cool: #6BA3FF;
  --color-cool-dim: rgba(107, 163, 255, 0.12);

  /* ─── Semantic ───────────────────────────────────────────────── */
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-error: #FB7185;
  --color-info: #60A5FA;

  /* ─── Borders (hairline progression) ─────────────────────────── */
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* ─── Skeleton ───────────────────────────────────────────────── */
  --color-skeleton-base: rgba(255, 255, 255, 0.035);
  --color-skeleton-shine: rgba(255, 255, 255, 0.085);

  /* ─── Typography ─────────────────────────────────────────────── */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --font-display: 'Unbounded', 'Geist', system-ui, sans-serif;

  /* ─── Radii (the rounded-but-intentional scale) ──────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ─── Shadow (cinematic layered depth) ───────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.65), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 40px 80px -20px rgba(0, 0, 0, 0.75), 0 12px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--color-accent-glow), 0 0 32px -4px var(--color-accent-glow);
  --shadow-inset-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ─── Motion (spring + snappy duo) ───────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --duration-cinema: 700ms;

  /* ─── Z-index layering ───────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 25;
  --z-sidebar: 10;
  --z-mini-player: 20;
  --z-dropdown: 30;
  --z-modal-scrim: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-video-overlay: 70;
  --z-fullscreen: 80;

  /* ─── Keyframes ──────────────────────────────────────────────── */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
    50% { box-shadow: 0 0 0 6px transparent; }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slow-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
  }
  @keyframes spin-soft {
    to { transform: rotate(360deg); }
  }
  @keyframes equalizer-bar {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
  }
}

/* ──────────────────────────────────────────────────────────────── */
/*  Base layer                                                      */
/* ──────────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html, body, #root {
    height: 100%;
    overflow: hidden;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    font-family: var(--font-sans);
    font-feature-settings: 'ss01', 'ss02', 'cv11', 'cv05';
    font-optical-sizing: auto;
    background:
      radial-gradient(1200px 800px at 12% -8%, rgba(245, 182, 66, 0.04), transparent 60%),
      radial-gradient(900px 600px at 92% 6%, rgba(107, 163, 255, 0.025), transparent 55%),
      var(--color-void);
    color: var(--color-text-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
  }

  ::selection {
    background: var(--color-accent-glow);
    color: var(--color-text-1);
  }

  /* Hide focus ring for mouse, keep for keyboard */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ─── Scrollbars ─────────────────────────────────────────────── */
  .content-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .content-scroll::-webkit-scrollbar-track { background: transparent; }
  .content-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background var(--duration-base);
  }
  .content-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); background-clip: padding-box; }
  .content-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: padding-box; }

  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

  /* ─── Player video fill ────────────────────────────────────
   * Override vidstack's default 16:9 aspect-ratio so the video
   * element fills its container and adapts to the source's actual
   * aspect ratio (4:3, 21:9, vertical, etc).
   */
  .player-fill {
    aspect-ratio: unset !important;
  }
  .player-fill [data-media-provider] {
    aspect-ratio: unset !important;
    height: 100%;
  }
  .player-fill video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: unset !important;
    object-fit: contain !important;
  }

  /* ─── Subtitle font size via CSS custom property ────────── */
  [style*="--cue-font-size"] [data-cue] {
    font-size: var(--cue-font-size);
  }
  @media (min-width: 768px) {
    [style*="--cue-font-size-md"] [data-cue] {
      font-size: var(--cue-font-size-md);
    }
  }

  /* ─── Fullscreen: hide every chrome element that lives outside
   * the fullscreen target. The video element is what goes fullscreen
   * (via vidstack's request), so a plain `:fullscreen .app-titlebar`
   * descendant selector misses - the titlebar is a SIBLING of the
   * fullscreen target, not a descendant. `body:has(:fullscreen)`
   * inverts the relationship so we can hide anywhere in the body
   * while a fullscreen element exists.
   */
  body:has(:fullscreen) .app-header,
  body:has(:fullscreen) .app-sidebar,
  body:has(:fullscreen) .app-titlebar {
    display: none !important;
  }

  /* ─── Theater / zen mode ─────────────────────────────────────
   * When data-theater="true" on the player root, hide the bottom
   * controls bar entirely and keep only a slim scrubber strip plus
   * the click-capture surface. The top bar fades out via opacity so
   * window controls are still reachable on a focus event.
   */
  [data-theater="true"] [data-player-top-bar] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  [data-theater="true"]:hover [data-player-top-bar] {
    opacity: 1;
    pointer-events: auto;
  }
  [data-theater="true"] [data-player-bottom-bar] {
    transform: translateY(calc(100% - 6px));
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-theater="true"] [data-player-bottom-bar]:hover {
    transform: translateY(0);
  }

  /* ─── Subtitle size slider ───────────────────────────────── */
  .subtitle-size-slider::-webkit-slider-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
  }
  .subtitle-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    margin-top: -6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    cursor: pointer;
  }
  .subtitle-size-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
    border: none;
  }
  .subtitle-size-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    cursor: pointer;
    border: none;
  }

  /* ─── Utilities ──────────────────────────────────────────────── */
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--color-skeleton-base) 25%,
      var(--color-skeleton-shine) 50%,
      var(--color-skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite ease-in-out;
    border-radius: var(--radius-md);
  }

  .glass {
    background: var(--color-glass);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--color-border);
  }

  .glass-strong {
    background: var(--color-glass-strong);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
  }

  .noise {
    position: relative;
    isolation: isolate;
  }
  .noise::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  }

  .focus-ring {
    transition: box-shadow var(--duration-fast) var(--ease-standard);
  }
  .focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent);
  }

  /* Animated gradient stroke for hero / featured chrome */
  .accent-stroke {
    background: linear-gradient(
      120deg,
      transparent 30%,
      var(--color-accent-glow) 50%,
      transparent 70%
    );
    background-size: 200% 100%;
    animation: shimmer 4s infinite linear;
  }

  /* Text gradient for titles */
  .text-luxe {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.78));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Range input styling baseline (used by sliders) */
  input[type="range"].slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 16px;
  }
  input[type="range"].slider::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
  }
  input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--color-accent);
    margin-top: -5px;
    box-shadow: 0 0 0 4px transparent;
    transition: box-shadow var(--duration-fast), transform var(--duration-fast);
  }
  input[type="range"].slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px var(--color-accent-glow);
    transform: scale(1.05);
  }
  input[type="range"].slider:active::-webkit-slider-thumb {
    transform: scale(1.15);
  }

  @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;
    }
  }
}
