/* =========================================================
   Liquid Glass theme
   Dark  = "Dark Glass + Data"  (default)
   Light = "Light Frosted Glass"
   Loaded after each page's own <style>, so it restyles the
   whole portfolio without touching page content.
   ========================================================= */

/* ---------- Tokens: Dark Glass + Data ---------- */
:root,
:root[data-theme="dark"] {
  --color-bg: #060912;
  --color-bg-gradient-end: #0a0f1e;
  --color-surface: rgba(255,255,255,0.06);
  --color-surface-2: rgba(255,255,255,0.08);
  --color-surface-offset: rgba(255,255,255,0.04);
  --color-border: rgba(255,255,255,0.18);
  --color-border-muted: rgba(255,255,255,0.12);
  --color-text: #eef4ff;
  --color-text-muted: #b2bdd8;
  --color-text-faint: #7d89a8;
  --color-primary: #5cc8ff;
  --color-primary-hover: #8fd9ff;
  --color-primary-highlight: rgba(92,200,255,0.14);
  --color-navbar-bg: transparent;

  --accent-rgb: 59,130,246;
  --shadow-sm: 0 2px 8px rgba(0,0,10,0.35);
  --shadow-md: 0 14px 34px rgba(0,0,12,0.45);
  --shadow-lg: 0 30px 70px rgba(0,0,14,0.55);
  --glow: 0 0 44px rgba(var(--accent-rgb),0.35);

  /* glass */
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.07));
  --glass-bg-strong: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  --card-solid: linear-gradient(135deg, rgba(20,28,52,0.82), rgba(12,17,34,0.74));
  --glass-border: rgba(255,255,255,0.2);
  --glass-inset:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 1px 0 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    inset 0 0 30px rgba(255,255,255,0.035);
  --glass-blur: blur(22px) saturate(185%);
  --glass-spec: rgba(255,255,255,0.24);
  --sheen: rgba(255,255,255,0.14);
  --edge-a: rgba(92,200,255,0.95);
  --edge-b: rgba(124,107,255,0.8);
  --chip-bg: rgba(255,255,255,0.07);

  --neon: linear-gradient(120deg, #22d3ee 0%, #3b82f6 55%, #7c6bff 100%);
  --heading-grad: linear-gradient(100deg, #ffffff 15%, #bfe6ff 55%, #a5b4fc 95%);
  --on-neon: #ffffff;

  --orb-a: rgba(37,99,235,0.72);
  --orb-b: rgba(6,182,212,0.5);
  --orb-c: rgba(124,58,237,0.45);
  --orb-d: rgba(59,130,246,0.4);
  --grid-line: rgba(255,255,255,0.03);

  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

/* ---------- Tokens: Light Frosted Glass ---------- */
:root[data-theme="light"] {
  --color-bg: #f3f6fb;
  --color-bg-gradient-end: #ffffff;
  --color-surface: rgba(255,255,255,0.6);
  --color-surface-2: rgba(255,255,255,0.8);
  --color-surface-offset: rgba(255,255,255,0.5);
  --color-border: rgba(15,23,42,0.1);
  --color-border-muted: rgba(15,23,42,0.08);
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-faint: #8a96aa;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-highlight: rgba(37,99,235,0.08);

  --accent-rgb: 37,99,235;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 10px 30px rgba(15,23,42,0.07);
  --shadow-lg: 0 24px 60px rgba(15,23,42,0.1);
  --glow: 0 0 0 1px rgba(37,99,235,0.12), 0 18px 40px rgba(37,99,235,0.12);

  --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55));
  --glass-bg-strong: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.68));
  --card-solid: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.8));
  --glass-border: rgba(255,255,255,0.95);
  --glass-inset:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(15,23,42,0.04),
    0 0 0 1px rgba(15,23,42,0.06);
  --glass-blur: blur(20px) saturate(160%);
  --glass-spec: rgba(255,255,255,0.9);
  --sheen: rgba(255,255,255,0.75);
  --edge-a: rgba(37,99,235,0.35);
  --edge-b: rgba(14,165,233,0.3);
  --chip-bg: rgba(255,255,255,0.75);

  --neon: linear-gradient(120deg, #2563eb 0%, #0ea5e9 100%);
  --heading-grad: linear-gradient(100deg, #0f172a 0%, #0f172a 55%, #2563eb 100%);
  --on-neon: #ffffff;

  --orb-a: rgba(147,197,253,0.55);
  --orb-b: rgba(165,243,252,0.5);
  --orb-c: rgba(221,214,254,0.45);
  --orb-d: rgba(191,219,254,0.45);
  --grid-line: rgba(15,23,42,0.04);
  color-scheme: light;
}

/* ---------- Background: color behind the glass ---------- */
body {
  background: var(--color-bg) !important;
  color: var(--color-text);
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  transition: background-color 400ms;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body::before {
  inset: -15%;
  background:
    radial-gradient(34% 30% at 84% 10%, var(--orb-a), transparent 70%),
    radial-gradient(30% 34% at 6% 45%, var(--orb-b), transparent 70%),
    radial-gradient(34% 30% at 72% 88%, var(--orb-c), transparent 70%),
    radial-gradient(26% 26% at 40% 62%, var(--orb-d), transparent 70%);
  animation: lg-drift 28s ease-in-out infinite alternate;
}
body::after { /* faint data grid */
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 65% at 50% 30%, #000, transparent);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 30%, #000, transparent);
}
@keyframes lg-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%,2%,0) scale(1.06); }
  100% { transform: translate3d(3%,-2%,0) scale(1); }
}

