/* =========================================================
   0xCYBER — Base Styles (shared across all pages)
   ========================================================= */

:root {
  --green: #00ff9d;
  --blue: #00d4ff;
  --purple: #a78bfa;
  --amber: #f59e0b;
  --red: #f43f5e;
  --bg: #070f1a;
  --bg2: #0d1b2e;
  --bg3: #050b14;
  --border: #1a2740;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: white; font-family: sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Fonts */
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Animations ────────────────────────────────────────── */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.animate-pulse-dot { animation: pulse-dot 2s infinite; }
.animate-blink { animation: blink 1s step-end infinite; }
.animate-spin { animation: spin 1s linear infinite; }

.anim-fade-up { animation: fadeInUp 0.6s ease-out forwards; }
.anim-fade-left { animation: fadeInLeft 0.7s ease-out forwards; }
.anim-fade-right { animation: fadeInRight 0.7s ease-out forwards; }
.anim-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.anim-scale-in { animation: scaleIn 0.5s ease-out forwards; }

/* Intersection observer transitions */
.observe-fade { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.observe-fade.visible { opacity: 1; transform: translateY(0); }
.observe-fade-left { opacity: 0; transform: translateX(-20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.observe-fade-left.visible { opacity: 1; transform: translateX(0); }
.observe-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease; }
.observe-scale.visible { opacity: 1; transform: scale(1); }

/* ── Navbar ─────────────────────────────────────────────── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.3s, border-color 0.3s;
}
#main-nav.scrolled {
  background: rgba(7,15,26,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,255,157,0.1);
}

#mobile-menu {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0; opacity: 0;
}
#mobile-menu.open { max-height: 400px; opacity: 1; }

.nav-active { background: rgba(0,255,157,0.05); border: 1px solid rgba(0,255,157,0.2) !important; }

/* ── Utilities ──────────────────────────────────────────── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.hover-card { transition: border-color 0.3s, background 0.3s; }
.hover-card:hover { border-color: rgba(0,255,157,0.3) !important; }
.img-overlay { background: linear-gradient(to top, #070f1a 0%, rgba(7,15,26,0.7) 60%, rgba(7,15,26,0.2) 100%); }
.hero-overlay { background: linear-gradient(to bottom, rgba(7,15,26,0) 0%, rgba(7,15,26,0.8) 60%, rgba(7,15,26,1) 100%); }

/* Focus / form */
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(0,255,157,0.4) !important; }
input[type="checkbox"] { accent-color: #00ff9d; }
select { appearance: none; }

/* Inline code */
code:not(pre code) {
  padding: 2px 6px; border-radius: 4px;
  background: #0d1b2e; color: #00ff9d;
  font-size: 0.78em; border: 1px solid #1a2740;
  font-family: 'JetBrains Mono', monospace;
}
pre { overflow-x: auto; }
pre code { display: block; }