/* Greybox Phase 1 — visual tokens + cinematic foundation.
 * Single source of truth for color / surface / border / shadow / motion.
 * Later phases (hero, cards, detail) should consume these variables instead
 * of hardcoding new values. No framework, no dependency. */

:root {
  /* ——— background ——— near-black glass theme (darkened, NOT matte black) */
  --gx-bg-0: #0b0d12;          /* near-black with a cool blue-grey lift */
  --gx-bg-1: #23272e;          /* page lift for sections */
  --gx-bg-2: #2b3038;

  /* ——— surfaces ——— */
  --gx-surface: #262b33;       /* grey charcoal */
  --gx-surface-2: #2e343d;

  /* ——— glass surfaces ——— */
  --gx-glass: rgba(38, 43, 51, 0.58);
  --gx-glass-strong: rgba(32, 36, 43, 0.84);
  --gx-glass-wash: rgba(255, 255, 255, 0.07);
  /* Floating nav panel: background-only translucency (contents stay opaque),
     tuned so hero/ambient light passes through while text stays readable. */
  --gx-glass-nav: rgba(35, 39, 46, 0.52);
  --gx-glass-nav-scrolled: rgba(30, 34, 40, 0.68);
  --gx-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);

  /* ——— borders (low-opacity white only) ——— */
  --gx-border: rgba(255, 255, 255, 0.08);
  --gx-border-strong: rgba(255, 255, 255, 0.12);
  --gx-border-faint: rgba(255, 255, 255, 0.05);

  /* ——— text ——— */
  --gx-text: #f4f3ee;          /* white / off-white primary */
  --gx-text-dim: #a8a8b4;      /* muted grey secondary */
  --gx-text-faint: #6e6e7a;

  /* ——— accent (very restrained warm amber/gold) ——— */
  --gx-accent: #d0a24f;
  --gx-accent-strong: #e2ba6b;
  --gx-accent-soft: rgba(208, 162, 79, 0.13);
  --gx-accent-border: rgba(208, 162, 79, 0.32);

  /* ——— shadows ——— */
  --gx-shadow-bar: 0 12px 40px rgba(0, 0, 0, 0.45);
  --gx-shadow-pop: 0 20px 55px rgba(0, 0, 0, 0.55);
  --gx-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* ——— shape / spacing / motion ——— */
  --gx-radius-bar: 16px;
  --gx-radius-pop: 14px;
  --gx-radius-pill: 999px;
  /* Card + shelf geometry (single source of truth — card, skeleton
   * placeholder, and responsive rules all consume these, so placeholders
   * always match final cards exactly and no one-off margins accumulate):
   * substantial 176–197px cards, 16px desktop / 12px mobile rhythm. */
  --gx-card-min: 176px;
  --gx-card-max: 197px;
  /* Percent of the viewport used in the card width clamp
   * (clamp(--gx-card-min, calc(--gx-card-vw * 1vw), --gx-card-max)).
   * Wide/backdrop shelves override all three on [data-layout="backdrop"]
   * in css/shelves.css — js/pages.js cardGeometry() reads the same vars. */
  --gx-card-vw: 14;
  --gx-card-radius: 0.8rem;
  --gx-card-title-h: 1.12rem;
  --gx-card-sub-h: 1.01rem;
  --gx-shelf-gap: 1rem;
  --gx-shelf-gap-mobile: 0.75rem;
  --gx-shelf-space: 2.25rem;
  --gx-shelf-space-mobile: 2rem;
  --gx-shelf-head-space: 0.8rem;
  /* Standalone strip cap: the settings sheet (css/settings.css) stops at
   * 100rem ≈ 1600px here. The MAIN page column is NOT this token — .gx-page,
   * .gx-header-inner, the hero copy, the shelf rows AND the homepage
   * countdown banner (css/countdown.css) share --gx-content-max +
   * --gx-gutter (see the gutters block below), so card rows, the logo, the
   * nav pill and the banner edges all sit on one vertical line. */
  --gx-max: 100rem;
  --gx-transition: 180ms ease;
  /* ——— content gutters ——— <main> (.gx-page), the navbar inner
   * (.gx-header-inner), the hero copy and the footer shell share ONE
   * column: 3% of the viewport on each side (48px at 1600px — the tight,
   * edge-forward inset the reference sites use, instead of the old 10%
   * sheet inset), so card rows, the logo and the nav pill all sit on the
   * same vertical line. --gx-content-max caps the column on ultrawide
   * monitors (the cap is added to TWO gutters because .gx-page is
   * border-box and the padding lives inside it). The HERO background stays
   * full-bleed (css/hero.css). The mobile band keeps the old 12px/10px
   * pads (media overrides in style.css / navbar.css / hero.css) — a
   * percentage would eat a phone screen. */
  --gx-gutter: 3%;
  --gx-content-max: 140rem;

  /* ——— Aetho-style card glass system (additive port) ———
   * Value-for-value port of the reference design's poster/rail tokens
   * (bg-card #ffffff0a, border-glass #ffffff24, border-bright #ffffff4d,
   * lift -8px + 0 18px 40px shadow, spring/cinema easings). Consumed by
   * css/shelves.css, css/style.css, css/collection.css, css/search.css. */
  --gx-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --gx-ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --gx-card-bg: rgba(255, 255, 255, 0.04);
  --gx-card-bg-hover: rgba(255, 255, 255, 0.08);
  --gx-glass-line: rgba(255, 255, 255, 0.14);
  --gx-glass-line-bright: rgba(255, 255, 255, 0.3);
  --gx-glass-sheen: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  --gx-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --gx-blur-glass: blur(14px) saturate(160%);
  --gx-blur-heavy: blur(18px) saturate(150%);
  --gx-radius-card: 14px;
  --gx-radius-panel: 22px;
  --gx-shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.45);
  /* ——— premium card depth ———
   * Two-tier contact shadow (tight edge + wide ambient pool) so a poster
   * reads as a physical card resting on the surface instead of a flat
   * rectangle. The hover tier widens AND deepens, which is what sells the
   * lift together with --gx-ease-spring. Consumed by css/shelves.css. */
  --gx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -12px rgba(0, 0, 0, 0.75);
  --gx-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.32), 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  /* ——— hero artwork accent ———
   * Comma-separated RGB triplet so it can feed the legacy comma form:
   *   rgba(var(--gx-hero-tint), 0.24)
   * js/hero.js samples the CURRENT hero artwork (1×1 canvas, TMDB is
   * CORS-open) and sets this inline on <html>; clearing it falls back to
   * this warm neutral. Every glow/hairline that follows the hero theme
   * reads this one token, so the whole page re-tints per hero. */
  --gx-hero-tint: 176, 163, 142;
}