::selection { background: rgba(var(--accent-rgb),0.4); color: #fff; }

/* ---------- Glass surfaces ---------- */
:root :is(
  .stat, .hero-card, .portrait-card, .panel, .experience-card, .skill-card,
  .service-card, .project-card, .contact-item, .hero-panel, .quote-card
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), var(--shadow-md);
  transition: transform 450ms cubic-bezier(0.16,1,0.3,1), box-shadow 450ms cubic-bezier(0.16,1,0.3,1);
}

/* Reading sections: more solid so long text stays easy to read */
:root :is(.experience-card, #about .panel, #contact .panel) {
  background: var(--card-solid);
}

/* specular highlight + light sheen that sweeps across on hover */
:root :is(
  .stat, .hero-card, .portrait-card, .panel, .experience-card, .skill-card,
  .service-card, .project-card, .contact-item, .hero-panel, .quote-card
)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(90% 55% at 15% 0%, var(--glass-spec), transparent 60%),
    linear-gradient(115deg, transparent 40%, var(--sheen) 50%, transparent 60%);
  background-size: 100% 100%, 250% 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 160% 0;
  transition: background-position 1100ms cubic-bezier(0.16,1,0.3,1);
}
:root :is(
  .stat, .hero-card, .panel, .experience-card, .skill-card,
  .service-card, .project-card, .contact-item, .hero-panel
):hover::before {
  background-position: 0 0, -60% 0;
}

/* neon edge refraction */
:root :is(
  .hero-card, .panel, .experience-card, .skill-card, .service-card,
  .project-card, .hero-panel, .quote-card
)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, var(--edge-a), transparent 30%, transparent 70%, var(--edge-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  transition: opacity 450ms;
}
:root :is(.experience-card, .skill-card, .service-card, .project-card, .panel):hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-inset), var(--shadow-lg), var(--glow);
}
:root :is(.hero-card, .panel, .experience-card, .skill-card, .service-card, .project-card, .hero-panel):hover::after {
  opacity: 1;
}

:root :is(.panel, .hero-card, .project-card, .hero-panel, .quote-card) { border-radius: 1.75rem; }
:root :is(.experience-card, .service-card) { border-radius: 1.6rem; }
:root .skill-card { border-radius: 1.4rem; }

/* ---------- Header: floating glass pill ---------- */
:root .header {
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 0.75rem;
}
:root .header .nav {
  position: relative;
  padding: 0.6rem 0.75rem 0.6rem 0.9rem;
  border-radius: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow: var(--glass-inset), var(--shadow-md);
}
:root .brand-mark {
  background: var(--neon);
  color: var(--on-neon);
  box-shadow: 0 0 22px rgba(var(--accent-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.45);
}
:root .nav-links a { color: var(--color-text-muted); font-weight: 600; }
:root .nav-links a:hover,
:root .nav-links a.active {
  color: var(--color-text);
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px rgba(255,255,255,0.08);
}
:root[data-theme="light"] .nav-links a:hover,
:root[data-theme="light"] .nav-links a.active {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.06);
}

:root :is(.theme-toggle, .menu-toggle, .socials a) {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glass-inset), var(--shadow-sm);
  transition: transform 250ms, box-shadow 250ms;
}
:root :is(.theme-toggle, .menu-toggle, .socials a):hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-inset), var(--glow);
}

/* ---------- Buttons ---------- */
:root .btn-primary {
  background: var(--neon);
  color: var(--on-neon);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 28px rgba(var(--accent-rgb),0.4);
}
:root .btn-primary:hover {
  background: var(--neon);
  filter: brightness(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 38px rgba(var(--accent-rgb),0.55);
}
:root .btn-secondary {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glass-inset);
}
:root .btn-secondary:hover { box-shadow: var(--glass-inset), var(--glow); }

