/* MEDIA design tokens: the TV app's look (tv/.../Theme.kt) scaled for laptops and phones.
   Every colour, size and duration the stylesheets use comes from here, so palettes, button
   shapes, density, motion and the two worlds only ever change variables. */

/* The veil that hides rows passing under the info header; registered so it can fade. */
@property --rows-veil {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Manrope 4.505 variable (SIL OFL 1.1), bundled so the UI looks the same offline. */
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Palette (gold is the default; body[data-theme] swaps these). */
  --base-bg: #101011;
  --surface: #1a1a1d;
  --raised: #202022;
  --accent: #d7aa45;
  /* Gold itself, for the Gold swatch while another palette is on. */
  --gold: #d7aa45;
  --accent-hover: #f0c766;
  --accent-light: #f4d37a;
  --accent-soft: #d7aa4524;
  /* Text */
  --text: #f7f7f8;
  --muted: #aaa9b0;
  --nav: #c5c3c6;
  --meta: #cccbd0;
  --desc: #d0cfd2;
  --rating: #b8d8aa;
  --on-accent: #111111;
  /* Lines and glass */
  --glass: rgb(255 255 255 / .125);
  --glass-hover: rgb(255 255 255 / .22);
  --hairline: rgb(255 255 255 / .14);
  --hairline-soft: rgb(255 255 255 / .08);
  --tile: rgb(26 26 29 / .72);
  /* Derived from the accent, so every palette recolours the gold line. */
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-track: rgb(255 255 255 / .25);

  /* World mood: the page background leans a little towards the world's own light. */
  --world-tint: #050302;
  --world-amount: 22%;
  --bg: color-mix(in oklab, var(--base-bg), var(--world-tint) var(--world-amount));

  /* Type (TV sp values at 1440 px, scaled with the window) */
  --font: Manrope, Arial, sans-serif;
  --fs-hero: clamp(30px, 1.6vw + 19px, 60px);
  --fs-title: clamp(32px, 1.8vw + 20px, 64px);
  --fs-info: clamp(24px, 1.1vw + 16px, 44px);
  --fs-page: clamp(26px, 1.2vw + 19px, 48px);
  --fs-rail: clamp(18px, .4vw + 16px, 26px);
  --fs-nav: clamp(15px, .3vw + 13px, 19px);
  --fs-button: clamp(14px, .2vw + 13px, 17px);
  --fs-meta: 15px;
  --fs-desc: 16px;
  --fs-card: 16px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* Space and shape */
  --inset: clamp(16px, 4vw, 96px);
  --poster-w: clamp(118px, 12.5vw, 260px);
  --landscape-w: clamp(220px, 20vw, 340px);
  --gap-card: clamp(12px, 1.25vw, 24px);
  --gap-caption: 10px;
  --gap-buttons: 12px;
  --row-bottom: clamp(22px, 2vw, 40px);
  --r-card: 8px;
  --r-button: 6px;
  --r-tile: 12px;
  --r-panel: 10px;
  --r-row: 10px;
  --header-h: max(300px, 40svh);
  --bar-h: 88px;

  /* Motion (Theme.kt): one ease, three base durations, plus the stage's own. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Slow, ambient changes: a colour filling in, a picture settling. */
  --motion-reveal: 600ms;
  --focus-ring: 1px solid var(--accent);
  --motion-control: 180ms;
  --motion-card: 250ms;
  --motion-view: 280ms;
  /* One motion for the stage: the backdrop, the hero text, the info header and the rows veil all
     move together, so going between the hero and the rows reads as one change. */
  --motion-stage: 450ms;
  /* The crossfade of words (Immersive.kt): out quickly, in a little slower and a moment later. */
  --motion-cross-out: 220ms;
  --motion-cross-in: 320ms;

  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

/* ---- Palettes (Settings > Appearance). Only base colours and the accent family change. ---- */
body[data-theme="aurora"] { --base-bg: #101b1b; --surface: #1b2929; --raised: #213131; --accent: #60c5ba; --accent-hover: #95e5d8; --accent-light: #a6e6d5; --accent-soft: #60c5ba24; }
body[data-theme="ember"] { --base-bg: #1a1518; --surface: #292125; --raised: #30272b; --accent: #e79a76; --accent-hover: #f3bd9e; --accent-light: #f2b99b; --accent-soft: #e79a7624; }
body[data-theme="crimson"] { --base-bg: #151317; --surface: #222025; --raised: #29262c; --accent: #e36773; --accent-hover: #f19aa1; --accent-light: #f5a2aa; --accent-soft: #e3677328; }
body[data-theme="ice"] { --base-bg: #11191e; --surface: #1b292e; --raised: #213037; --accent: #81cbe4; --accent-hover: #b2e2f0; --accent-light: #b9e7f2; --accent-soft: #81cbe426; }
body[data-theme="violet"] { --base-bg: #19151c; --surface: #272129; --raised: #2e2731; --accent: #c6a4da; --accent-hover: #e0c5ea; --accent-light: #e1cbeb; --accent-soft: #c6a4da28; }

/* ---- Two worlds: same layout, their own light. Composes with any palette. ---- */
body {
  --bg: color-mix(in oklab, var(--base-bg), var(--world-tint) var(--world-amount));
  /* The info header's fixed height (bar, gap, five lines and the buttons); the rows veil starts
     just below it. Here, so it follows the bar when it compacts. */
  --info-h: calc(var(--bar-h) + 252px);
  /* Resolved here too, so the body's motion setting (low, reduced) reaches them. */
  --motion-backdrop: var(--motion-stage);
  --motion-header-in: var(--motion-stage);
  --motion-header-out: var(--motion-stage);
}
body[data-world="cinema"] {
  --world-tint: #050302;
  --world-amount: 22%;
  --mood-glow: color-mix(in srgb, var(--accent) 14%, transparent);
}
body[data-world="animation"] {
  --world-tint: #2b2540;
  --world-amount: 20%;
  --mood-glow: color-mix(in srgb, #8b7bd8 26%, transparent);
}

/* ---- Reduce motion (Settings > Playback, per device) ---- */
body[data-motion="low"] {
  --motion-control: 80ms;
  --motion-card: 100ms;
  --motion-view: 120ms;
  --motion-stage: 120ms;
  --motion-cross-out: 80ms;
  --motion-cross-in: 120ms;
  --motion-reveal: 120ms;
}
@media (prefers-reduced-motion: reduce) {
  body[data-motion] {
    --motion-control: 0ms;
    --motion-card: 0ms;
    --motion-view: 0ms;
    --motion-stage: 0ms;
    --motion-cross-out: 0ms;
    --motion-cross-in: 0ms;
    --motion-reveal: 0ms;
  }
}

/* Phones: TV sizes stepped down for a hand-held screen. */
@media (max-width: 600px) {
  :root {
    --fs-meta: 14px;
    --fs-card: 15px;
    --fs-desc: 15px;
    --poster-w: 31vw;
    --landscape-w: 64vw;
    --gap-card: 12px;
    --bar-h: 64px;
  }
}