/* =============================================
   AMING ANJAS PORTFOLIO – style.css
   Cyber Dark Premium UI 2026
   ============================================= */

/* ---- Root Variables ---- */
:root {
  --cyber:      #00f5ff;
  --cyber-dim:  rgba(0, 245, 255, .15);
  --purple:     #7c3aed;
  --purple-dim: rgba(124, 58, 237, .15);
  --dark-900:   #020208;
  --dark-800:   #0a0a14;
  --dark-700:   #0f0f1e;
  --dark-600:   #161628;
  --glass-bg:   rgba(15, 15, 30, 0.7);
  --glass-border: rgba(0, 245, 255, 0.12);
  --glow-sm: 0 0 12px rgba(0,245,255,.25);
  --glow-md: 0 0 24px rgba(0,245,255,.35);
  --glow-lg: 0 0 48px rgba(0,245,255,.45);
}

/* ---- Light mode override ---- */
html.light-mode {
  --dark-900: #f0f4f8;
  --dark-800: #e2e8f0;
  --dark-700: #ffffff;
  --dark-600: #f8fafc;
  --glass-bg: rgba(255,255,255,.75);
  --glass-border: rgba(0,245,255,.25);
}
html.light-mode body          { background-color: #f0f4f8; color: #0f172a; }
html.light-mode .text-gray-300 { color: #334155; }
html.light-mode .text-gray-400 { color: #64748b; }
html.light-mode .text-gray-500 { color: #94a3b8; }
html.light-mode .text-white    { color: #0f172a; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar         { width: 6px; }
::-webkit-scrollbar-track   { background: var(--dark-900); }
::-webkit-scrollbar-thumb   { background: linear-gradient(180deg,#00f5ff,#7c3aed); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #00f5ff; }

/* ---- Selection ---- */
::selection { background: rgba(0,245,255,.25); color: #fff; }

/* ---- Body ---- */
body {
  font-family: 'Sora', sans-serif;
  background-color: var(--dark-900);
  overflow-x: hidden;
}

/* ---- Smooth scroll ---- */
html { scroll-behavior: smooth; }

/* ============================================
   HAMBURGER (mobile menu slide)
   ============================================ */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* Hamburger animation */
#menu-btn .ham-line {
  transition: transform .3s ease, opacity .3s ease;
}

/* ============================================
   NAVBAR
   ============================================ */
#navbar { transition: background .4s, border-color .4s, box-shadow .4s; }

#navbar.scrolled {
  background: rgba(10, 10, 20, .92) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,245,255,.1);
  box-shadow: 0 4px 32px rgba(0,0,0,.5);
}

.nav-link.active { color: #00f5ff !important; }
.nav-link.active::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 75%; height: 1px;
  background: linear-gradient(90deg,transparent,#00f5ff,transparent);
}

/* Active nav link */
.mobile-nav-link.active {
  color: #00f5ff !important;
  background: rgba(0,245,255,.06) !important;
  border-color: rgba(0,245,255,.2) !important;
}
.mobile-nav-link.active .mobile-dot { opacity: 1 !important; }

/* ============================================
   HERO
   ============================================ */
.hero-gradient-text {
  background: linear-gradient(135deg, #00f5ff, #7c3aed, #00f5ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientX 6s ease infinite;
}

.btn-primary {
  background: linear-gradient(135deg, #00f5ff, #00a8b8);
  color: #020208;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0,245,255,.3);
}
.btn-primary:hover {
  box-shadow: 0 0 35px rgba(0,245,255,.5);
  background: linear-gradient(135deg, #2bfaff, #00f5ff);
}

.btn-outline {
  background: rgba(0,245,255,.05);
  color: #00f5ff;
  border: 1px solid rgba(0,245,255,.35);
}
.btn-outline:hover {
  background: rgba(0,245,255,.12);
  box-shadow: 0 0 20px rgba(0,245,255,.2);
}

.social-icon-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #6b7280;
}
.social-icon-btn:hover {
  background: rgba(0,245,255,.08);
  border-color: rgba(0,245,255,.3);
  color: #00f5ff;
  box-shadow: var(--glow-sm);
}

/* Spin ring for hero image */
.spin-ring {
  background: conic-gradient(from 0deg, transparent 0%, #00f5ff 25%, transparent 50%, #7c3aed 75%, transparent 100%);
  border-radius: 9999px;
  padding: 3px;
  animation: spin 6s linear infinite;
}
.spin-ring::after {
  content: '';
  position: absolute; inset: 3px;
  background: var(--dark-900);
  border-radius: 9999px;
}

/* Floating tech badges */
.badge-float {
  background: rgba(10,10,20,.85);
  border: 1px solid rgba(0,245,255,.35);
  color: #00f5ff;
  font-size: .65rem;
  letter-spacing: .08em;
  animation: float 5s ease-in-out infinite;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge-float::before { content: attr(data-badge); }

/* ============================================
   GLASS CARD
   ============================================ */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-card:hover {
  border-color: rgba(0,245,255,.22);
  box-shadow: 0 8px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ============================================
   BADGES (about)
   ============================================ */
.badge-chip {
  background: rgba(0,245,255,.07);
  border-color: rgba(0,245,255,.2);
  color: #9ca3af;
}
.badge-chip:hover {
  background: rgba(0,245,255,.14);
  border-color: rgba(0,245,255,.4);
  color: #00f5ff;
  box-shadow: var(--glow-sm);
}

/* ============================================
   SKILL BAR
   ============================================ */
.skill-bar-track {
  background: rgba(255,255,255,.06);
}
.skill-bar-fill {
  transition: width 1.2s cubic-bezier(.25,1,.5,1);
}

/* ============================================
   PROJECT CARD
   ============================================ */
.project-card {
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.project-card:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
}

/* ============================================
   CONTACT FORM – Floating label
   ============================================ */
.contact-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,245,255,.12);
  border-radius: .75rem;
  color: #fff;
}
.contact-input:focus {
  background: rgba(0,245,255,.04);
  border-color: rgba(0,245,255,.4);
  box-shadow: 0 0 0 3px rgba(0,245,255,.08);
}
.contact-input::placeholder { color: transparent; }

.floating-label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: .8rem;
  color: #6b7280;
  pointer-events: none;
  transition: all .2s ease;
}
textarea ~ .floating-label { top: 1.5rem; transform: translateY(0); }

.contact-input:focus ~ .floating-label,
.contact-input:not(:placeholder-shown) ~ .floating-label {
  top: .6rem;
  transform: translateY(0);
  font-size: .65rem;
  color: #00f5ff;
  letter-spacing: .06em;
  text-transform: uppercase;
}
textarea:focus ~ .floating-label,
textarea:not(:placeholder-shown) ~ .floating-label {
  top: .5rem;
  font-size: .65rem;
  color: #00f5ff;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================
   PARTICLES
   ============================================ */
#particles-js { z-index: 0; }

/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
@keyframes gradientX {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes pulseNeon {
  0%, 100% { box-shadow: 0 0 10px #00f5ff, 0 0 20px #00f5ff; }
  50%       { box-shadow: 0 0 30px #00f5ff, 0 0 60px #00f5ff; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 640px) {
  .font-display { letter-spacing: .05em; }
  .hero-gradient-text { font-size: clamp(1.75rem, 8vw, 3rem); }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }
}

/* Prevent horizontal overflow */
* { box-sizing: border-box; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* Touch targets for mobile */
@media (max-width: 768px) {
  .nav-link, .mobile-nav-link, button, a[role="button"] { min-height: 44px; }
}

/* ============================================
   SCROLLBAR for Firefox
   ============================================ */
* { scrollbar-width: thin; scrollbar-color: #00f5ff #020208; }