/* ---------- Typography ---------- */
:root h1,
:root .section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.045em;
  background: var(--heading-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root h1 { line-height: 1; }
:root .section-head h2 { line-height: 1.05; }
:root :is(.panel h3, .experience-role h3, .skill-card h3, .service-body h3, .project-card h3, .project-title, .portrait-card h2, .hero-panel h2) {
  font-weight: 700;
  letter-spacing: -0.02em;
}
:root :is(.experience-points li, .muted) { color: var(--color-text-muted); }

/* ---------- Pills, chips, tags ---------- */
:root :is(.eyebrow, .chip, .experience-date, .service-tag, .project-card li, .tech-stack span) {
  background: var(--chip-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
:root[data-theme="light"] :is(.eyebrow, .chip, .experience-date, .service-tag, .project-card li, .tech-stack span) {
  border-color: rgba(15,23,42,0.12);
}
/* project pages: description bullets are not tags */
:root .project-desc li {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 0 0 1.15rem;
  color: var(--color-text-muted);
  font-size: inherit;
}
:root .eyebrow { color: var(--color-primary); }
:root .eyebrow i { filter: drop-shadow(0 0 6px currentColor); }

:root :is(.project-card .kicker, .project-kicker) {
  background: var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root .project-kicker i { color: var(--color-primary); }

/* ---------- Icons & accents ---------- */
:root :is(.service-icon, .contact-item i) {
  background: var(--neon);
  color: var(--on-neon);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 20px rgba(var(--accent-rgb),0.4);
}
:root .skill-card i {
  background: var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.4));
}
:root .dot {
  background: var(--neon);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0.15), 0 0 14px rgba(var(--accent-rgb),0.7);
}
:root :is(.experience-points, .project-desc) li::before {
  background: var(--neon);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.7);
}

/* ---------- Hero: data snapshot card ---------- */
:root .portrait {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  background:
    radial-gradient(60% 50% at 80% 15%, rgba(37,99,235,0.55), transparent 70%),
    radial-gradient(60% 55% at 15% 85%, rgba(6,182,212,0.4), transparent 70%),
    rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
:root[data-theme="light"] .portrait {
  background:
    radial-gradient(60% 50% at 80% 15%, rgba(147,197,253,0.6), transparent 70%),
    radial-gradient(60% 55% at 15% 85%, rgba(165,243,252,0.55), transparent 70%),
    rgba(255,255,255,0.4);
}
:root .portrait-card { background: linear-gradient(135deg, rgba(14,20,40,0.6), rgba(14,20,40,0.35)); }
:root[data-theme="light"] .portrait-card { background: var(--glass-bg-strong); }
:root .portrait-card p { color: var(--color-text); opacity: 0.85; }

.kpi-board {
  width: 100%;
  display: grid;
  gap: 0.75rem;
}
.kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kpi-head i { color: var(--color-primary); margin-right: 0.35rem; }
.kpi-head span:last-child { color: var(--color-text-faint); font-weight: 600; text-transform: none; letter-spacing: 0; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.kpi {
  padding: 0.85rem 1rem;
  border-radius: 1.1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--glass-inset);
}
.kpi strong {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi strong small { font-size: 0.55em; letter-spacing: 0; }
.kpi span { display: block; margin-top: 0.35rem; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; }
.spark { width: 100%; height: 56px; overflow: visible; }
.spark .spark-line { fill: none; stroke: url(#sparkStroke); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.7)); }
.spark .spark-area { fill: url(#sparkFill); }
.spark .spark-dot { fill: #fff; stroke: var(--color-primary); stroke-width: 2; }

/* ---------- Small fixes ---------- */
:root .btn { white-space: nowrap; }
:root .hero h1 { max-width: 13ch; }
:root .hero-grid > div > h1 { font-size: clamp(2.75rem, 1rem + 5vw, 4.75rem); }
:root .skip-link { top: -5rem; background: var(--neon); color: var(--on-neon); }
:root .skip-link:focus { top: 1rem; }

/* ---------- Forms ---------- */
:root :is(input, textarea) {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: border-color 200ms, box-shadow 200ms;
}
:root[data-theme="light"] :is(input, textarea) { background: #ffffff; border-color: rgba(15,23,42,0.12); }
:root :is(input, textarea)::placeholder { color: var(--color-text-faint); }
:root :is(input, textarea):focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.18), 0 0 24px rgba(var(--accent-rgb),0.22);
}

/* ---------- Footer ---------- */
:root .footer { border-top: 1px solid var(--color-border-muted); }

/* ---------- Navbar fit on mid-size screens ---------- */
:root .header .nav { flex-wrap: nowrap; }
:root ul.nav-links { gap: 0.25rem; }
@media (max-width: 1200px) and (min-width: 761px) {
  :root .brand-name span:last-child { display: none; }
  :root ul.nav-links a { padding: 0.55rem 0.7rem; }
}
@media (max-width: 920px) and (min-width: 761px) {
  :root .nav .btn-primary { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root .nav-links {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: var(--glass-inset), var(--shadow-lg);
  }
  :root[data-theme="dark"] .nav-links.open { background: rgba(10,14,30,0.88); }
  :root[data-theme="light"] .nav-links.open { background: rgba(255,255,255,0.95); }
  /* project pages: nav wraps under the brand, so keep it transparent */
  :root nav.nav-links { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* lighter blur on phones keeps scrolling smooth */
  :root { --glass-blur: blur(14px) saturate(170%); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  :root :is(.experience-card, .skill-card, .service-card, .project-card, .panel):hover { transform: none; }
  :root :is(.stat, .hero-card, .panel, .experience-card, .skill-card, .service-card, .project-card, .contact-item, .hero-panel)::before { transition: none; }
}