/* AventraAI — Cognitive Nexus design system */
@import url('fonts/google-fonts.css');
@import url('fonts/material-symbols.css');

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

:root {
  --surface: #fbf9fb;
  --surface-container-low: #f5f3f5;
  --surface-container: #efedef;
  --surface-container-high: #eae7ea;
  --surface-container-highest: #e4e2e4;
  --on-surface: #1b1b1d;
  --on-surface-variant: #44474d;
  --outline: #75777e;
  --outline-variant: #c5c6cd;
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #0d1c32;
  --on-primary-container: #76849f;
  --secondary: #0059bb;
  --secondary-container: #0070ea;
  --secondary-fixed: #d8e2ff;
  --secondary-fixed-dim: #adc7ff;
  --tertiary-fixed: #b4ebff;
  --tertiary-fixed-dim: #3cd7ff;
  --on-tertiary-fixed: #001f27;
  --on-background: #1b1b1d;
}

html { scroll-behavior: smooth; }
body {
  background: var(--surface);
  color: var(--on-surface);
  min-height: 100dvh;
}

.glass-panel,
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 30px rgba(10, 25, 47, 0.04);
}

.neural-background {
  background: radial-gradient(circle at 50% 30%, rgba(0, 89, 187, 0.06) 0%, transparent 65%);
  position: relative;
}
.neural-background::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(0,89,187,0.04) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(0,89,187,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
  pointer-events: none;
}

.neural-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(0, 89, 187, 0.35), transparent);
  height: 1px; width: 100%;
  opacity: 0.35;
}

.text-glow { text-shadow: 0 0 30px rgba(0, 89, 187, 0.18); }

.hover-underline { position: relative; }
.hover-underline::after {
  content: '';
  position: absolute;
  width: 0; height: 1px;
  bottom: -3px; left: 50%;
  background-color: var(--secondary);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.hover-underline:hover::after { width: 100%; }

.animated-underline { position: relative; }
.animated-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background-color: var(--secondary);
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.25s ease-out;
}
.animated-underline:hover::after { transform: scaleX(1); }

.talent-chip {
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
  font-family: Geist, ui-sans-serif, system-ui;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 2px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Outlined';
}

/* card hover lift */
.lift { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px rgba(10,25,47,0.15); }

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* remove tap highlight */
button, a { -webkit-tap-highlight-color: transparent; }

/* ---------- 3D / 2D view toggle ---------- */
.view-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  box-shadow: inset 0 1px 3px rgba(10, 25, 47, 0.06);
}
.view-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 42px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ffa091, #8da9fc);
  box-shadow: 0 2px 10px rgba(141, 169, 252, 0.45);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.view-toggle[data-active="2d"] .view-toggle-thumb { transform: translateX(42px); }
.view-toggle-opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 32px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.25s ease;
}
.view-toggle-opt:hover { color: var(--on-surface); }
.view-toggle-opt.is-active { color: #fff; }