/* --- CORE AESTHETICS --- */
:root {
    --neon-pink: #ec4899;
    --neon-blue: #06b6d4;
    --cursor-size: 20px;
}

html { overflow-x: hidden; cursor: none; } 

body {
    font-family: 'Oxanium', sans-serif;
    background-color: #030304;
    color: white;
    overflow-x: hidden;
}

/* --- HIDE SCROLLBAR GLOBALLY --- */
::-webkit-scrollbar { display: none; }
html, body { -ms-overflow-style: none; scrollbar-width: none; }

/* Force Lock during load */
html.is-loading, body.is-loading {
    overflow: hidden !important;
    height: 100% !important;
}

/* --- CUSTOM CURSOR --- */
#cursor {
    position: fixed;
    top: 0; left: 0;
    width: var(--cursor-size); height: var(--cursor-size);
    border: 2px solid var(--neon-pink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transition: width 0.2s, height 0.2s, background-color 0.2s; 
    will-change: transform, width, height;
    mix-blend-mode: exclusion;
    box-shadow: 0 0 10px var(--neon-pink);
}
#cursor.hovered {
    width: 60px; height: 60px;
    background-color: rgba(236, 72, 153, 0.1);
    border-color: var(--neon-blue);
    box-shadow: 0 0 20px var(--neon-blue);
}
#cursor::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 4px; height: 4px; background: white;
    transform: translate(-50%, -50%); border-radius: 50%;
}

.font-special { font-family: 'NiseSegaSonic', sans-serif; }

/* --- CRT VIGNETTE & PULSE --- */
.crt-vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 9900;
    background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
    animation: breathe 5s infinite ease-in-out;
}
@keyframes breathe {
    0%, 100% { opacity: 0.8; box-shadow: inset 0 0 50px rgba(0,0,0,0.5); }
    50% { opacity: 0.4; box-shadow: inset 0 0 20px rgba(236, 72, 153, 0.1); }
}

/* --- NOISE OVERLAY --- */
.noise-overlay {
    position: fixed; inset: 0; z-index: 9990; pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="https://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    opacity: 0.3;
}

/* --- SCANLINES --- */
.scanlines {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 4px;
    z-index: 9998; pointer-events: none; opacity: 0.3;
}

#bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

/* --- CYBER GRID FLOOR --- */
.cyber-grid {
    position: fixed; bottom: -30%; left: -50%; width: 200%; height: 100%;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    z-index: -2;
    opacity: 0.1;
    animation: grid-move 20s linear infinite;
    mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 80%);
}
@keyframes grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } }

/* --- GLITCH TEXT --- */
.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
}
.glitch-text::before {
    left: 2px; text-shadow: -2px 0 #ec4899; clip-path: inset(44% 0 61% 0);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px; text-shadow: -2px 0 #06b6d4; clip-path: inset(50% 0 30% 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 { 0% { clip-path: inset(20% 0 80% 0); } 100% { clip-path: inset(30% 0 20% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(10% 0 60% 0); } 100% { clip-path: inset(0% 0 80% 0); } }

/* --- 3D CARDS --- */
.holo-card { transform-style: preserve-3d; transform: perspective(1000px); }
.holo-content {
    transition: transform 0.1s ease;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    will-change: transform;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* --- INFINITE MARQUEE --- */
.marquee-container {
    width: 100%; overflow: hidden; white-space: nowrap; position: relative;
    background: #ec4899; color: black; transform: rotate(-2deg) scale(1.05);
    border-top: 2px solid white; border-bottom: 2px solid white;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
    z-index: 20;
}
.marquee-content { display: inline-block; animation: marquee 20s linear infinite; padding-right: 50px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- PAGE LOGIC & TRANSITIONS --- */
.page-section { display: none; opacity: 0; padding-top: 100px; padding-bottom: 50px; min-height: 100vh; }
.page-active { display: block; visibility: visible; } 
#page-home { padding-top: 0; }

/* SHUTTER TRANSITION */
.shutter-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 50%;
    background: #000; z-index: 99999; transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1);
    border-bottom: 2px solid var(--neon-pink);
}
.shutter-layer-bottom {
    top: auto; bottom: 0; height: 50%;
    transform: translateY(100%);
    border-bottom: none; border-top: 2px solid var(--neon-blue);
}
body.shutting .shutter-layer { transform: translateY(0); }

/* --- TECH BORDERS (FIXED - NO HOVER GLOW) --- */
.tech-box { position: relative; border: 1px solid rgba(255,255,255,0.1); }
.tech-corner { position: absolute; width: 10px; height: 10px; border: 2px solid transparent; opacity: 0.8; }
.tc-tl { top: -1px; left: -1px; border-top-color: var(--neon-pink); border-left-color: var(--neon-pink); }
.tc-tr { top: -1px; right: -1px; border-top-color: var(--neon-pink); border-right-color: var(--neon-pink); }
.tc-bl { bottom: -1px; left: -1px; border-bottom-color: var(--neon-blue); border-left-color: var(--neon-blue); }
.tc-br { bottom: -1px; right: -1px; border-bottom-color: var(--neon-blue); border-right-color: var(--neon-blue); }

.clip-slant { clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%); }

/* --- TERMINAL LOADER STYLES --- */
@keyframes scan { 
    0% { transform: translateY(-100%); } 
    100% { transform: translateY(100%); } 
}
.animate-scan { animation: scan 3s linear infinite; }
.term-green { color: #22c55e; text-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
.term-red { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.5); font-weight: bold; }
.term-warn { color: #eab308; }
.term-dim { color: #4b5563; }

/* Audio visualizer bar */
.visualizer-bar {
    width: 8px; background: var(--neon-blue);
    animation: sound-bounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 10px var(--neon-blue);
}
@keyframes sound-bounce { 0%, 100% { height: 10px; } 50% { height: 50px; } }

/* PARALLAX HERO TEXT */
#hero-parallax {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.hero-layer {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* --- AUDIO PLAYER SPECIFIC CSS --- */
.mode-btn {
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.mode-btn.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: currentColor; 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    color: white;
}
.mode-btn::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: currentColor;
    transform: scaleY(0); transition: transform 0.2s;
}
.mode-btn.active::before { transform: scaleY(1); }

/* SLIDER FIXES */
input[type=range] {
    -webkit-appearance: none; 
    width: 100%; 
    background: transparent;
    height: 20px;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; 
    height: 2px; 
    background: #444; 
    border-radius: 2px;
    border: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    height: 16px; 
    width: 16px;
    background: #ec4899; 
    margin-top: -7px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 10px #ec4899;
    position: relative;
    z-index: 10;
}
input[type=range]:focus { outline: none; }