/* ============================================
   ADLUNA.CO - VISUAL EFFECTS
   CRT overlay, starfield, animations
   ============================================ */

/* --- CRT / Satellite Feed Overlay --- */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
    mix-blend-mode: overlay;
}

/* --- Deep Space Starfield --- */
.stars-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at bottom, #0b0d14 0%, #000000 100%);
    overflow: hidden;
}

.star-layer {
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 500px 500px, 350px 350px, 200px 200px;
    animation: spaceDrift 200s linear infinite;
}

.star-layer:nth-child(2) { 
    opacity: 0.5; 
    animation-duration: 150s; 
    background-size: 400px 400px; 
}

.star-layer:nth-child(3) { 
    opacity: 0.3; 
    animation-duration: 100s; 
    background-size: 300px 300px; 
}

@keyframes spaceDrift { 
    from { transform: translateY(0); } 
    to { transform: translateY(-500px); } 
}

/* --- Laser System --- */
.orbital-laser {
    position: absolute;
    top: -60vh;
    left: 50%;
    width: 6px;
    height: 65vh;
    background: linear-gradient(to bottom, transparent, var(--neon-blue), white);
    transform: translateX(-50%);
    filter: drop-shadow(0 0 10px var(--neon-blue)) drop-shadow(0 0 20px var(--neon-blue));
    opacity: 0;
    z-index: 5;
    transition: opacity 0.1s;
}

.orbital-laser.active { 
    opacity: 1; 
}

/* --- Scanning Line Animation --- */
@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.scanning-line {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 20%;
    background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.2), transparent);
    animation: scanline 3s linear infinite;
    pointer-events: none;
}

/* --- Glitch Text Effect --- */
.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: var(--space-black);
}

.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 #00fff9; 
    clip: rect(44px, 450px, 56px, 0); 
    animation: glitch-anim2 5s infinite linear alternate-reverse; 
}

@keyframes glitch-anim {
    0% { clip: rect(38px, 9999px, 84px, 0); }
    20% { clip: rect(6px, 9999px, 83px, 0); }
    40% { clip: rect(47px, 9999px, 1px, 0); }
    60% { clip: rect(81px, 9999px, 30px, 0); }
    80% { clip: rect(32px, 9999px, 52px, 0); }
    100% { clip: rect(78px, 9999px, 49px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(10px, 9999px, 81px, 0); }
    20% { clip: rect(65px, 9999px, 16px, 0); }
    40% { clip: rect(3px, 9999px, 49px, 0); }
    60% { clip: rect(70px, 9999px, 88px, 0); }
    80% { clip: rect(21px, 9999px, 8px, 0); }
    100% { clip: rect(15px, 9999px, 20px, 0); }
}