/* theme.css
   Neutral background controls:
   - data-bg-theme: default | semi-black | black | white
   - data-bg-palette: neutral | blue | green | deep-green | sun | shine | beauty | space
   - data-bg-anim: none | drift
*/

/* =========================================================
   0) Root tokens (match existing style.css variables)
   ========================================================= */
:root {
  --bg: #030304;
  --fg: #ffffff;
  --muted: #8899a6;

  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.5);

  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.10);

  /* Background behavior */
  --video-opacity: 0.40;
  --overlay-top: rgba(3, 3, 4, 0.80);
  --nav-bg: rgba(3, 3, 4, 0.70);
  --grid-opacity: 0.15;

  /* Light layer */
  --light-a: rgba(59, 130, 246, 0.20);
  --light-b: rgba(140, 255, 214, 0.12);
  --light-opacity: 0.80;
  --light-speed: 28s;
  --light-blend: screen;
}

/* =========================================================
   1) Theme axis (tone)
   ========================================================= */

body[data-bg-theme="default"] {
  /* uses :root defaults */
}

/* Semi-black: refined noir with silver/cool tint */
body[data-bg-theme="semi-black"] {
  --bg: #070a12;
  --fg: rgba(255, 255, 255, 0.92);
  --muted: rgba(226, 232, 240, 0.72);

  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(226, 232, 240, 0.16);
  --glass-highlight: rgba(148, 163, 184, 0.18);

  --video-opacity: 0.34;
  --overlay-top: rgba(2, 6, 23, 0.68);
  --nav-bg: rgba(2, 6, 23, 0.55);
  --grid-opacity: 0.12;

  --accent: #93c5fd;
  --accent-glow: rgba(147, 197, 253, 0.22);

  --light-a: rgba(147, 197, 253, 0.18);
  --light-b: rgba(226, 232, 240, 0.10);
  --light-opacity: 0.78;
  --light-blend: screen;
}

/* Black: hard contrast */
body[data-bg-theme="black"] {
  --bg: #020203;
  --fg: #ffffff;
  --muted: rgba(226, 232, 240, 0.70);

  --glass-bg: rgba(255, 255, 255, 0.028);
  --glass-border: rgba(255, 255, 255, 0.060);
  --glass-highlight: rgba(255, 255, 255, 0.10);

  --video-opacity: 0.35;
  --overlay-top: rgba(0, 0, 0, 0.78);
  --nav-bg: rgba(0, 0, 0, 0.70);
  --grid-opacity: 0.13;
}

/* White: clean */
body[data-bg-theme="white"] {
  --bg: #f7f7fb;
  --fg: rgba(10, 14, 24, 0.92);
  --muted: rgba(10, 14, 24, 0.68);

  --accent: #2b57ff;
  --accent-glow: rgba(43, 87, 255, 0.22);

  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(10, 14, 24, 0.14);
  --glass-highlight: rgba(43, 87, 255, 0.10);

  --video-opacity: 0.16;
  --overlay-top: rgba(255, 255, 255, 0.70);
  --nav-bg: rgba(255, 255, 255, 0.72);
  --grid-opacity: 0.18;

  --light-opacity: 0.55;
  --light-blend: normal;
}

/* ---- White theme: landing title must be dark (override hardcoded gradient) ---- */
body[data-bg-theme="white"] .landing-title{
  background: linear-gradient(
    180deg,
    rgba(10,14,24,0.96) 0%,
    rgba(10,14,24,0.72) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: rgba(10,14,24,0.92) !important; /* non-webkit fallback */
}
/* ---- White theme: footer must be light + readable (override hardcoded dark footer) ---- */
body[data-bg-theme="white"] .footer{
  background: rgba(240, 242, 247, 0.92) !important;
  border-top-color: rgba(10, 14, 24, 0.12) !important;
  color: rgba(10, 14, 24, 0.72) !important;
}

body[data-bg-theme="white"] .footer .copyright{
  color: rgba(10, 14, 24, 0.72) !important;
}

body[data-bg-theme="white"] .footer-links a{
  color: rgba(10, 14, 24, 0.78) !important;
  border-bottom-color: rgba(10, 14, 24, 0.22) !important;
}

body[data-bg-theme="white"] .footer-links a:hover{
  color: #2b57ff !important;
  border-bottom-color: rgba(43, 87, 255, 0.35) !important;
}
/* ---- White theme: make drift visible (still subtle) ---- */
body[data-bg-theme="white"][data-bg-anim="drift"]{
  --light-opacity: 0.72;
  --light-speed: 26s;
}

body[data-bg-theme="white"][data-bg-anim="drift"] .bg-lights{
  filter: blur(22px) saturate(1.05) !important;
  opacity: var(--light-opacity) !important;
}

/* =========================================================
   2) Palette axis (accent + lights)
   ========================================================= */

body[data-bg-palette="neutral"] {
  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.45);
  --light-a: rgba(59, 130, 246, 0.18);
  --light-b: rgba(140, 255, 214, 0.10);
}

