/* ===========================================================================
   Big Shot Pictures · Design Tokens  ·  v2 "A Big Identity" (Golden Hour)
   Color, typography, spacing, motion, brand devices. Pull these into any artifact.

   Refreshed against the canonical brand guide. The website-derived v1 values
   (navy / #FFD843 / Bebas Neue) are kept as LEGACY aliases — but they are now
   REMAPPED to the evolved Golden Hour system so existing artifacts that
   reference --bsp-navy / --bsp-yellow / --bsp-font-display automatically adopt
   the refresh: Cinematic Void teal + Golden Halo gold + Anton display.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");

/* Anton — primary display. Tall, bold, fun. */
@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Sink — the "serious" secondary display, for corporate decks. */
@font-face {
  font-family: "Sink";
  src: url("fonts/Sink.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================================
     COLOR · THE GOLDEN HOUR PALETTE  (canonical) — ~60 / 25 / 5 / 5 / 5
     ========================================================================= */

  /* ---- 60%  THE CINEMATIC VOID — deep blacks & rich teal ----------------- */
  --bsp-void:        #0A272C;   /* rich teal — primary background */
  --bsp-void-deep:   #061518;   /* deeper teal-black, for depth & vignettes */
  --bsp-void-soft:   #103138;   /* raised teal surface (cards, alt sections) */

  /* ----  5%  THE CUT — pure black ----------------------------------------- */
  --bsp-cut:         #000000;

  /* ---- 25%  THE GOLDEN HALO — radiant, gradient gold --------------------- */
  --bsp-gold:        #FFD200;   /* pure gold — the canonical accent */
  --bsp-gold-soft:   #FBC02D;   /* warm golden edge */
  --bsp-gold-hi:     #FFE066;   /* hover brighten */
  --bsp-halo-core:   #FFFDE7;   /* near-white luminous core */
  --bsp-halo-mid:    #FFEB3B;   /* vibrant lemon mid-tone */
  --bsp-halo-edge:   #FBC02D;   /* deep warm golden periphery */

  /* ----  5%  THE SPARK — pure whites & lens flares ------------------------ */
  --bsp-spark:       #FFFFFF;

  /* ---- THE GOLDEN HALO · gradient device --------------------------------- */
  --bsp-gradient-halo:
      radial-gradient(circle at 50% 42%,
        var(--bsp-halo-core)  0%,
        var(--bsp-halo-mid)  38%,
        var(--bsp-halo-edge) 100%);
  --bsp-glow-gold:   rgba(255, 210, 0, 0.10);
  --bsp-glow-halo:
      radial-gradient(circle at 50% 50%,
        rgba(255, 210, 0, 0.22) 0%,
        rgba(255, 210, 0, 0.07) 38%,
        transparent 70%);

  /* =========================================================================
     COLOR · semantic & alpha
     ========================================================================= */
  --bsp-fg:          #ffffff;
  --bsp-fg-muted:    rgba(255, 255, 255, 0.85);
  --bsp-fg-dim:      rgba(255, 255, 255, 0.60);
  --bsp-fg-faint:    rgba(255, 255, 255, 0.08);

  --bsp-bg:          var(--bsp-void);
  --bsp-bg-deep:     var(--bsp-void-deep);
  --bsp-bg-elev:     var(--bsp-void-soft);
  --bsp-bg-card:     rgba(255, 255, 255, 0.02);
  --bsp-bg-card-hi:  rgba(255, 255, 255, 0.04);

  --bsp-border:      rgba(255, 255, 255, 0.06);
  --bsp-border-hi:   rgba(255, 255, 255, 0.12);
  --bsp-border-gold: rgba(255, 210, 0, 0.30);
  --bsp-tint-gold:   rgba(255, 210, 0, 0.10);

  --bsp-accent:      var(--bsp-gold);
  --bsp-accent-on:   var(--bsp-void);

  /* =========================================================================
     COLOR · LEGACY (website v1) — REMAPPED to Golden Hour.
     Existing artifacts reference these names; they now resolve to the
     refreshed palette so the whole product moves to v2 in one place.
     ========================================================================= */
  --bsp-navy:        #0A272C;   /* was #0a0e1a → Cinematic Void */
  --bsp-navy-light:  #103138;   /* was #141b2d → Void soft */
  --bsp-yellow:      #FFD200;   /* was #FFD843 → pure gold */
  --bsp-yellow-hi:   #FFE066;
  --bsp-white:       #ffffff;

  /* =========================================================================
     TYPE · families
     ========================================================================= */
  --bsp-font-display:     "Anton", "Oswald", "Impact", "Arial Narrow", sans-serif;
  --bsp-font-serious:     "Sink", "Anton", "Oswald", sans-serif;
  --bsp-font-display-alt: "Bebas Neue", "Anton", sans-serif;   /* legacy display */
  --bsp-font-body:        "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bsp-font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE · scale (px-based, fluid where useful) --------------- */
  --bsp-text-xs:   12px;
  --bsp-text-sm:   13.6px;
  --bsp-text-base: 16px;
  --bsp-text-md:   17.6px;
  --bsp-text-lg:   18.4px;
  --bsp-text-xl:   24px;
  --bsp-text-2xl:  32px;
  --bsp-text-3xl:  40px;
  --bsp-text-display: clamp(40px, 6vw, 72px);
  --bsp-text-hero:    clamp(56px, 9vw, 132px);

  /* ---------- TYPE · weights & tracking --------------------------------- */
  --bsp-weight-light: 300;
  --bsp-weight-regular: 400;
  --bsp-weight-medium: 500;
  --bsp-weight-semibold: 600;

  --bsp-track-label: 0.30em;
  --bsp-track-nav:   0.10em;
  --bsp-track-tight: 0.005em;   /* Anton is condensed — keep tracking minimal */

  --bsp-leading-tight: 0.92;
  --bsp-leading-snug:  1.4;
  --bsp-leading-body:  1.6;
  --bsp-leading-loose: 1.8;

  /* ---------- SPACING (4px grid) ---------------------------------------- */
  --bsp-space-1:  4px;
  --bsp-space-2:  8px;
  --bsp-space-3:  12px;
  --bsp-space-4:  16px;
  --bsp-space-5:  24px;
  --bsp-space-6:  32px;
  --bsp-space-7:  48px;
  --bsp-space-8:  64px;
  --bsp-space-9:  96px;
  --bsp-space-10: 128px;

  /* ---------- RADII ----------------------------------------------------- */
  --bsp-radius-0: 0px;
  --bsp-radius-1: 4px;
  --bsp-radius-pill: 999px;

  /* ---------- ELEVATION / SHADOW --------------------------------------- */
  --bsp-shadow-card: 0 20px 40px -12px rgba(0, 0, 0, 0.55);
  --bsp-shadow-lift: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  --bsp-shadow-gold: 0 8px 32px -8px rgba(255, 210, 0, 0.28);
  --bsp-inset-border: inset 0 0 0 1px var(--bsp-border);

  /* ---------- MOTION ---------------------------------------------------- */
  --bsp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --bsp-ease-soft:   ease;
  --bsp-dur-fast:    0.3s;
  --bsp-dur-base:    0.4s;
  --bsp-dur-slow:    0.8s;

  /* ---------- LAYOUT ---------------------------------------------------- */
  --bsp-content-max: 1400px;
  --bsp-content-narrow: 1000px;
  --bsp-gutter: 4rem;
}

/* ============================================================================
   SEMANTIC ELEMENTS · drop-in defaults
   ============================================================================ */

.bsp-body,
body.bsp {
  background: var(--bsp-bg);
  color: var(--bsp-fg);
  font-family: var(--bsp-font-body);
  font-weight: var(--bsp-weight-regular);
  line-height: var(--bsp-leading-body);
  -webkit-font-smoothing: antialiased;
}

.bsp h1, .bsp-h1 {
  font-family: var(--bsp-font-display);
  font-size: var(--bsp-text-display);
  line-height: var(--bsp-leading-tight);
  font-weight: var(--bsp-weight-regular);
  letter-spacing: var(--bsp-track-tight);
  text-transform: uppercase;
}

.bsp h2, .bsp-h2 {
  font-family: var(--bsp-font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: var(--bsp-leading-tight);
  font-weight: var(--bsp-weight-regular);
  text-transform: uppercase;
}

.bsp h3, .bsp-h3 {
  font-family: var(--bsp-font-display);
  font-size: var(--bsp-text-2xl);
  line-height: 1.05;
  letter-spacing: var(--bsp-track-tight);
  text-transform: uppercase;
}

.bsp p, .bsp-p {
  font-size: var(--bsp-text-md);
  font-weight: var(--bsp-weight-light);
  color: var(--bsp-fg-muted);
  line-height: var(--bsp-leading-loose);
}

.bsp-eyebrow {
  font-size: var(--bsp-text-xs);
  font-weight: var(--bsp-weight-semibold);
  letter-spacing: var(--bsp-track-label);
  text-transform: uppercase;
  color: var(--bsp-gold);
}

.bsp-nav-link {
  font-size: var(--bsp-text-sm);
  font-weight: var(--bsp-weight-medium);
  letter-spacing: var(--bsp-track-nav);
  text-transform: uppercase;
  color: var(--bsp-fg-muted);
}

.bsp-stat-value {
  font-family: var(--bsp-font-display);
  font-size: var(--bsp-text-3xl);
  color: var(--bsp-gold);
}

/* Gold text knocked out of the Golden Halo gradient — for hero / signature type. */
.bsp-gold-grad {
  background: linear-gradient(180deg, var(--bsp-halo-core) 0%, var(--bsp-gold) 45%, var(--bsp-gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================================
   BRAND DEVICES
   ============================================================================ */

/* GRAIN · the signature film-grain noise overlay. Opacity 0.03. Non-negotiable. */
.bsp-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1000;
}

/* THE GOLDEN HALO · radiant gold backdrop. */
.bsp-halo {
  background: var(--bsp-gradient-halo);
  color: var(--bsp-void);
}

/* THE SPOTLIGHT · a beam of light from above — "look here, this matters." */
.bsp-spotlight {
  position: relative;
  background: var(--bsp-void);
  overflow: hidden;
}
.bsp-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%,
      rgba(255, 210, 0, 0.18) 0%,
      rgba(255, 210, 0, 0.06) 26%,
      transparent 58%);
  pointer-events: none;
}

/* SPARKLE · a 4-point star anchor. */
.bsp-sparkle {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  color: var(--bsp-gold);
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%);
}