/*
  KTT Goods Co. shared brand substrate.
  Purpose: make TV-D1 feel present across the site without replacing each page's
  existing layout, tool logic, or page-specific visual direction.
*/

:root {
  --ktt-tv-d1-bg: url("fieldcamo.webp");
  --ktt-theme-bg: #050605;
  --ktt-theme-panel: rgba(6, 8, 6, 0.78);
  --ktt-theme-line: rgba(216, 201, 159, 0.16);
  --ktt-theme-grid: rgba(216, 201, 159, 0.035);
  --ktt-theme-green: rgba(31, 69, 42, 0.24);
  --ktt-theme-dust: rgba(216, 201, 159, 0.1);
}

html {
  background: var(--ktt-theme-bg);
}

body.ktt-theme:not(.nvg-mode):not(.thermal-mode):not(.cold-war-mode):not(.soviet-mode):not(.hal-mode):not(.hardbass-mode):not(.ranger-station-mode):not(.night-shift-mode),
body.tactical-rodeo-page {
  position: relative;
  isolation: isolate;
  background-color: var(--ktt-theme-bg) !important;
  background-image:
    radial-gradient(circle at 12% 0%, var(--ktt-theme-dust), transparent 28rem),
    radial-gradient(circle at 82% 12%, var(--ktt-theme-green), transparent 34rem),
    linear-gradient(180deg, rgba(5, 6, 5, 0.95), rgba(5, 6, 5, 0.89)),
    url("fieldcamo.webp") !important;
  background-position: center top, center top, center top, center top !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
  background-size: auto, auto, auto, min(1080px, 180vw) auto !important;
  color-scheme: dark;
}

body.ktt-theme::before,
body.tactical-rodeo-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(90deg, var(--ktt-theme-grid) 1px, transparent 1px),
    linear-gradient(0deg, rgba(216, 201, 159, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  background-size: 48px 48px, 48px 48px, auto;
}

body.ktt-theme .ktt-camo-panel,
body.ktt-theme .ktt-tv-d1-surface {
  background-image:
    linear-gradient(180deg, rgba(5, 6, 5, 0.76), rgba(5, 6, 5, 0.64)),
    url("fieldcamo.webp");
  background-size: auto, cover;
  background-position: center;
}

body.ktt-theme.ktt-home-page:not(.nvg-mode):not(.thermal-mode):not(.cold-war-mode):not(.soviet-mode):not(.hal-mode):not(.hardbass-mode):not(.ranger-station-mode):not(.night-shift-mode) {
  background-image:
    radial-gradient(circle at 8% 0%, rgba(216, 201, 159, 0.16), transparent 30rem),
    radial-gradient(circle at 88% 10%, rgba(31, 69, 42, 0.32), transparent 38rem),
    linear-gradient(180deg, rgba(5, 6, 5, 0.9), rgba(5, 6, 5, 0.8)),
    url("fieldcamo.webp") !important;
  background-size: auto, auto, auto, min(920px, 150vw) auto !important;
}

body.ktt-theme.ktt-home-page::before {
  opacity: 0.5;
}

body.ktt-theme.ktt-home-page .hx-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 12% 4%, rgba(216, 201, 159, 0.14), transparent 45%),
    linear-gradient(90deg, rgba(5, 6, 5, 0.82), rgba(5, 6, 5, 0.63) 58%, rgba(5, 6, 5, 0.88)),
    url("fieldcamo.webp") center top / cover no-repeat !important;
}

body.ktt-theme.ktt-home-page .hx-lab {
  background:
    linear-gradient(180deg, rgba(23, 37, 26, 0.58), rgba(5, 6, 5, 0.78)),
    url("fieldcamo.webp") center / min(980px, 170vw) auto repeat !important;
}

body.ktt-theme.ktt-home-page .hx-card,
body.ktt-theme.ktt-home-page .hx-plate,
body.ktt-theme.ktt-home-page .hx-archive,
body.ktt-theme.ktt-home-page .hx-ops-tile {
  backdrop-filter: blur(10px);
}

body.ktt-theme.tactical-rodeo-page {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(244, 234, 216, 0.1), transparent 28rem),
    radial-gradient(circle at 78% 10%, rgba(126, 49, 35, 0.22), transparent 34rem),
    linear-gradient(180deg, rgba(43, 27, 14, 0.93), rgba(16, 10, 6, 0.91)),
    url("fieldcamo.webp") !important;
  background-blend-mode: normal, normal, normal, multiply;
}

body.ktt-theme.tactical-rodeo-page::before {
  opacity: 0.22;
  background-image:
    linear-gradient(90deg, rgba(244, 234, 216, 0.028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(244, 234, 216, 0.02) 1px, transparent 1px);
}

@media (max-width: 700px) {
  body.ktt-theme,
  body.tactical-rodeo-page {
    background-size: auto, auto, auto, 860px auto;
  }

  body.ktt-theme.ktt-home-page .hx-hero {
    background:
      linear-gradient(180deg, rgba(5, 6, 5, 0.74), rgba(5, 6, 5, 0.92)),
      url("fieldcamo.webp") center top / 980px auto repeat !important;
  }

  body.ktt-theme::before,
  body.tactical-rodeo-page::before {
    background-size: 36px 36px, 36px 36px, auto;
    opacity: 0.24;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ktt-theme,
  body.tactical-rodeo-page {
    background-attachment: scroll;
  }
}