body[data-bg-palette="blue"] {
  --accent: #2b57ff;
  --accent-glow: rgba(43, 87, 255, 0.40);
  --light-a: rgba(43, 87, 255, 0.16);
  --light-b: rgba(59, 130, 246, 0.10);
}

body[data-bg-palette="green"] {
  --accent: #0f6b3a;
  --accent-glow: rgba(15, 107, 58, 0.35);
  --light-a: rgba(15, 107, 58, 0.18);
  --light-b: rgba(140, 255, 214, 0.10);
}

body[data-bg-palette="deep-green"] {
  --accent: #0b5d3b;
  --accent-glow: rgba(11, 93, 59, 0.26);
  --light-a: rgba(11, 93, 59, 0.20);
  --light-b: rgba(140, 255, 214, 0.10);
}

body[data-bg-palette="sun"] {
  --accent: #ffb020;
  --accent-glow: rgba(255, 176, 32, 0.35);
  --light-a: rgba(255, 176, 32, 0.16);
  --light-b: rgba(255, 90, 40, 0.10);
}

body[data-bg-palette="shine"] {
  --accent: #eaefff;
  --accent-glow: rgba(234, 239, 255, 0.35);
  --light-a: rgba(234, 239, 255, 0.14);
  --light-b: rgba(180, 210, 255, 0.10);
}

body[data-bg-palette="beauty"] {
  --accent: #ff4fd8;
  --accent-glow: rgba(255, 79, 216, 0.35);
  --light-a: rgba(255, 79, 216, 0.14);
  --light-b: rgba(255, 176, 220, 0.10);
}

body[data-bg-palette="space"] {
  --accent: #8b7bff;
  --accent-glow: rgba(139, 123, 255, 0.38);
  --light-a: rgba(139, 123, 255, 0.16);
  --light-b: rgba(70, 220, 255, 0.10);
}

/* =========================================================
   3) Apply overrides to existing layers
   ========================================================= */

.bg-video video {
  opacity: var(--video-opacity) !important;
}

.bg-overlay {
  background: linear-gradient(to bottom, var(--overlay-top), var(--bg)) !important;
}

.bg-grid {
  opacity: var(--grid-opacity) !important;
}

.nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--glass-border) !important;
}

/* =========================================================
   4) Light layer + animation
   ========================================================= */

.bg-lights {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: var(--light-opacity);
  filter: blur(24px);
  transform: translate3d(0, 0, 0);
  background:
    radial-gradient(800px 600px at 20% 20%, var(--light-a), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, var(--light-b), transparent 60%),
    radial-gradient(700px 600px at 50% 80%, var(--light-a), transparent 60%);
  mix-blend-mode: var(--light-blend);
}

body[data-bg-anim="none"] .bg-lights {
  display: none;
}

body[data-bg-anim="drift"] .bg-lights {
  display: block;
  animation: bgLightDrift var(--light-speed) ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body[data-bg-anim="drift"] .bg-lights {
    animation: none;
  }
}

@keyframes bgLightDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.00); }
  50%  { transform: translate3d( 1%,  2%, 0) scale(1.02); }
  100% { transform: translate3d( 3%, -2%, 0) scale(1.03); }
}

/* =========================================================
   5) Drift visibility fix (layering)  [FIXED]
   ========================================================= */

/* Keep background behind content WITHOUT negative z-index */
.bg-video{
  position: fixed !important;
  inset: 0;
  z-index: 0;              /* IMPORTANT: not -1 */
  pointer-events: none;
}

/* video layer */
.bg-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* moving lights */
.bg-video .bg-lights{
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
}

/* overlay + grid above lights */
.bg-video .bg-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bg-video .bg-grid{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ensure main UI is above background stage */
.nav,
.landing,
.ad-container,
.footer{
  position: relative;
  z-index: 10;
}


/* =========================================================
   6) White theme UI tuning (cards / buttons / pills + footer ad)
   ========================================================= */

body[data-bg-theme="white"] .card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(10, 14, 24, 0.14) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10) !important;
}

