@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@400;600;700;800&display=swap");

:root {
  --brand-red-900: #520000;
  --brand-red-800: #7a0000;
  --brand-red-700: #a30000;
  --brand-red-600: #c31111;
  --brand-black-1000: #070708;
  --brand-black-900: #0b0b0e;
  --brand-black-800: #131318;
  --brand-black-700: #1b1b22;
  --brand-white-100: #f6f6f7;
  --brand-white-80: #d8d8dd;

  --bg: var(--brand-black-900);
  --surface: var(--brand-black-800);
  --surface-2: var(--brand-black-700);
  --text: var(--brand-white-100);
  --muted: #a9a9b2;
  --border: #2e2e36;
  --accent: var(--brand-red-700);
  --accent-strong: var(--brand-red-600);
  --accent-soft: rgba(163, 0, 0, 0.26);
  --accent-glow: rgba(163, 0, 0, 0.35);
  --accent-glow-strong: rgba(163, 0, 0, 0.5);
  --line-fade: linear-gradient(90deg, transparent, rgba(163, 0, 0, 0.68), transparent);
  --focus-ring: 0 0 0 2px rgba(246, 246, 247, 0.13), 0 0 0 4px rgba(163, 0, 0, 0.42);
  --surface-glass: rgba(19, 19, 24, 0.84);
  --ok: #36c172;
  --err: #ff6f7c;
  --ig: #b3378d;

  --radius: 14px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.35);
  --bg-gradient: radial-gradient(1100px 560px at 50% -12%, rgba(163, 0, 0, 0.22) 0%, var(--bg) 62%);
  --hero-gradient: linear-gradient(140deg, rgba(163, 0, 0, 0.22), rgba(255, 255, 255, 0.03));
  --signature-panel-gradient: linear-gradient(145deg, #180d0d 0%, #231011 45%, #10090a 100%);
  --grain: radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.08) 0 0.5px, transparent 0.6px) 0 0 / 3px 3px;
  --scanlines: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  --wallpaper-vignette: radial-gradient(120% 110% at 50% 30%, transparent 0 56%, rgba(7, 7, 8, 0.58) 100%);
  --wallpaper-smoke-a: radial-gradient(46vw 34vw at 78% 18%, rgba(163, 0, 0, 0.2), transparent 72%);
  --wallpaper-smoke-b: radial-gradient(42vw 34vw at 12% 14%, rgba(163, 0, 0, 0.14), transparent 70%);
  --wallpaper-smoke-c: radial-gradient(38vw 28vw at 52% 88%, rgba(163, 0, 0, 0.1), transparent 72%);

  --dur-fast: 140ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
}

@keyframes wallpaper-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translate3d(0.8%, -1.2%, 0) scale(1.03);
    opacity: 0.9;
  }

  100% {
    transform: translate3d(-0.6%, 1%, 0) scale(1.02);
    opacity: 0.72;
  }
}

@keyframes wallpaper-drift-alt {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02);
  }

  50% {
    transform: translate3d(-1%, 0.8%, 0) scale(1.05);
  }

  100% {
    transform: translate3d(0.8%, -0.6%, 0) scale(1.03);
  }
}

@keyframes wallpaper-flicker {
  0%,
  100% {
    opacity: 0.11;
  }

  35% {
    opacity: 0.15;
  }

  68% {
    opacity: 0.09;
  }
}