:root {
    --background-color: #000000;
    --frame-color: #050505;
    --glow-color: #be8eff;
    --glyph-color: #cccccc;
    --glitch-color: #ff00ff;
    --core-color-1: #3a0ca3;
    --core-color-2: #000000;
}

html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: var(--background-color);
    color: var(--glyph-color); font-family: 'Share Tech Mono', monospace;
    cursor: none;
}

#scene {
    width: 100%; height: 100%; display: flex;
    justify-content: center; align-items: center;
    perspective: 1000px;
}

#parallax-container {
    transition: transform 0.2s ease-out;
}

/* --- The Obelisk "Rift" --- */
#obelisk {
    width: 25vmin; height: 110vh; background-color: transparent;
    border-left: 2vmin solid var(--frame-color);
    border-right: 2vmin solid var(--frame-color);
    box-shadow: 0 0 15px 5px rgba(190, 142, 255, 0.2), inset 0 0 10px 2px #000;
    position: relative; opacity: 0; transition: opacity 6s ease-in;
    animation: pulse-glow 8s infinite ease-in-out;
}

body.is-awakened #obelisk { opacity: 1; }

#obelisk::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient( to bottom, var(--core-color-1), var(--glitch-color) 20%,
        var(--core-color-2) 40%, var(--core-color-2) 60%, var(--core-color-1) 80%,
        var(--glitch-color) );
    background-size: 100% 300%;
    animation: flow-down 10s linear infinite, glitch-core 0.3s steps(2, end) infinite;
}
#obelisk::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.8); animation: flicker 0.15s infinite;
}

/* --- NEW: Rift Particle Effects --- */
#particle-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; /* Crucial to contain the particles */
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: var(--glow-color);
    box-shadow: 0 0 5px var(--glow-color);
    animation-name: crawl-and-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1; /* Animation plays once per particle */
}


/* --- Awaken Prompt (RESTORED TO ORIGINAL DESIGN) --- */
#awaken-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;
    background: var(--background-color); display: flex; justify-content: center;
    align-items: center; cursor: pointer; transition: opacity 2s ease-out;
}
#awaken-prompt {
    position: relative; /* Positioning context for the lines */
    padding: 0.8em 0;  /* Space between text and lines */
    font-size: 2rem;
    letter-spacing: 1em;
    color: var(--glyph-color);
    width: 60%; /* Define a width for the lines */
    text-align: center;
    animation: awaken-pulse 4s infinite ease-in-out;
}
#awaken-prompt::before,
#awaken-prompt::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--glyph-color);
    opacity: 0.5;
}
#awaken-prompt::before { top: 0; }
#awaken-prompt::after { bottom: 0; }


/* --- Unchanged Overlays and Glyphs --- */
#glyph-container {
    position: absolute; bottom: 20px; width: 100%; text-align: center;
    font-size: 1.2rem; letter-spacing: 0.5em; user-select: none;
    text-shadow: 0 0 5px var(--glyph-color);
    z-index: 20;
    transition: transform 0.2s ease-out;
}
.scanline-overlay {
    position: fixed; pointer-events: none; z-index: 30;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.5) 1px, transparent 2px);
    animation: scanlines 12s linear infinite;
}

/* --- ANIMATIONS --- */
/* NEW: Animation for rift particles */
@keyframes crawl-and-fall {
    0% {
        transform: translateY(110vh) translateX(0); /* Start at bottom */
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        transform: translateY(50vh) translateX(5px); /* Jitter sideways */
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-10vh) translateX(-5px); /* End above the top */
        opacity: 0;
    }
}

@keyframes flow-down { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes pulse-glow {
    0% { box-shadow: 0 0 15px 5px rgba(190, 142, 255, 0.2), inset 0 0 10px 2px #000; }
    50% { box-shadow: 0 0 25px 10px rgba(190, 142, 255, 0.35), inset 0 0 10px 2px #000; }
    100% { box-shadow: 0 0 15px 5px rgba(190, 142, 255, 0.2), inset 0 0 10px 2px #000; }
}
@keyframes glitch-core { 0% { transform: translateX(0); } 100% { transform: translateX(-2px); } }
@keyframes flicker { 0% { opacity: 0; } 20% { opacity: 0; } 21% { opacity: 0.2; } 25% { opacity: 0.05; } 30% { opacity: 0.2; } 31% { opacity: 0; } 100% { opacity: 0; } }
@keyframes scanlines { from { background-position: 0 0; } to { background-position: 0 100px; } }
@keyframes awaken-pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }