:root {
    --glitch-color-1: #ff00ff;
    --glitch-color-2: #00ffff;
    --bg-color: #050505;
    --term-green: #4af626;
    --term-glow: #4af62680;
}

body {
    background-color: var(--bg-color);
    color: #e0e0e0;
    font-family: 'Courier Prime', monospace;
    overflow: hidden;
    margin: 0;
    
    cursor: none; 
}

/* --- BACKGROUND VIDEO STYLES --- */
.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10; 
    overflow: hidden;
    background: #000;
}

.video-bg.hidden-initially {
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

.video-bg.visible {
    opacity: 0.6; /* Matches original opacity */
}

/* --- BACKGROUND SLIDESHOW --- */
#bg-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -11; /* Behind video-bg */
    background: #000;
}

.bg-static {
    position: absolute;
    top: 0;
    width: 35%; /* Leave space in middle */
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.bg-static.left { left: 0; }
.bg-static.right { right: 0; }

.video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    filter: blur(20px) brightness(0.7); 
    opacity: 0.6; 
}

/* CRT Effects */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    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%; pointer-events: none; z-index: 50;
}

.crt-flicker {
    animation: flicker 0.15s infinite; opacity: 0.1; position: fixed;
    top: 0; left: 0; width: 100%; height: 100%; background: white; pointer-events: none; z-index: 49;
}

@keyframes flicker { 0% { opacity: 0.01; } 5% { opacity: 0.05; } 10% { opacity: 0.01; } 100% { opacity: 0.01; } }

.vignette {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    pointer-events: none; z-index: 51;
}

/* Glitch Text */
.title-glitch {
    position: relative; font-family: 'VT323', monospace; font-size: 8rem; line-height: 1; animation: float 6s ease-in-out infinite;
}
.title-glitch::before, .title-glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8;
}
.title-glitch::before { color: var(--glitch-color-1); z-index: -1; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.title-glitch::after { color: var(--glitch-color-2); z-index: -2; animation: glitch-anim-2 3s infinite linear alternate-reverse; }

@keyframes glitch-anim-1 { 0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); } 100% { clip-path: inset(30% 0 20% 0); transform: translate(1px, -1px); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); } 100% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 2px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Subtitle fade-in (controlled by JS) */
.fade-in {
    opacity: 0;
    transition: opacity 2s ease-in;
}

/* EYE Container */
.eye-container {
    width: 300px; height: 300px; border-radius: 50%; background: #000; position: relative; overflow: hidden;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.15), inset 0 0 20px #000; transition: transform 0.1s; border: 2px solid #333; z-index: 60;
}
.eye-container:hover { transform: scale(1.05); border-color: var(--glitch-color-1); }

.media-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease-in-out;
}
.media-layer.active { opacity: 1; }

.pupil-overlay {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 90%); z-index: 10; pointer-events: none;
}

/* Terminal & UI */
.terminal-text {
    color: var(--term-green); text-shadow: 0 0 5px var(--term-glow); font-family: 'VT323', monospace;
    font-size: 1.2rem; min-height: 1.5em; white-space: pre-wrap;
}
.terminal-text.mode-remember {
    color: #A020F0 !important; /* Purple color */
    text-shadow: 0 0 7px #A020F0 !important;
}

.terminal-text.mode-forget {
    color: #000000 !important;
    font-weight: bold;
}

.void-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); padding: 10px 20px;
    font-family: 'Courier Prime', monospace; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s; position: relative; overflow: hidden; cursor: inherit;
}
.void-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transition: left 0.3s; }
.void-btn:hover::before { left: 0; }
.void-btn:hover { border-color: var(--glitch-color-2); color: #fff; text-shadow: 2px 2px 0px var(--glitch-color-1); }

/* Hidden Lore */
.hidden-msg { position: absolute; font-size: 0.8rem; color: #1a1a1a; user-select: none; pointer-events: none; z-index: -1; }
.scanline-bar { width: 100%; height: 5px; background: rgba(255,255,255,0.1); position: fixed; z-index: 52; top: 0; animation: scan 8s linear infinite; }
@keyframes scan { 0% { top: -10%; } 100% { top: 110%; } }

/* Custom Cursor Style */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px; /* Cursor er size */
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%); /* Mouse er majhkhane thakbe */
    transition: transform 0.05s linear; /* Smooth movement */
}

/* Enter Screen */
#enter-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5); z-index: 9999;
    backdrop-filter: blur(10px); /* Blur effect add kora holo */
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: opacity 1s ease-out;
}

.enter-text {
    font-family: 'VT323', monospace; font-size: 2rem; color: #fff;
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- CAT POPUP --- */
.cat-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    height: auto;
    z-index: 9999;
    display: none;
    cursor: pointer;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* --- Interactive Name Input --- */
#nameInput {
    background: transparent;
    border: none;
    outline: none;
    color: var(--term-green);
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    text-shadow: 0 0 5px var(--term-glow);
    width: 150px;
}

#nameInput::placeholder {
    color: rgba(74, 246, 38, 0.4);
    font-style: italic;
}

#submitName {
    color: var(--term-green);
    text-shadow: 0 0 5px var(--term-glow);
    cursor: pointer;
    padding-left: 8px;
    animation: blink 1.5s infinite;
}

/* =================================================================== */
/* RESPONSIVE DESIGN FOR MOBILE */
/* =================================================================== */

@media (max-width: 768px) {
    /* Hide the static side backgrounds as they don't fit */
    .bg-static {
        width: 15%; /* Make side images narrower on mobile instead of hiding */
    }

    /* Reduce the size of the main title */
    .title-glitch {
        font-size: 4rem;
        line-height: 1.1;
    }

    /* Reduce the size of the central eye media */
    .eye-container {
        width: 220px;
        height: 220px;
    }

    /* Adjust vertical spacing for a more compact view */
    main.space-y-12 > * + * {
        margin-top: 2rem; /* 32px, default was 3rem (48px) */
    }

    /* Make terminal text slightly smaller */
    .terminal-text, #nameInput {
        font-size: 1.1rem;
    }

    /* Adjust the cat popup to be smaller and less intrusive */
    .cat-popup {
        width: 150px;
        bottom: 10px;
        right: 10px;
    }

    .enter-text {
        font-size: 1.5rem;
    }
}