:root {
  --cyan: #00f7ff;
  --violet: #8b5cf6;
  --bg-dark: #00010d;
  --font-headline: 'Exo 2', sans-serif;
  --font-body: 'Roboto Mono', monospace;
}

body {
  font-family: var(--font-headline);
  background-color: var(--bg-dark);
  cursor: none; /* Crucial: Hides default cursor */
}

.font-mono { font-family: var(--font-body); }
.font-headline { font-family: var(--font-headline); }

/* --- FUTURISTIC CURSOR --- */
.cursor-element {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999; /* Ensures it's always on top */
    transform: translate(-50%, -50%);
}

#cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

#cursor-ring {
    width: 30px;
    height: 30px;
    border: 1px solid var(--cyan);
    background-color: transparent;
    box-shadow: 0 0 10px rgba(0, 247, 255, 0.2);
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

/* Cursor Hover State (When hovering over links/buttons) */
body.hovering #cursor-ring {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 247, 255, 0.1);
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* --- BACKGROUND --- */
#canvas-container {
    /* Ensures canvas isn't covered by body background */
    background: radial-gradient(circle at center, #0b1023 0%, #00010d 100%);
}

/* --- UI PANELS --- */
.glass-panel {
  background: rgba(5, 10, 20, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 247, 255, 0.1);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

.glass-pill {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- EFFECTS --- */
.blink { animation: blinker 2s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* Glitch Text */
.glitch-text {
  position: relative;
  display: inline-block;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
}

.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg-dark); 
  overflow: hidden;
}

.glitch-text::before {
  left: 2px; text-shadow: -2px 0 var(--violet);
  animation: glitch-1 3s infinite linear alternate-reverse;
}
.glitch-text::after {
  left: -2px; text-shadow: -2px 0 var(--cyan);
  animation: glitch-2 2s infinite linear alternate-reverse;
}

/* Animations */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; }
.animate-fade-in-down { animation: fade-in-down 1s ease-out forwards; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }

@keyframes glitch-1 {
  0% { clip-path: inset(20% 0 80% 0); }
  100% { clip-path: inset(30% 0 50% 0); }
}
@keyframes glitch-2 {
  0% { clip-path: inset(10% 0 60% 0); }
  100% { clip-path: inset(0% 0 80% 0); }
}

/* Modal Active State */
.modal-active .modal-content { transform: scale(1); opacity: 1; }