/* ============================================================
   GlorifyTC — Dark Mode + Liquid Glass
   Load after design-system.css
   ============================================================ */

/* Flash prevention — suppressed until load event removes [data-preload] */
[data-preload] *,
[data-preload] *::before,
[data-preload] *::after { transition: none !important; }

/* Smooth theme switching on user toggle */
body { transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.navbar { transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.4s var(--ease); }

/* ============================================================
   DARK THEME TOKENS
   All design-system.css components using CSS vars adapt for free
   ============================================================ */
[data-theme="dark"] {
  /* Black & blue — the pre-redesign night identity, retuned for the clean grid */
  --paper:       #05070D;   /* blue-black */
  --paper-2:     #0A0E17;
  --paper-3:     #111726;
  --ink-surface: #000000;
  --ink:         #E9F3F8;   /* cool white */
  --ink-2:       #8A97AB;   /* muted blue-grey */
  --ink-3:       #515C6E;
  --on-dark:     #E9F3F8;
  --on-dark-2:   #8A97AB;
  --line:        rgba(120,190,255,0.10);
  --line-2:      rgba(120,190,255,0.17);
  --line-dark:   rgba(120,190,255,0.10);
  --accent:      #00D1FF;   /* neon brand cyan */
  --accent-soft: rgba(0,209,255,0.12);
  --cyan-300:    #5CE1FF;   /* cyan ramp for CTA gradients */
  --cyan-400:    #00D1FF;
  --cyan-500:    #00A8D6;
  --cyan-600:    #0088B3;
  color-scheme: dark;
}

/* ============================================================
   LIQUID GLASS UTILITIES
   Refractive translucency: blur + specular top edge + inset glow
   ============================================================ */

/* Full surface — modals, panels, sheets */
.glass {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(24px) saturate(200%) brightness(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.02);
  border: 1px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.50);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 1px 4px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.60);
}
[data-theme="dark"] .glass {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.09);
  border-top-color: rgba(255,255,255,0.16);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.30),
    0 1px 4px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Small — buttons, chips, pills */
.glass-sm {
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.28);
  border-top-color: rgba(255,255,255,0.55);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.70);
}
[data-theme="dark"] .glass-sm {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Inverted — for use on dark bands (CTA, Founder) */
.glass-invert {
  background: rgba(0,0,0,0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.20);
  border-radius: 16px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ============================================================
   NAV — liquid glass bar
   Enhances existing backdrop-filter with specular highlights
   ============================================================ */
.navbar {
  background: rgba(251,250,247,0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.72);
}
.navbar.scrolled {
  background: rgba(251,250,247,0.90);
}
[data-theme="dark"] .navbar {
  background: rgba(17,17,16,0.72);
  border-bottom-color: rgba(255,255,255,0.07);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .navbar.scrolled {
  background: rgba(17,17,16,0.92);
}

/* dark nav links */
[data-theme="dark"] .nav-links a { color: var(--ink-2); }
[data-theme="dark"] .nav-links a:hover { color: var(--ink); }
[data-theme="dark"] .nav-links a.active { color: var(--accent); }
[data-theme="dark"] .nav-links a::after { background: var(--accent); box-shadow: 0 0 8px rgba(0,209,255,0.6); }
[data-theme="dark"] .language-btn { color: var(--ink-2); }
[data-theme="dark"] .language-btn:hover { color: var(--ink); }
[data-theme="dark"] .nav-toggle { border-color: var(--line-2); color: var(--ink-2); }

/* ============================================================
   CHAT BUTTON — cyan gradient circle, colour-matched to the
   nav "Get Started" CTA (--cyan-400 → --cyan-600) with soft halo.
   ============================================================ */
.chat-button {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-600));
  border: none;
  color: #fff;
  box-shadow: 0 0 24px rgba(0,209,255,0.30);
}
.chat-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--cyan-300), var(--cyan-500));
  box-shadow: 0 0 38px rgba(0,209,255,0.50);
}

/* ============================================================
   CHAT MODAL — glass panel
   ============================================================ */
.chat-modal {
  background: rgba(251,250,247,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  border-top-color: rgba(255,255,255,0.55);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.14),
    0 4px 16px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.40);
}
[data-theme="dark"] .chat-modal {
  background: rgba(20,20,18,0.90);
  border-color: rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.14);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* chat UI elements — use CSS vars so they adapt for free */
