/* ==========================================================================
   Charles Wang Portfolio — Modern Dark Glass Theme (Bootstrap-friendly)
   Drop-in replacement for assets/css/styles.css
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Base palette */
  --bg0:#070A12;
  --bg1:#0A0F1F;
  --bg2:#0E1730;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --faint: rgba(255,255,255,.50);

  /* Glass + borders */
  --glass: rgba(255,255,255,.065);
  --glass2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.14);
  --border2: rgba(255,255,255,.10);

  /* Accent */
  --accent: #7c5cff;
  --accent2: #3dd6ff;            /* subtle secondary glow */
  --danger: #ff4d6d;
  --success: #37d67a;

  /* Shadows */
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 10px 24px rgba(0,0,0,.35);
  --shadow3: 0 6px 14px rgba(0,0,0,.30);

  /* Radii */
  --r-lg: 1.25rem;
  --r-md: 1rem;
  --r-sm: .85rem;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 140ms;
  --t-med: 220ms;
}

/* ---------- Global ---------- */
html, body { height: 100%; }
body{
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 18% 10%, rgba(124,92,255,.22) 0%, transparent 58%),
    radial-gradient(900px 600px at 85% 18%, rgba(61,214,255,.14) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
::selection { background: rgba(124,92,255,.35); }

/* Strong, modern focus ring (keyboard accessibility) */
:focus-visible{
  outline: 2px solid rgba(124,92,255,.75);
  outline-offset: 3px;
  border-radius: .6rem;
}

/* Bootstrap “muted” override to match dark theme */
.text-muted{ color: var(--muted) !important; }

/* ---------- Layout sections ---------- */
.section{ padding: 96px 0; }
.section-alt{
  background: rgba(255,255,255,0.03);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}

.section-title{
  font-weight: 850;
  letter-spacing: -0.03em;
}

/* ---------- Nav ---------- */
.blur-nav{
  background: rgba(7,10,18,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.navbar .nav-link:hover{
  color: rgba(255,255,255,.98) !important;
}
.navbar .nav-link.active{
  color: #fff !important;
  position: relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:.65rem;
  right:.65rem;
  bottom:.15rem;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(61,214,255,.75));
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  padding-top: 88px;
  position: relative;
  overflow: hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.18)),
    url("../img/hero.jpg") center/cover no-repeat;
  filter: saturate(1.12) contrast(1.07);
  transform: scale(1.03);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 22% 22%, rgba(124,92,255,.26), transparent 62%),
    radial-gradient(820px 520px at 78% 30%, rgba(61,214,255,.12), transparent 62%);
  pointer-events:none;
}

.hero h1{
  line-height: 1.05;
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.hero .lead{
  max-width: 60ch;
}

/* ---------- Glass / Cards ---------- */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  color: var(--text);
  box-shadow: var(--shadow2);
}

.card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
}

.card.shadow-sm{
  box-shadow: var(--shadow3);
}

/* ---------- Profile image ---------- */
.profile-img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: 0.95rem;
  transition: transform var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-accent{
  background: linear-gradient(90deg, rgba(124,92,255,1), rgba(92,144,255,.95));
  border-color: rgba(124,92,255,.9);
  color: #fff;
  box-shadow: 0 14px 30px rgba(124,92,255,.22);
}
.btn-accent:hover{
  filter: brightness(1.06);
  color:#fff;
}

.btn-outline-light{
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* ---------- Social icons ---------- */
.social{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  background: rgba(255,255,255,.06);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.social:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
}

.social.dark{
  color: #0c0f18;
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.92);
}

/* ---------- Icon pill (skills) ---------- */

.icon-pill{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,92,255,.16);
  border: 1px solid rgba(124,92,255,.30);
  box-shadow: 0 14px 30px rgba(124,92,255,.12);
}

/* ---------- Skill / Project cards ---------- */
.skill-card, .project-card{
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  box-shadow: var(--shadow3);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

.skill-card:hover, .project-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(124,92,255,.24);
}

.project-card img{
  height: 180px;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.06);
}

.project-card .card-body .text-muted.small{
  color: rgba(255,255,255,.70) !important;
}

/* ---------- Chips ---------- */
.chip{
  font-size: 0.74rem;
  letter-spacing: .01em;
  padding: .28rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
}

/* ---------- Stats ---------- */
.stat{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: var(--r-md);
  padding: .85rem;
}
.stat-label{ color: var(--muted); font-size: .82rem; }
.stat-value{ font-weight: 850; letter-spacing: -0.02em; }

/* ---------- Timeline ---------- */
.timeline-item{
  padding: .95rem 0;
  border-top: 1px dashed rgba(255,255,255,.16);
}
.timeline-item:first-of-type{ border-top: 0; padding-top: 0; }

.timeline-title{ font-weight: 750; }
.timeline-meta{ color: var(--muted); font-size: .92rem; }

/* ---------- Contact ---------- */
.contact-link{
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.88);
  text-decoration: none;
}
.contact-link:hover{ text-decoration: underline; }

.form-control, textarea.form-control{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.45) !important; }

.form-control:focus, textarea.form-control:focus{
  border-color: rgba(124,92,255,.45) !important;
  box-shadow: 0 0 0 .25rem rgba(124,92,255,.18) !important;
}

/* Badges (Formspree status) look cleaner when aligned */
.badge.align-self-center{
  padding: .45rem .6rem;
  border-radius: 999px;
}

/* ---------- Small polish ---------- */
hr.border-light-subtle{
  opacity: .20;
}

footer{
  color: rgba(255,255,255,.55);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px){
  .section{ padding: 76px 0; }
  .hero .lead{ max-width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}