/* ——— mobile scroll performance (<=859px): glass-off ———
 * backdrop-filter forces the browser to re-render a blurred copy of
 * everything painted behind an element on EVERY scroll frame (the fixed
 * body glass layer moves relative to every fixed/absolute glass surface).
 * That per-frame full-surface blur is the dominant jank source on budget
 * Android GPUs (Android One): nav capsule, bottom dock, home shelf tints,
 * detail/settings/search glass all re-blur continuously while scrolling.
 * On the mobile band every glass surface falls back to its translucent
 * fill (already 78-97% opaque — visually near-identical) and per-frame
 * cost drops to zero. Desktop (>=860px) keeps the full glass treatment.
 * Specificity note: !important is required because the CSS files that
 * declare the blurs (navbar/detail/settings/...) load AFTER this file. */
@media (max-width: 859px) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ——— base ——— near-black glass: darkened page base + shiny sheen */
html {
  color-scheme: dark;
  background: var(--gx-bg-0);
}

body {
  /* Layered near-black gradient: soft studio sheen melting into black-glass
     depths. Applied to the fixed ::before pseudo-element (below) so the
     browser never needs background-attachment:fixed on <body> — that
     property forces full-viewport repaint on every scroll frame on mobile
     GPUs, causing severe jank.
     background-color stays TRANSPARENT on purpose: body is min-height:100vh
     (index.html), and an opaque background here paints OVER a negative-z
     pseudo-element inside the body's own box — which used to hide the whole
     glass layer and leave a flat grey page. html keeps --gx-bg-0 as the
     near-black fallback while the layer loads. */
  background-color: transparent;
  color: var(--gx-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  position: relative;
}

/* Glass-blurred atmosphere over the near-black base. Soft diffused blooms +
   a diagonal specular sweep give the "shiny glass" read, then an opaque
   black-glass gradient anchors the depth. Static (no animation) so it is
   cheap and respects prefers-reduced-motion by default. Deliberately NO
   backdrop-filter here: a fixed full-viewport backdrop blur forces the
   browser to recompute the blur on every scroll frame (homepage shelf
   scrolling jank). The layered gradients alone carry the look.
   Body gradients moved here from body{} to eliminate background-attachment:
   fixed — the #1 enemy of mobile scroll performance (forces full-viewport
   repaint on every frame). This fixed pseudo-element achieves the same
   visual without the per-frame GPU cost.
   Layer order matters: everything above the opaque gradient is visible,
   everything below it would be hidden — so the stack ends with the base. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* specular glass sweep — the shiny diagonal highlight */
    linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.05) 47%, rgba(255, 255, 255, 0.014) 53%, transparent 66%),
    /* studio blooms (warm white left, cool blue right, soft centre) */
    radial-gradient(1100px 520px at 18% -6%, rgba(255, 255, 255, 0.075), transparent 62%),
    radial-gradient(950px 480px at 84% -2%, rgba(150, 172, 214, 0.095), transparent 62%),
    radial-gradient(900px 700px at 50% 42%, rgba(255, 255, 255, 0.03), transparent 72%),
    /* grounding vignette + vertical light falloff */
    radial-gradient(70% 50% at 50% 110%, rgba(0, 0, 0, 0.3), transparent 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.18)),
    /* near-black glass base (never pure #000 — keeps a faint cool lift) */
    linear-gradient(165deg, #1a1e25 0%, #13161c 26%, #0d1015 52%, #0a0c10 78%, #0e1116 100%);
}

