:root {
  --bg: #0a0a1f;
  --cyan: #00fff7;
  --pink: #ff2d95;
  --purple: #a020f0;
  --blue: #2d6cff;
  --glowA: #00fff7;
  --glowB: #ff2d95;
}
body[data-theme="cyber"] {
  --bg: #12001f;
  --glowA: #a020f0;
  --glowB: #ff2d95;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: #e6f7ff;
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
}

.font-orb { font-family: 'Orbitron', sans-serif; }
.font-mono { font-family: 'Space Mono', monospace; }

/* animated atmospheric background */
.nf-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,255,247,0.10), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255,45,149,0.12), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(160,32,240,0.14), transparent 50%),
    var(--bg);
}
.nf-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,247,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,247,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 44px 88px, 88px 44px; }
}

/* neon text helpers */
.neon-cyan-text { color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 0 0 18px rgba(0,255,247,0.5); }
.neon-pink-text { color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 18px rgba(255,45,149,0.5); }
.neon-white { color: #fff; text-shadow: 0 0 8px rgba(0,255,247,0.4); }

.logo { text-shadow: 0 0 10px currentColor; transition: filter .2s; }
.logo:hover { filter: brightness(1.2); animation: glitch .35s steps(2) 2; }
@keyframes glitch {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1.5px,1px); }
  50% { transform: translate(1.5px,-1px); }
  75% { transform: translate(-1px,-1px); }
  100% { transform: translate(0,0); }
}

/* navbar */
.nf-nav {
  background: rgba(10,10,31,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,255,247,0.18);
}

.nf-search input { color: #cffcff; }
.nf-search {
  border: 1px solid rgba(0,255,247,0.3);
  border-radius: 0.5rem;
  transition: box-shadow .25s, border-color .25s;
}
.nf-search:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,255,247,0.55);
}

.nf-select {
  background: rgba(0,0,0,0.4);
  color: #9fd8ff;
  border: 1px solid rgba(160,32,240,0.5);
}
.nf-select option { background: #12001f; color: #cffcff; }

/* cards */
.nf-card {
  border: 1px solid rgba(0,255,247,0.15);
  background: #10102a;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
  opacity: 0;
  animation: rise .5s forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.nf-card { transform: translateY(14px); }
.nf-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--pink);
  box-shadow: 0 0 24px rgba(255,45,149,0.55), 0 0 40px rgba(0,255,247,0.25);
  z-index: 5;
}
.nf-overlay {
  background: linear-gradient(to top, rgba(5,5,20,0.96) 10%, rgba(5,5,20,0.4) 55%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.nf-card:hover .nf-overlay { opacity: 1; }
@media (hover: none) { .nf-overlay { opacity: 1; } }

/* skeleton */
.skeleton {
  background: linear-gradient(100deg, #10102a 30%, #1d1d44 50%, #10102a 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite, rise .5s forwards;
  transform: translateY(14px);
  border: 1px solid rgba(0,255,247,0.08);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* modal */
.modal-back {
  background: rgba(3,3,12,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-y: auto;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.nf-modal {
  background: #0d0d24;
  border: 1px solid rgba(0,255,247,0.3);
  box-shadow: 0 0 40px rgba(0,255,247,0.25), 0 0 80px rgba(255,45,149,0.15);
  animation: popIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.hero-fade { animation: fadeIn .6s ease; border: 1px solid rgba(0,255,247,0.15); }

.flicker { animation: flick 3s infinite; }
@keyframes flick {
  0%, 92%, 100% { opacity: 1; }
  93%, 95% { opacity: 0.4; }
  94% { opacity: 0.9; }
}

.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* scrollbar */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: #0a0a1f; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--cyan), var(--purple)); border-radius: 8px; }