/* ============================================
   PASSWORD GATE — Mobile First
   ============================================ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow: hidden;
}
.gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
html.authed .gate { display: none !important; }

#gate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.gate__card {
  position: relative; z-index: 1; text-align: center;
  padding: 36px 24px;
  background: rgba(var(--particle-primary), 0.03);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  max-width: 360px; width: 90%;
  box-shadow: var(--shadow-lg);
}

.gate__logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem; font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 12px;
}
.gate__subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 28px; }
.gate__input-wrap { display: flex; gap: 8px; }
.gate__input {
  flex: 1; padding: 14px; background: var(--bg-input); border: 1px solid var(--border-subtle);
  border-radius: 12px; color: var(--text-primary); font-size: 0.9rem; outline: none;
  min-height: 48px; transition: border-color 0.3s ease;
}
.gate__input:focus { border-color: var(--border-accent); }
.gate__input::placeholder { color: var(--text-muted); }
.gate__submit {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gradient); color: var(--bg-primary); flex-shrink: 0;
}
.gate__error { color: #f87171; font-size: 0.78rem; margin-top: 8px; min-height: 1.2em; }

/* Gate theme switcher — inside card, top-right corner, always collapsible */
.gate__corner-theme {
  position: absolute; top: 12px; right: 12px;
}
.gate__corner-theme:not(.expanded) .theme-btn:not(.active) {
  display: none;
}

.gate__hint { font-size: 0.65rem; color: var(--text-muted); }

/* ============================================
   NAVIGATION — Mobile First
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 16px; padding-top: env(safe-area-inset-top, 0);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
@supports (backdrop-filter: blur(12px)) {
  @media (min-width: 768px) {
    .nav { backdrop-filter: blur(12px); }
  }
}
.nav--scrolled { box-shadow: var(--shadow-sm); }

.nav__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center;
  height: 52px;
}

/* Mobile: theme-switcher LEFT, AS CENTER, hamburger RIGHT */
.nav__logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem; font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  flex-shrink: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
}

/* Theme switcher — collapsible on mobile */
.theme-switcher {
  display: flex; gap: 2px; padding: 2px;
  background: var(--bg-input); border-radius: 10px;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* Hide non-active when collapsed — MOBILE ONLY */
@media (max-width: 767px) {
  .theme-switcher:not(.expanded) .theme-btn:not(.active) {
    display: none;
  }
}

.nav__hamburger { margin-left: auto; }
.theme-btn {
  width: 36px; height: 32px; min-width: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--text-muted);
  transition: all 0.3s ease; flex-shrink: 0;
}
.theme-btn.active {
  background: var(--accent-glow); color: var(--text-accent);
  box-shadow: 0 0 10px rgba(var(--particle-primary), 0.2);
}

/* Logout — desktop icon (hidden on mobile) */
.nav__logout--desktop {
  display: none;
  flex-shrink: 0; width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 8px; color: var(--text-muted);
  transition: all 0.3s ease;
}
.nav__logout--desktop:hover { color: #f87171; }

/* Logout — inside mobile menu */
/* Remove border from last link before logout */
.nav__links li:nth-last-child(2) a {
  border-bottom: none;
}
.nav__menu-logout {
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: none !important;
}
.nav__logout-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 0;
  font-size: 1rem; color: #f87171;
  background: none; border: none; cursor: pointer;
  transition: opacity 0.3s ease;
}
.nav__logout-btn:hover { opacity: 0.7; }

/* Hamburger — mobile only */
.nav__hamburger {
  display: flex; flex-direction: column; gap: 5px;
  padding: 4px; min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav__hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: all 0.3s ease;
}
.nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav menu — full screen overlay */
.nav__links {
  position: fixed; top: 52px; left: 0; right: 0;
  height: calc(100vh - 52px); height: calc(100dvh - 52px);
  background: var(--bg-primary); backdrop-filter: blur(24px);
  flex-direction: column; padding: 24px 24px;
  padding-bottom: env(safe-area-inset-bottom, 24px);
  gap: 0; z-index: 200;
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; overflow-y: auto;
}
.nav__links.open { transform: translateX(0); opacity: 1; pointer-events: auto; }

.nav__links a {
  font-size: 1.1rem; color: var(--text-secondary);
  transition: color 0.3s ease;
  padding: 16px 0; min-height: 56px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.nav__links a:hover, .nav__links a.active { color: var(--text-accent); }

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-top {
  position: fixed; bottom: 24px; right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0));
  z-index: 90; width: 48px; height: 48px;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border-card);
  backdrop-filter: blur(12px); color: var(--text-accent);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all 0.3s ease; cursor: pointer;
}
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:active { transform: scale(0.92); }

/* ============================================
   TABLET+ (768px)
   ============================================ */
@media (min-width: 768px) {
  .nav { padding: 0 24px; }
  .nav__inner { height: 64px; gap: 16px; }

  .nav__hamburger { display: none; }
  .nav__menu-logout { display: none; }

  /* Desktop order: AS(1) | links(2, centered) | theme(3) | logout(4) */
  .nav__logo { order: 1; position: static; transform: none; }
  .nav__links {
    order: 2;
    position: static; flex-direction: row; padding: 0; gap: 24px;
    transform: none; opacity: 1; pointer-events: auto;
    background: none; backdrop-filter: none; overflow: visible;
    flex: 1; height: auto; z-index: auto;
    align-items: center; justify-content: center;
  }
  .theme-switcher { order: 3; margin: 0; flex-shrink: 0; }
  .theme-btn { width: 32px; height: 28px; }
  .nav__logout--desktop { order: 4; display: flex; }
  .nav__links a {
    font-size: 0.82rem; padding: 0; min-height: auto;
    border-bottom: none; position: relative;
  }
  .nav__links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; background: var(--accent-gradient);
    transition: width 0.3s ease;
  }
  .nav__links a:hover::after, .nav__links a.active::after { width: 100%; }

  .gate__submit:hover { transform: scale(1.05); box-shadow: var(--shadow-glow); }
  .scroll-top:hover { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
}

/* ============================================
   FUSION THEME EFFECTS
   ============================================ */
html[data-theme="fusion"] .hero__name {
  background: linear-gradient(135deg, #ff6eb4, #00e5ff, #ffe066, #a78bfa);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: fusionGradient 6s ease infinite;
}
html[data-theme="fusion"] .section__title {
  background: linear-gradient(135deg, #ff6eb4, #00e5ff, #ffe066);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: fusionGradient 6s ease infinite;
}
html[data-theme="fusion"] .stat-card,
html[data-theme="fusion"] .timeline__card,
html[data-theme="fusion"] .skills__category,
html[data-theme="fusion"] .project-card,
html[data-theme="fusion"] .contact__card,
html[data-theme="fusion"] .security__card { backdrop-filter: blur(16px) saturate(1.3); }
html[data-theme="fusion"] .project-card::before {
  background: linear-gradient(90deg, #ff6eb4, #00e5ff, #ffe066, #a78bfa);
  background-size: 300% 100%; animation: fusionBorder 4s linear infinite;
}
html[data-theme="fusion"] .timeline__dot { animation: fusionPulse 2s ease infinite; }

@keyframes fusionGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fusionBorder { 0% { background-position: 0% 0%; } 100% { background-position: 300% 0%; } }
@keyframes fusionPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg-primary), 0 0 20px rgba(255, 110, 180, 0.3); }
  50% { box-shadow: 0 0 0 4px var(--bg-primary), 0 0 30px rgba(0, 229, 255, 0.4); }
}