body[data-bg-theme="white"] .card:hover {
  border-color: rgba(43, 87, 255, 0.26) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.14) !important;
}

body[data-bg-theme="white"] .card .card-glow {
  opacity: 0.55 !important;
  filter: blur(18px) !important;
}

body[data-bg-theme="white"] .btn.primary {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: rgba(43, 87, 255, 0.35) !important;
  box-shadow: 0 10px 26px rgba(43, 87, 255, 0.22) !important;
}

body[data-bg-theme="white"] .btn.ghost {
  background: rgba(255, 255, 255, 0.88) !important;
  color: rgba(10, 14, 24, 0.92) !important;
  border-color: rgba(10, 14, 24, 0.16) !important;
}

body[data-bg-theme="white"] .nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom-color: rgba(10, 14, 24, 0.10) !important;
}

body[data-bg-theme="white"] .landing-pill,
body[data-bg-theme="white"] .badge,
body[data-bg-theme="white"] .pill,
body[data-bg-theme="white"] .badge-row .badge {
  background: rgba(255, 255, 255, 0.86) !important;
  color: rgba(10, 14, 24, 0.82) !important;
  border-color: rgba(43, 87, 255, 0.22) !important;
}

body[data-bg-theme="white"] .card .icon {
  filter: saturate(1.05) contrast(1.05);
}

/* Footer ad area (white readability) */
body[data-bg-theme="white"] .ad-fallback {
  background: rgba(240, 242, 247, 0.92);
  border-top: 1px solid rgba(10, 14, 24, 0.12);
}

body[data-bg-theme="white"] .ad-text {
  color: rgba(10, 14, 24, 0.78);
}

body[data-bg-theme="white"] .ad-link {
  color: #2b57ff;
}

body[data-bg-theme="white"] .ad-link:hover {
  text-decoration: underline;
}

body[data-bg-theme="default"],
body[data-bg-theme="semi-black"],
body[data-bg-theme="black"]{
  --accent-glow: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.0));
}

body[data-bg-theme="white"][data-bg-anim="drift"]{
  --light-opacity: 0.80;
  --light-speed: 22s;
  --light-blend: soft-light;
}
/* =========================================================
   7) Palette-driven UI polish (general)
   ========================================================= */

/* Primary buttons follow accent */
.btn.primary {
  box-shadow: 0 10px 26px var(--accent-glow) !important;
}

/* Subtle chip borders */
.landing-pill,
.badge,
.badge-row .badge {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Card hover base */
.card:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Accent hover borders for selected palettes (fallback-safe) */
body[data-bg-palette="blue"] .card:hover,
body[data-bg-palette="green"] .card:hover,
body[data-bg-palette="deep-green"] .card:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  body[data-bg-palette="blue"] .card:hover,
  body[data-bg-palette="green"] .card:hover,
  body[data-bg-palette="deep-green"] .card:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.10)) !important;
  }
}
/* =========================================================
   8) Drift visibility BOOST (make it actually visible)
   ========================================================= */

body[data-bg-anim="drift"]{
  --light-opacity: 0.92;
  --light-speed: 20s;
}

body[data-bg-theme="default"][data-bg-anim="drift"],
body[data-bg-theme="semi-black"][data-bg-anim="drift"],
body[data-bg-theme="black"][data-bg-anim="drift"]{
  --overlay-top: rgba(0,0,0,0.56);
  --video-opacity: 0.42;
  --light-blend: screen;
}

body[data-bg-theme="white"][data-bg-anim="drift"]{
  --light-opacity: 0.88;
  --light-speed: 18s;
  --light-blend: soft-light;
}

body[data-bg-anim="drift"] .bg-lights{
  opacity: var(--light-opacity) !important;
  filter: blur(26px) saturate(1.35) contrast(1.10) !important;
  will-change: transform;
}

body[data-bg-anim="drift"] .bg-lights{
  background:
    radial-gradient(900px 700px at 18% 18%, var(--light-a), transparent 62%),
    radial-gradient(1100px 800px at 82% 26%, var(--light-b), transparent 62%),
    radial-gradient(900px 760px at 52% 86%, var(--light-a), transparent 62%),
    radial-gradient(720px 520px at 60% 40%, rgba(255,255,255,0.06), transparent 65%);
}

@keyframes bgLightDrift {
  0%   { transform: translate3d(-3.5%, -2.5%, 0) scale(1.02); }
  50%  { transform: translate3d( 2.5%,  3.5%, 0) scale(1.06); }
  100% { transform: translate3d( 4.5%, -3.0%, 0) scale(1.08); }
}