::selection {
  background: rgba(208, 162, 79, 0.32);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--gx-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Professional slim scrollbars (site-wide system): thin floating pills on a
 * transparent track for the viewport, the modal panel, cast/episode rails
 * and every other scroller. Reference feel: Netflix/Prime/Linear — slim,
 * quiet at rest, brighter on hover. Shelf tracks opt out (hidden bars:
 * arrows + drag own those, see css/shelves.css). */
/* Layout stability: reserve the viewport gutter so locking the page for an
 * overlay never shifts content sideways. */
:root {
  /* ——— watch CTA (centralized playback-button system, css/watch-cta.css) ———
   * Premium light pill: warm-white surface, near-black text, dark precision
   * outline. Chromatic tokens feed ONLY the thin traveling edge arcs — the
   * surface itself stays white. Tuned slow + restrained against the
   * reference: most of the border reads dark at any moment. */
  --watch-surface: #faf9f5;
  --watch-surface-top: #fffdf9;
  --watch-surface-bottom: #efede7;
  --watch-text: #101014;
  --watch-border: rgba(12, 12, 17, 0.9);
  --watch-focus-ring: rgba(255, 255, 255, 0.9);
  --watch-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  --watch-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.42);
  --watch-shadow-pressed: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  --watch-chroma-1: #22d3ee;
  --watch-chroma-2: #818cf8;
  --watch-chroma-3: #e879f9;
  --watch-chroma-4: #fbbf24;
  --watch-chroma-rest: 0.55;
  --watch-chroma-hover: 0.9;
  --watch-cycle: 6s;
}
html { scrollbar-gutter: stable; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.34);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Page scroll lock (detail modal + player open): html-level overflow hidden
 * is the real lock — body-only still scrolls via programmatic scrollTop
 * writes (the wheel-glide module) and chains backdrop wheel events into
 * the page. overscroll-behavior kills the chaining; the wheel-glide module
 * treats .gx-locked as "page is locked" and never glides it. */
