/* ═══════════════════════════════════════════════
   COMPONENTS.CSS — Reusable UI Components
   ═══════════════════════════════════════════════ */

/* ══ PAGE LOADER ══ */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
#page-loader.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.04em;
}
.loader-logo span { color: var(--accent-3); }
.loader-bar-wrap { width:220px; height:2px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.loader-bar {
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--steel-3), var(--accent-3));
  border-radius:999px;
  transition: width 0.1s linear;
  box-shadow: 0 0 14px rgba(245,190,69,0.7);
}
.loader-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.loader-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--steel-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ══ SCROLL PROGRESS ══ */
#scroll-progress {
  position: fixed; top:0; left:0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--steel-3), var(--accent-3), var(--accent-4));
  z-index: 999;
  box-shadow: 0 0 10px rgba(245,190,69,0.55);
  transition: width 80ms linear;
  pointer-events: none;
}

/* ══ CUSTOM CURSOR ══ */
#cursor-ring {
  position: fixed;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(232,164,32,0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%,-50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
}
#cursor-dot {
  position: fixed;
  width: 5px; height: 5px;
  background: var(--accent-3);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%,-50%);
}
body.cursor-active #cursor-ring {
  width: 54px; height: 54px;
  border-color: rgba(232,164,32,0.65);
  background: rgba(232,164,32,0.06);
}
@media (pointer: coarse) { #cursor-ring, #cursor-dot { display:none; } }

/* ══ NAVIGATION ══ */
#navbar {
  position: fixed; top:0; left:0; right:0;
  z-index: var(--z-overlay);
  height: var(--nav-height);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#navbar.scrolled {
  background: rgba(6,13,24,0.9);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 32px rgba(0,0,0,0.35);
}
[data-theme="light"] #navbar.scrolled { background: rgba(245,242,235,0.92); }

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--px);
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:0.65rem; text-decoration:none; flex-shrink:0; }
.nav-logo-mark {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--steel-1), var(--bg-card));
  border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem; font-weight: 700;
  color: var(--accent-3);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.nav-logo:hover .nav-logo-mark {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 0 22px var(--accent-glow);
}
.nav-logo-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1; letter-spacing: -0.01em;
}
.nav-logo-title {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--steel-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
}

/* Nav links */
.nav-links { display:flex; align-items:center; gap:0.15rem; }
.nav-link {
  padding: 0.42rem 0.78rem;
  border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
  position: relative; white-space: nowrap; cursor: pointer;
}
.nav-link:hover { color: var(--text-primary); background: var(--surface-1); }
.nav-link.active { color: var(--text-primary); }
.nav-link.active::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-3);
}

.nav-right { display:flex; align-items:center; gap:0.65rem; flex-shrink:0; }

.btn-theme {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s var(--ease-spring);
}
.btn-theme:hover {
  background: var(--accent-subtle);
  border-color: rgba(232,164,32,0.3);
  color: var(--accent-3);
  transform: rotate(-12deg) scale(1.08);
}

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; border-radius:var(--r-sm); }
.nav-toggle span {
  display:block; width:22px; height:1.5px;
  background: var(--text-secondary); border-radius:2px;
  transition: all 0.25s var(--ease-smooth);
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }

.nav-mobile {
  position: fixed;
  top: var(--nav-height); left:0; right:0;
  background: rgba(6,13,24,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.5rem var(--px) 2rem;
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.35s var(--ease-smooth), opacity 0.35s;
  z-index: calc(var(--z-overlay) - 1);
  display: none;
}
[data-theme="light"] .nav-mobile { background: rgba(245,242,235,0.97); }
.nav-mobile.open { transform: translateY(0); opacity:1; }
.nav-mobile-links { display:flex; flex-direction:column; gap:0.4rem; }
.nav-mobile-link {
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  font-size: 1rem; font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s; display:block;
}
.nav-mobile-link:hover, .nav-mobile-link.active {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* ══ BUTTONS ══ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.82rem 1.85rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer; border: none;
  position: relative; overflow: hidden;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, background 0.2s, color 0.2s;
  text-decoration: none;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 60%);
  opacity: 0; transition: opacity 0.2s;
}
.btn:hover::after { opacity:1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #0a0a0a;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  box-shadow: 0 10px 40px rgba(232,164,32,0.45);
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
}

.btn-secondary {
  background: var(--surface-1);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-default);
}
.btn-secondary:hover {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-3);
  border: 1.5px solid rgba(232,164,32,0.35);
}
.btn-ghost:hover {
  background: var(--accent-subtle);
  border-color: rgba(232,164,32,0.6);
  box-shadow: 0 0 22px var(--accent-glow);
}

.btn-sm  { padding: 0.55rem 1.2rem;  font-size: var(--text-xs);  font-weight: 600; letter-spacing: 0.04em; }
.btn-lg  { padding: 1rem 2.4rem;     font-size: var(--text-base); }

/* ══ CARDS ══ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border-default);
  background: var(--bg-card-hover);
  border-color: rgba(77,143,204,0.2);
}
.card-accent-top { position: relative; overflow: hidden; }
.card-accent-top::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--accent-2), var(--steel-3), transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.card:hover.card-accent-top::before { transform: scaleX(1); }

/* ══ BADGES ══ */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.27rem 0.78rem;
  border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-gold   { background: var(--accent-subtle);             border: 1px solid rgba(232,164,32,0.25); color: var(--accent-3);  }
.badge-steel  { background: rgba(45,107,173,0.12);            border: 1px solid rgba(77,143,204,0.25); color: var(--steel-4);   }
.badge-green  { background: rgba(46,204,113,0.10);            border: 1px solid rgba(46,204,113,0.20); color: var(--success);   }

