@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --cyber-bg: #050505;
  --cyber-black: #0a0a0a;
  --cyber-gray: #1a1a1a;
  --neon-cyan: #00f3ff;
  --neon-pink: #bc13fe;
  --neon-green: #0aff0a;
  --neon-yellow: #ffee00;
}

body {
  background-color: var(--cyber-bg);
  font-family: 'Rajdhani', sans-serif;
  color: #e0e0e0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .cyber-font {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.05em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cyber-black); 
}
::-webkit-scrollbar-thumb {
  background: var(--cyber-gray); 
  border: 1px solid var(--neon-cyan);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan); 
  box-shadow: 0 0 10px var(--neon-cyan);
}

/* Scanline Effect Overlay */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.1)
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
}

/* Neon Glow Utilities */
.text-neon-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.7), 0 0 10px rgba(0, 243, 255, 0.5);
}

.text-neon-pink {
  color: var(--neon-pink);
  text-shadow: 0 0 5px rgba(188, 19, 254, 0.7), 0 0 10px rgba(188, 19, 254, 0.5);
}

.border-neon-cyan {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 5px rgba(0, 243, 255, 0.3), inset 0 0 5px rgba(0, 243, 255, 0.1);
}

.border-neon-pink {
  border-color: var(--neon-pink);
  box-shadow: 0 0 5px rgba(188, 19, 254, 0.3), inset 0 0 5px rgba(188, 19, 254, 0.1);
}

/* Cyber Card */
.cyber-card {
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid var(--cyber-gray);
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.cyber-card:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
  transform: translateY(-2px);
}

.cyber-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 95%, var(--neon-cyan) 95%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.cyber-card:hover::before {
  opacity: 1;
}

/* Cyber Button */
.cyber-btn {
  position: relative;
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
  transition: 0.3s;
  clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
}

.cyber-btn:hover {
  background: var(--neon-cyan);
  color: var(--cyber-black);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
}

/* Accordion Animation */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary ~ * {
  animation: sweep .4s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; transform: translateY(-10px)}
  100%  {opacity: 1; transform: translateY(0)}
}

/* Glitch Effect Keyframes */
@keyframes glitch {
  0% { transform: translate(0) }
  20% { transform: translate(-2px, 2px) }
  40% { transform: translate(-2px, -2px) }
  60% { transform: translate(2px, 2px) }
  80% { transform: translate(2px, -2px) }
  100% { transform: translate(0) }
}

.glitch-hover:hover {
  animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}