html.gx-locked,
html.gx-locked body { overflow: hidden; }
html.gx-locked body { overscroll-behavior: none; }

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

/* ============ THEME MODES (Settings → Appearance) ============
 * <html data-theme="amoled|light"> is stamped pre-paint by the inline head
 * script in index.html and kept in sync by js/settings.js (persisted in
 * greybox:theme). No attribute = reference dark. AMOLED re-maps the canvas
 * to true black; Light flips the full token set (surfaces, glass, borders,
 * text, shadows) plus the fixed body atmosphere. --gx-accent darkens on
 * light so active/focus states stay readable. Components built from
 * hard-coded dark glass (the 7movies navbar capsule, hero scrims) keep
 * their dark read on purpose — they are the anchor of the identity.
 * Card size (<html data-cards="compact|roomy">, greybox:cards) remaps the
 * shelf width clamp; backdrop shelves keep their own wider geometry
 * (specificity of .gx-shelf[data-layout] wins over these). */

html[data-theme="amoled"] { color-scheme: dark; }

html[data-theme="amoled"] {
  --gx-bg-0: #000000;
  --gx-bg-1: #050506;
  --gx-bg-2: #0a0a0c;
  --gx-surface: #0a0a0c;
  --gx-surface-2: #101013;
  --gx-glass: rgba(0, 0, 0, 0.62);
  --gx-glass-strong: rgba(0, 0, 0, 0.88);
  --gx-glass-nav: rgba(0, 0, 0, 0.55);
  --gx-glass-nav-scrolled: rgba(0, 0, 0, 0.72);
}

html[data-theme="amoled"] body::before {
  background:
    linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.03) 47%, rgba(255, 255, 255, 0.008) 53%, transparent 66%),
    radial-gradient(1100px 520px at 18% -6%, rgba(255, 255, 255, 0.04), transparent 62%),
    radial-gradient(950px 480px at 84% -2%, rgba(150, 172, 214, 0.05), transparent 62%),
    radial-gradient(900px 700px at 50% 42%, rgba(255, 255, 255, 0.015), transparent 72%),
    radial-gradient(70% 50% at 50% 110%, rgba(0, 0, 0, 0.5), transparent 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.012), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3)),
    linear-gradient(165deg, #050505 0%, #030303 26%, #000000 52%, #000000 78%, #020202 100%);
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] {
  /* ——— background ——— */
  --gx-bg-0: #f1f2f4;
  --gx-bg-1: #e6e8ec;
  --gx-bg-2: #dcdfe4;
  /* ——— surfaces ——— */
  --gx-surface: #ffffff;
  --gx-surface-2: #f4f5f7;
  /* ——— glass ——— */
  --gx-glass: rgba(255, 255, 255, 0.6);
  --gx-glass-strong: rgba(255, 255, 255, 0.86);
  --gx-glass-wash: rgba(0, 0, 0, 0.05);
  --gx-glass-nav: rgba(255, 255, 255, 0.55);
  --gx-glass-nav-scrolled: rgba(255, 255, 255, 0.78);
  --gx-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  /* ——— borders ——— */
  --gx-border: rgba(0, 0, 0, 0.1);
  --gx-border-strong: rgba(0, 0, 0, 0.16);
  --gx-border-faint: rgba(0, 0, 0, 0.06);
  /* ——— text ——— */
  --gx-text: #15161a;
  --gx-text-dim: #55565e;
  --gx-text-faint: #8a8b93;
  /* ——— accent (darkened for light surfaces) ——— */
  --gx-accent: #a8802f;
  --gx-accent-strong: #8a6620;
  --gx-accent-soft: rgba(168, 128, 47, 0.14);
  --gx-accent-border: rgba(168, 128, 47, 0.4);
  /* ——— shadows ——— */
  --gx-shadow-bar: 0 12px 40px rgba(0, 0, 0, 0.16);
  --gx-shadow-pop: 0 20px 55px rgba(0, 0, 0, 0.2);
  --gx-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.12);
  /* ——— card glass ——— */
  --gx-card-bg: rgba(0, 0, 0, 0.04);
  --gx-card-bg-hover: rgba(0, 0, 0, 0.07);
  --gx-glass-line: rgba(0, 0, 0, 0.12);
  --gx-glass-line-bright: rgba(0, 0, 0, 0.22);
  --gx-glass-sheen: linear-gradient(115deg, transparent 40%, rgba(0, 0, 0, 0.06) 50%, transparent 60%);
  --gx-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
  --gx-shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.16);
  /* Same two-tier depth, softened for a light surface (black at 0.9 reads
   * as a hole on white). Accent tint flips dark so the glow still reads. */
  --gx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.14), 0 10px 24px -12px rgba(0, 0, 0, 0.24);
  --gx-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.12), 0 30px 60px -26px rgba(0, 0, 0, 0.34);
  --gx-hero-tint: 96, 89, 80;
}

