/* ============================================================
   Witzdom — Cosmic / Sci-Fi overlay theme (lite, perf pass)
   ============================================================ */

:root {
  --cosmic-bg-1: #0a0b3d;
  --cosmic-bg-2: #14165c;
  --cosmic-bg-3: #241a7a;
  --neon-cyan: #7cf5ff;
  --neon-violet: #c9a4ff;
  --neon-pink: #ff7cf5;
  --neon-lime: #9cffc4;
}

/* ---------- Cosmic depth background (dark only) — STATIC for perf ---------- */
html.dark body {
  background:
    radial-gradient(1000px 800px at 15% -10%, rgba(201, 164, 255, 0.45), transparent 60%),
    radial-gradient(900px 700px at 90% 5%, rgba(124, 245, 255, 0.38), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(255, 124, 245, 0.35), transparent 65%),
    linear-gradient(135deg, #0a0b3d, #1a1580 40%, #2a1a9a 70%, #0a0b3d) !important;
  background-attachment: fixed !important;
}

/* Subtle dot grid — dark only, static */
html.dark body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(180, 200, 255, 0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}

/* Keep content above overlays */
body > * { position: relative; z-index: 1; }

html.dark .aurora-bg { opacity: 0.25 !important; }
html.dark .blob { opacity: 0.45 !important; filter: blur(60px); }

/* ---------- Animated gradient headings ---------- */
@keyframes text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
html.dark h1,
html.dark h2 {
  background: linear-gradient(90deg, #ffffff, #d6ddff, #7cf5ff, #c9a4ff, #ffffff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
  animation: text-shimmer 8s ease-in-out infinite;
  transition: filter .3s ease, text-shadow .3s ease;
}
:root:not(.dark) h1,
:root:not(.dark) h2 {
  background: linear-gradient(90deg, #ea6a1f, #ff8a3d, #c9a4ff, #ea6a1f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 8s ease-in-out infinite;
  transition: filter .3s ease, text-shadow .3s ease;
}
h1:hover, h2:hover {
  filter: brightness(1.25) drop-shadow(0 0 18px rgba(124, 245, 255, 0.7));
  animation-duration: 3s;
}
:root:not(.dark) h1:hover,
:root:not(.dark) h2:hover {
  filter: brightness(1.15) drop-shadow(0 0 18px rgba(234, 106, 31, 0.6));
}
h3, p, a, span, dt, dd { transition: text-shadow .25s ease, color .25s ease; }
html.dark h3:hover, html.dark p:hover, html.dark dt:hover {
  text-shadow: 0 0 14px rgba(124, 245, 255, 0.7), 0 0 24px rgba(201, 164, 255, 0.5);
}
:root:not(.dark) h3:hover, :root:not(.dark) p:hover, :root:not(.dark) dt:hover {
  text-shadow: 0 0 12px rgba(234, 106, 31, 0.55);
}
html.dark h3 { color: #ffffff !important; }
:root:not(.dark) h3 { color: #0b0e1f !important; }

[class*="uppercase"] { letter-spacing: 0.22em !important; }

/* ---------- Glass pills ---------- */
html.dark .glass-pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(180, 200, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}

/* ---------- Team / plain glass cards ---------- */
html.dark .glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(180, 200, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 30px rgba(6, 8, 30, 0.4);
}
html.dark .glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(180, 200, 255, 0.18) !important;
}

/* Team cards contrast */
#team .glass h3 { color: inherit; }
#team .glass p { color: rgba(30, 34, 60, 0.85); }
html.dark #team .glass p { color: rgba(220, 226, 255, 0.9) !important; }
#team .glass .text-primary { color: #ea6a1f; }
html.dark #team .glass .text-primary { color: #ffa864 !important; }

/* ---------- Tool cards (.card-theme) ---------- */
.card-theme {
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
  filter: saturate(1.2) contrast(1.03);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 12px 28px rgba(20, 20, 60, 0.25);
}
:root:not(.dark) .card-theme {
  filter: saturate(1.3) contrast(1.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 34px rgba(30, 20, 80, 0.28);
  border: 1px solid rgba(255,255,255,0.25);
}
.card-theme:hover {
  transform: translateY(-3px);
  filter: saturate(1.35) brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset, 0 0 30px rgba(255, 140, 60, 0.3), 0 18px 40px rgba(20, 20, 60, 0.35);
}
.card-theme, .card-theme * { color: #ffffff; }
.card-theme .text-muted-foreground,
.card-theme p { color: rgba(255,255,255,0.9) !important; }
.card-theme h3 { color: #ffffff !important; }

/* Robotics gradient */
.card-theme.theme-robotics {
  background: linear-gradient(135deg, #0ea5a4 0%, #0891b2 50%, #1e40af 100%) !important;
}
:root:not(.dark) .card-theme.theme-robotics {
  background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 55%, #6366f1 100%) !important;
}

/* ---------- Glass hover glow (lightweight, no ::before conic) ---------- */
.glass { isolation: isolate; }
.glass:hover {
  transform: translateY(-2px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
html.dark .glass:hover {
  border-color: rgba(180, 200, 255, 0.35) !important;
  box-shadow: 0 0 30px rgba(92, 242, 255, 0.3), 0 14px 40px rgba(6, 8, 30, 0.5) !important;
}
:root:not(.dark) .glass:hover {
  box-shadow: 0 0 30px rgba(234, 106, 31, 0.25), 0 14px 40px rgba(30, 20, 80, 0.2) !important;
}

/* ---------- Buttons ---------- */
html.dark a[class*="bg-foreground"],
html.dark a[class*="bg-primary"],
html.dark button[class*="bg-primary"] {
  background: linear-gradient(135deg, rgba(180,139,255,0.95), rgba(92,242,255,0.95)) !important;
  color: #08091f !important;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 20px rgba(180, 139, 255, 0.35);
}
html.dark a[class*="bg-foreground"]:hover,
html.dark a[class*="bg-primary"]:hover { filter: brightness(1.08); }

/* Muted / primary text */
:root:not(.dark) .text-muted-foreground { color: rgba(20, 24, 50, 0.72) !important; }
html.dark .text-muted-foreground { color: rgba(210, 218, 255, 0.78) !important; }
:root:not(.dark) .text-primary { color: #ea6a1f !important; }
:root:not(.dark) .bg-primary { background: linear-gradient(135deg, #ff8a3d, #ea6a1f) !important; color: #fff !important; }
html.dark .text-primary { color: #ffa864 !important; }

/* Section dividers */
html.dark section + section { position: relative; }
html.dark section + section::before {
  content: "";
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 200, 255, 0.25), transparent);
}

/* ---------- Light-mode background — static ---------- */
html:not(.dark) body {
  background:
    radial-gradient(900px 700px at 10% 0%, rgba(255, 200, 140, 0.5), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(180, 200, 255, 0.5), transparent 60%),
    linear-gradient(135deg, #fff5ec, #ffe6d0 40%, #e6f0ff 100%) !important;
  background-attachment: fixed !important;
}

/* ---------- No page/section transition ---------- */
section { opacity: 1; transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  section { opacity: 1 !important; transform: none !important; }
}