/* ==========================================================================
   Cameo Cinema — BASE (Eclipse Strategy)
   ========================================================================== */

/* ---- Google Fonts ------------------------------------------------------ */
/* Inter: body / UI | Bebas Neue: cinematic headings */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..900&family=Bebas+Neue&display=swap");

/* ---- CSS Reset --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:where(h1, h2, h3, h4, p) {
  margin: 0;
}

/* ---- Design Tokens ----------------------------------------------------- */
:root {
  --void: #050507;
  --surface: #121418;
  --surface-2: #0b0d10;

  --text: #9ca3af;
  --text-strong: rgba(229, 231, 235, 0.92);
  --text-muted: rgba(156, 163, 175, 0.72);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(45, 107, 255, 0.35);

  --primary: #2d6bff;
  --primary-deep: #0039cb;
  --neon: #00d4ff;

  --g-primary: linear-gradient(135deg, var(--primary), var(--primary-deep));
  --g-voidglow:
    radial-gradient(
      1200px 600px at 20% 10%,
      rgba(45, 107, 255, 0.22),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 80% 20%,
      rgba(0, 212, 255, 0.12),
      transparent 55%
    );

  --r-1: 4px;
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-soft: 0 16px 60px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 18px 70px rgba(0, 0, 0, 0.55);

  --focus: 0 0 0 3px rgba(0, 212, 255, 0.14), 0 0 0 1px rgba(0, 212, 255, 0.35);

  /* Typography scale */
  --fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --fs-xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --fs-2xl: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  --fs-3xl: clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem);
  --fs-4xl: clamp(2.8rem, 2.1rem + 3vw, 4.4rem);
}

/* ---- Base document ----------------------------------------------------- */
html {
  background: var(--void);
  color: var(--text);
}

body {
  background: var(--void);
  color: var(--text);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 350;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

/* Cinematic glow layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--g-voidglow);
  pointer-events: none;
  z-index: -1;
}

/* ---- Headings ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: "Bebas Neue", sans-serif;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h1 {
  font-size: var(--fs-4xl);
  line-height: 1.05;
}

h2 {
  font-size: var(--fs-3xl);
}

h3 {
  font-size: var(--fs-2xl);
}

h4 {
  font-size: var(--fs-xl);
}

/* ---- Text -------------------------------------------------------------- */
p {
  color: var(--text);
  font-weight: 350;
}

small,
.text-muted {
  color: var(--text-muted);
}

/* ---- Selection / Focus ------------------------------------------------- */
::selection {
  background: rgba(45, 107, 255, 0.35);
  color: rgba(229, 231, 235, 0.92);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-1);
}

/* ---- Utilities --------------------------------------------------------- */
.poster {
  aspect-ratio: 2 / 3;
  border-radius: var(--r-1);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.glass {
  background: rgba(18, 20, 24, 0.72);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-soft);
}

.glow-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(45, 107, 255, 0.35),
    transparent
  );
}