.chat-header { background: transparent; border-bottom-color: var(--line); }
.chat-title h3 { color: var(--ink); text-shadow: none; }
.chat-title p { color: var(--ink-2); }
.chat-close { background: transparent; border: none; color: var(--ink-3); }
.chat-close:hover { background: var(--paper-2); color: var(--ink); }
.chat-messages { background: transparent; }
.message.assistant { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.message.user { background: var(--ink); color: var(--paper); }
.chat-input { background: transparent; border-top-color: var(--line); }
.chat-input input {
  background: var(--paper-2); border-color: var(--line-2);
  color: var(--ink); -webkit-text-fill-color: unset;
}
.chat-input input::placeholder { color: var(--ink-3); }
.chat-input input:focus { border-color: var(--ink); outline: none; box-shadow: none; }
.chat-input button { background: var(--ink); color: var(--paper); }

/* ============================================================
   LANGUAGE DROPDOWN — glass panel
   ============================================================ */
.language-dropdown {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme="dark"] .language-dropdown {
  background: rgba(27,27,25,0.92);
  border-color: rgba(255,255,255,0.09);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .language-option { color: var(--ink-2); }
[data-theme="dark"] .language-option:hover { background: var(--paper-3); color: var(--ink); }
[data-theme="dark"] .language-option.active-lang { color: var(--ink); }

/* ============================================================
   BLACK & BLUE — night-mode accents (light mode stays editorial)
   ============================================================ */

/* Accent words glow neon cyan instead of reading as quiet italic.
   Covers landing (.display/.h2/.section-title) + every page's hero title. */
[data-theme="dark"] .display .cyan,
[data-theme="dark"] .h2 .cyan,
[data-theme="dark"] .section-title .cyan,
[data-theme="dark"] .hero-title .cyan,
[data-theme="dark"] .projects-head h1 .cyan {
  color: var(--accent);
  font-style: italic;
  text-shadow: 0 0 26px rgba(0,209,255,0.45);
}

/* Primary CTAs — cyan gradient with a soft halo (hero + nav) */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .nav-right .cta-button {
  background: linear-gradient(135deg, var(--cyan-400), var(--cyan-600));
  color: #001018;
  border-color: transparent;
  box-shadow: 0 0 24px rgba(0,209,255,0.30);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .nav-right .cta-button:hover {
  background: linear-gradient(135deg, var(--cyan-300), var(--cyan-500));
  box-shadow: 0 0 38px rgba(0,209,255,0.50);
  transform: translateY(-1px);
}

/* Outline button picks up the cyan edge on hover */
[data-theme="dark"] .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Ambient aurora behind the hero — the old "space" atmosphere, cleaned up.
   isolate + z-index:-1 keeps it behind content; clip contains the glow.
   Applied to every page's hero section, not just the landing hero. */
[data-theme="dark"] .hero,
[data-theme="dark"] .about-hero,
[data-theme="dark"] .services-header,
[data-theme="dark"] .team-hero,
[data-theme="dark"] .blog-header,
[data-theme="dark"] .contact-header,
[data-theme="dark"] .projects-head {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-theme="dark"] .hero::before,
[data-theme="dark"] .about-hero::before,
[data-theme="dark"] .services-header::before,
[data-theme="dark"] .team-hero::before,
[data-theme="dark"] .blog-header::before,
[data-theme="dark"] .contact-header::before,
[data-theme="dark"] .projects-head::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 140%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 48% at 18% 12%, rgba(0,209,255,0.16), transparent 70%),
    radial-gradient(34% 44% at 86% 22%, rgba(0,120,255,0.13), transparent 70%),
    radial-gradient(30% 40% at 62% 78%, rgba(138,43,226,0.09), transparent 70%);
  filter: blur(6px);
  animation: heroAurora 16s ease-in-out infinite alternate;
}
@keyframes heroAurora {
  from { transform: translate3d(0,0,0) scale(1);      opacity: 0.85; }
  to   { transform: translate3d(0,-3%,0) scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .hero::before,
  [data-theme="dark"] .about-hero::before,
  [data-theme="dark"] .services-header::before,
  [data-theme="dark"] .team-hero::before,
  [data-theme="dark"] .blog-header::before,
  [data-theme="dark"] .contact-header::before,
  [data-theme="dark"] .projects-head::before { animation: none; }
}