/* Cursor */
.cursor-dot {
    position: fixed; top: 0; left: 0; width: 6px; height: 6px;
    background: var(--color-accent); border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none; z-index: 10002;
    box-shadow: 0 0 10px var(--color-accent);
}
.cursor-hud {
    position: fixed; top: 0; left: 0; width: 20px; height: 20px;
    transform: translate(-50%, -50%); pointer-events: none; z-index: 10001;
    transition: width 0.3s ease-out, height 0.3s ease-out;
}
.hud-ring-inner {
    position: absolute; inset: 0; border: 2px solid var(--color-accent);
    border-radius: 50%; border-top-color: transparent; border-bottom-color: transparent;
    opacity: 0.8; animation: hud-spin 2s linear infinite; box-shadow: 0 0 5px var(--color-accent);
}
.hud-ring-outer {
    position: absolute; inset: -8px; border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%; animation: hud-spin-reverse 10s linear infinite;
}
.cursor-hud.hovered { width: 40px; height: 40px; }
.cursor-hud.hovered .hud-ring-inner { border-color: #fff; border-width: 4px; animation-duration: 0.5s; }
.cursor-hud.hovered .hud-ring-outer { border-color: var(--color-accent); border-style: solid; opacity: 0.5; }

@keyframes hud-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes hud-spin-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }

/* Audio Toggle */
.audio-toggle {
    position: fixed; bottom: 40px; right: 40px; z-index: 500;
    width: 50px; height: 50px; border: 1px solid #333; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: none;
    transition: all 0.3s; background: rgba(0, 0, 0, 0.5); pointer-events: auto;
}
.audio-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.audio-bars { display: flex; gap: 3px; align-items: flex-end; height: 15px; }
.bar { width: 3px; background: white; animation: sound-wave 0.5s infinite alternate; }
.audio-toggle.muted .bar { animation: none; height: 3px !important; }
.audio-toggle:hover .bar { background: var(--color-accent); }
@keyframes sound-wave { 0% { height: 3px; } 100% { height: 15px; } }
.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }

/* Glitch Text */
.glitch-text { font-family: var(--font-display); position: relative; color: white; }
.glitch-text::before, .glitch-text::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch-text::before {
    left: 2px; text-shadow: -1px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px; text-shadow: -1px 0 var(--color-accent); clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim { 0% { clip: rect(38px, 9999px, 81px, 0); } 20% { clip: rect(6px, 9999px, 14px, 0); } 100% { clip: rect(81px, 9999px, 2px, 0); } }
@keyframes glitch-anim2 { 0% { clip: rect(25px, 9999px, 97px, 0); } 20% { clip: rect(89px, 9999px, 16px, 0); } 100% { clip: rect(96px, 9999px, 63px, 0); } }

/* Nav */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0;
    background-color: var(--color-accent); transition: width 0.3s ease, background-color 0.3s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: var(--color-accent); transition: color 0.3s; }

/* Mobile Menu */
#mobile-menu-overlay.active { opacity: 1 !important; pointer-events: auto !important; }
.mobile-menu-btn.active { color: var(--color-accent); }

/* Buttons */
.tech-btn { position: relative; cursor: none; transition: all 0.3s ease; }
.tech-btn.primary { color: var(--color-accent); box-shadow: 0 0 10px rgba(0, 240, 255, 0.1); }
.tech-btn.primary:hover { box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); transform: translateY(-2px); }
.tech-btn.secondary { color: white; }
.tech-btn.secondary:hover { border-color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }

/* View Archive Button Glow */
#view-archive-btn {
    animation: super-glow 2s infinite ease-in-out; position: relative; overflow: hidden;
    background: rgba(0, 0, 0, 0.3); border-width: 2px;
}
@keyframes super-glow {
    0% { box-shadow: 0 0 5px var(--color-accent), inset 0 0 2px var(--color-accent); border-color: var(--color-accent); transform: scale(1); }
    50% { box-shadow: 0 0 25px var(--color-accent), inset 0 0 10px var(--color-accent); border-color: white; transform: scale(1.05); }
    100% { box-shadow: 0 0 5px var(--color-accent), inset 0 0 2px var(--color-accent); border-color: var(--color-accent); transform: scale(1); }
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .cursor-dot, .cursor-hud, .net-cursor { display: none !important; opacity: 0 !important; visibility: hidden !important; }
    body, a, button, .project-card { cursor: auto !important; }
}