/* ══ ICON BOXES ══ */
.icon-box {
  width:48px; height:48px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  transition: all 0.25s var(--ease-spring);
}
.icon-box.gold  { background: var(--accent-subtle);        border-color: rgba(232,164,32,0.25); }
.icon-box.steel { background: rgba(45,107,173,0.10);       border-color: rgba(77,143,204,0.20); }

/* ══ SKILL BARS ══ */
.skill-bar-wrap { display:flex; flex-direction:column; gap:0.35rem; }
.skill-bar-header { display:flex; align-items:center; justify-content:space-between; }
.skill-bar-name { font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }
.skill-bar-pct  { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--accent-3); }
.skill-bar-track { height:3px; background:var(--surface-2); border-radius:var(--r-full); overflow:hidden; }
.skill-bar-fill  {
  height:100%; width:0%;
  border-radius:var(--r-full);
  background: linear-gradient(90deg, var(--steel-2), var(--steel-3), var(--accent-2));
  transition: width 1.2s var(--ease-out);
}

/* ══ FORM ELEMENTS ══ */
.form-group { display:flex; flex-direction:column; gap:0.5rem; }
.form-label {
  font-size: var(--text-xs); font-weight:700;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.form-input {
  width:100%; padding: 0.88rem 1.1rem;
  background: var(--surface-1);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  resize: none;
}
.form-input::placeholder { color:var(--text-tertiary); }
.form-input:focus {
  outline: none;
  border-color: var(--accent-2);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(232,164,32,0.10);
}

/* ══ FILTER TABS ══ */
.filter-tabs { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.filter-tab {
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight:600;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  cursor: pointer; transition: all 0.2s;
}
.filter-tab:hover { color:var(--text-primary); border-color:var(--border-default); }
.filter-tab.active { background:var(--accent-subtle); border-color:rgba(232,164,32,0.4); color:var(--accent-3); }

/* ══ BACK TO TOP ══ */
#back-to-top {
  position: fixed; bottom:2rem; right:2rem;
  z-index: var(--z-raised);
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #0a0a0a;
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem;
  box-shadow: var(--shadow-gold);
  transform: scale(0) rotate(180deg); opacity:0;
  transition: transform 0.35s var(--ease-spring), opacity 0.35s, box-shadow 0.2s;
}
#back-to-top.visible { transform:scale(1) rotate(0deg); opacity:1; }
#back-to-top:hover   { transform:scale(1.12) translateY(-2px); box-shadow: 0 14px 40px rgba(232,164,32,0.50); }

/* ══ TOAST ══ */
#toast {
  position: fixed; bottom:2rem; left:50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight:600;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity:0; pointer-events:none;
  transition: opacity 0.3s, transform 0.3s;
  display:flex; align-items:center; gap:0.5rem; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast .toast-icon { color:var(--success); }

/* ══ LIGHTBOX ══ */
#lightbox {
  position: fixed; inset:0; z-index:var(--z-modal);
  background: rgba(0,0,0,0.93);
  backdrop-filter: blur(16px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity 0.25s;
}
#lightbox.open { opacity:1; pointer-events:all; }
#lightbox img { max-width:90vw; max-height:88vh; border-radius:var(--r-xl); box-shadow:var(--shadow-xl); }
#lightbox-close {
  position:absolute; top:1.5rem; right:1.5rem;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border-default);
  color:var(--text-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition: all 0.2s var(--ease-spring);
}
#lightbox-close:hover { background:var(--accent-subtle); border-color:rgba(232,164,32,0.4); transform:scale(1.1) rotate(90deg); }

/* ══ FOOTER ══ */
#site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2rem;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight:700;
  color: var(--text-primary); letter-spacing:-0.02em;
  margin-bottom: 0.75rem;
}
.footer-tagline {
  font-size: var(--text-sm); color:var(--text-tertiary);
  line-height:1.75; max-width:260px; margin-bottom:1.5rem;
}
.footer-email-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:var(--text-sm); color:var(--accent-3);
  background: var(--accent-subtle);
  border: 1px solid rgba(232,164,32,0.25);
  border-radius: var(--r-full);
  padding: 0.5rem 1rem; font-weight:600;
  transition: all 0.2s; text-decoration:none;
}
.footer-email-btn:hover { background:rgba(232,164,32,0.15); transform:translateY(-1px); }
.footer-col-title {
  font-size:var(--text-xs); font-weight:700;
  color:var(--text-primary);
  text-transform:uppercase; letter-spacing:0.15em; margin-bottom:1.1rem;
}
.footer-links { display:flex; flex-direction:column; gap:0.55rem; }
.footer-links a { font-size:var(--text-sm); color:var(--text-tertiary); transition:color 0.2s; }
.footer-links a:hover { color:var(--accent-3); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-copy { font-size:var(--text-xs); color:var(--text-tertiary); }
.footer-copy span { color:var(--accent-3); }
.footer-socials { display:flex; gap:0.5rem; }
.footer-social-link {
  width:32px; height:32px; border-radius:var(--r-md);
  background:var(--surface-1); border:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:var(--text-secondary);
  transition:all 0.2s; text-decoration:none;
}
.footer-social-link:hover { background:var(--accent-subtle); border-color:rgba(232,164,32,0.3); color:var(--accent-3); transform:translateY(-2px); }

/* ══ BLUEPRINT DECORATIONS ══ */
.blueprint-lines {
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden; z-index:0;
}
.blueprint-lines svg { width:100%; height:100%; opacity:0.35; }

.grid-overlay {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(77,143,204,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,143,204,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ══ HELPER ══ */
.count-up { font-family:var(--font-display); font-weight:700; color:var(--text-primary); line-height:1; }