/* ============================================================
   BIG SCREEN HACK — Colors & Type
   Source: bigscreenhack-v3-glass/index.html + events/ + sponsor.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

:root{
  /* -------- BACKGROUNDS (cinema black gradient) -------- */
  --bg:        #050608;  /* near-black base */
  --bg-1:      #0a0c12;  /* section divide 1 */
  --bg-2:      #101622;  /* card / raised surface */
  --bg-3:      #161c2b;  /* hover / stepped elevation */

  /* -------- INK (cool-neutral on dark) -------- */
  --ink:       #f3f5f8;  /* primary text */
  --ink-2:     #c4ccdc;  /* secondary / body */
  --ink-3:     #8f9ab0;  /* muted / meta / captions */
  --ink-4:     #3a4258;  /* low-contrast graphical */

  /* -------- ACCENT — VIDEOSTACK BLUE -------- */
  --accent:        #3d7dff;
  --accent-2:      #8fb4ff;
  --accent-hover:  #2556c8;
  --accent-dim:    rgba(61,125,255,.14);
  --accent-glow:   rgba(61,125,255,.35);

  /* -------- ACCENT — CANNES / GOLD -------- */
  --accent-warm:       #f4c542;
  --accent-warm-2:     #ffdb73;
  --accent-warm-hover: #d9a82b;
  --accent-warm-dim:   rgba(244,197,66,.12);
  --accent-warm-glow:  rgba(244,197,66,.35);
  --accent-warm-ink:   #2a1c00;

  /* -------- UTILITY SIGNALS -------- */
  --warm:      #ff7a3a;  /* orange (filmmaker tint) */
  --red:       #ff3b55;  /* REC / live / urgent */
  --red-glow:  rgba(255,59,85,.4);

  /* -------- RULES / BORDERS -------- */
  --line:      rgba(255,255,255,.06);
  --line-2:    rgba(255,255,255,.14);
  --grid:      rgba(255,255,255,.04);

  /* -------- EASINGS -------- */
  --e-out:    cubic-bezier(.16,1,.3,1);      /* expo-out hero */
  --e-io:     cubic-bezier(.76,0,.24,1);     /* in-out power */
  --e-power:  cubic-bezier(.6,.05,.01,.99);  /* dramatic */
  --e-cannes: cubic-bezier(.22,1,.36,1);     /* sub-page */

  /* -------- RADIUS (slate aesthetic: near-zero) -------- */
  --radius-0: 0px;
  --radius-1: 1px;
  --radius-2: 2px;   /* default cards/buttons */
  --radius-4: 4px;

  /* -------- SPACING (8-pt rhythm) -------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  --s-16:64px; --s-20:80px; --s-24:96px;

  /* -------- FONT STACKS -------- */
  --display:     'Bebas Neue', Impact, sans-serif;
  --editorial:   'Instrument Serif', 'Playfair Display', Georgia, serif;
  --body:        'Manrope', system-ui, -apple-system, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, monospace;
  --display-alt: 'Space Grotesk', system-ui, sans-serif;

  /* -------- FLUID TYPE SCALE -------- */
  --fs-hero:     clamp(3.8rem,11vw,11.5rem);
  --fs-display:  clamp(3rem,10vw,10rem);
  --fs-h1:       clamp(2.8rem,8vw,6.6rem);
  --fs-h2:       clamp(2.2rem,4.4vw,3.8rem);
  --fs-h3:       clamp(1.4rem,2vw,1.85rem);
  --fs-lede:     clamp(1.02rem,1.25vw,1.2rem);
  --fs-body:     1.05rem;
  --fs-small:    0.95rem;
  --fs-mono:     0.82rem;
  --fs-mono-xs:  0.55rem;
  --fs-mono-micro: 0.5rem;

  /* -------- TRACKING -------- */
  --ls-display:  0.02em;
  --ls-mono:     0.18em;
  --ls-mono-lg:  0.26em;
  --ls-mono-xl:  0.32em;

  /* -------- LINE HEIGHT -------- */
  --lh-display:  0.86;
  --lh-hero:     0.82;
  --lh-tight:    0.95;
  --lh-normal:   1.5;
  --lh-loose:    1.65;

  /* -------- SHADOWS & GLOWS -------- */
  --shadow-glow-accent: 0 0 60px rgba(61,125,255,.38);
  --shadow-glow-warm:   0 0 60px rgba(244,197,66,.38);
  --shadow-glow-red:    0 0 10px var(--red);
  --shadow-frame:       0 6px 20px rgba(0,0,0,.55);

  /* -------- BLUR -------- */
  --blur-nav: blur(12px);
  --blur-md:  blur(10px);
  --blur-sm:  blur(6px);

  /* -------- GRADIENTS -------- */
  --grad-hero-wash:   linear-gradient(180deg,rgba(5,6,8,.4) 0%,rgba(5,6,8,.75) 60%,rgba(5,6,8,.95) 100%);
  --grad-prize-gold:  linear-gradient(135deg,rgba(244,197,66,.08),rgba(244,197,66,.02));
  --grad-cannes-chip: linear-gradient(90deg,#f4c542,#ff9e2c);
  --grad-accent-res:  linear-gradient(135deg,rgba(61,125,255,.15),rgba(61,125,255,.04));
  --grad-card-fade:   linear-gradient(180deg,transparent 40%,rgba(5,6,8,.95) 100%);
}

/* ============================================================
   SEMANTIC TYPE HELPERS
   ============================================================ */

.bsh-display      { font-family:var(--display); font-weight:400; line-height:var(--lh-hero); letter-spacing:var(--ls-display); text-transform:uppercase; color:var(--ink); }
.bsh-hero-title   { font-family:var(--display); font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-display); text-transform:uppercase; }
.bsh-manifesto    { font-family:var(--display); font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:.01em; text-transform:uppercase; }
.bsh-h1           { font-family:var(--display); font-size:var(--fs-h1); line-height:.92; letter-spacing:.01em; text-transform:uppercase; }
.bsh-h2           { font-family:var(--display); font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:var(--ls-display); text-transform:uppercase; }
.bsh-h3           { font-family:var(--display); font-size:var(--fs-h3); line-height:1.1; letter-spacing:var(--ls-display); text-transform:uppercase; font-weight:500; }
.bsh-editorial    { font-family:var(--editorial); font-style:italic; font-weight:400; color:var(--ink-2); line-height:1.55; }
.bsh-lede         { font-family:var(--editorial); font-style:italic; font-size:var(--fs-lede); line-height:1.55; color:var(--ink-2); }
.bsh-body         { font-family:var(--body); font-size:var(--fs-body); line-height:var(--lh-normal); color:var(--ink-2); }
.bsh-body b       { color:var(--ink); font-weight:500; }
.bsh-mono         { font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:500; }
.bsh-slate        { font-family:var(--mono); font-size:.78rem; letter-spacing:var(--ls-mono-lg); text-transform:uppercase; color:var(--accent); font-weight:500; }
.bsh-eyebrow-gold { font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:var(--ls-mono-lg); text-transform:uppercase; color:var(--accent-warm); font-weight:500; }

/* Inline helpers inside display type (from v3) */
.bsh-ac           { color:var(--accent); }
.bsh-warm         { color:var(--accent-warm); font-weight:500; }
.bsh-ed           { font-family:var(--editorial); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-2); }
.bsh-out          { -webkit-text-stroke:1.5px var(--ink); color:transparent; }