html[data-theme="light"] body::before {
  background:
    linear-gradient(112deg, transparent 34%, rgba(0, 0, 0, 0.02) 47%, rgba(0, 0, 0, 0.006) 53%, transparent 66%),
    radial-gradient(1100px 520px at 18% -6%, rgba(255, 255, 255, 0.9), transparent 62%),
    radial-gradient(950px 480px at 84% -2%, rgba(210, 222, 244, 0.55), transparent 62%),
    radial-gradient(900px 700px at 50% 42%, rgba(255, 255, 255, 0.65), transparent 72%),
    radial-gradient(70% 50% at 50% 110%, rgba(0, 0, 0, 0.06), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.05)),
    linear-gradient(165deg, #f7f8fa 0%, #eef0f4 26%, #e9ecf1 52%, #e6e9ef 78%, #edeff3 100%);
}

html[data-theme="light"] ::selection {
  background: rgba(168, 128, 47, 0.32);
  color: #101014;
}

html[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

html[data-cards="compact"] {
  --gx-card-min: 148px;
  --gx-card-max: 168px;
  --gx-card-vw: 11;
}

html[data-cards="roomy"] {
  --gx-card-min: 214px;
  --gx-card-max: 252px;
  --gx-card-vw: 17;
}

/* ============ GLASS OFF (Admin → Appearance → Components) ============
 * <html data-glass="off"> is stamped by js/appearance.js from the Components
 * setting (site-wide — no visitor override, unlike theme/cards). Same read
 * as the mobile band above: every translucent glass fill falls back to its
 * ACTIVE theme's solid surface (the var() indirection resolves through the
 * cascaded --gx-surface/--gx-surface-2, so dark, AMOLED and light all stay
 * coherent) and backdrop blurs are switched off outright at every width —
 * with opaque fills they would only cost GPU time. Declared AFTER the theme
 * and card blocks so it wins the cascade tie (same specificity as
 * html[data-theme=…]). Borders, sheens and shadows are untouched: solid
 * panels keep the same visual language, they just stop showing content
 * through them. */
html[data-glass="off"] {
  --gx-glass: var(--gx-surface);
  --gx-glass-strong: var(--gx-surface-2);
  --gx-glass-wash: transparent;
  --gx-glass-nav: var(--gx-surface);
  --gx-glass-nav-scrolled: var(--gx-surface-2);
  --gx-card-bg: var(--gx-surface);
  --gx-card-bg-hover: var(--gx-surface-2);
  --gx-glass-fill: none;
}

html[data-glass="off"] *,
html[data-glass="off"] *::before,
html[data-glass="off"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}