/* 1. REGISTER THE FONT */
@font-face {
    font-family: 'Protomolecule';
    src: url('Protomolecule.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. SPLASH SCREEN STYLING */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0a0e14; /* Deep space dark blue/black */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease, visibility 1s;
    cursor: pointer;
    overflow: hidden;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Shooting Stars Background */
.star-field {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.shooting-star {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    opacity: 0;
    animation: shoot 3s infinite linear;
}

@keyframes shoot {
    0% { transform: translate(100%, -100%) rotate(-45deg); opacity: 0; }
    10% { opacity: 1; }
    30% { transform: translate(-100vw, 100vh) rotate(-45deg); opacity: 0; }
    100% { opacity: 0; }
}

/* Randomize Star Positions */
.shooting-star:nth-child(1) { top: 10%; right: 10%; animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 30%; right: -10%; animation-delay: 1.2s; }
.shooting-star:nth-child(3) { top: 50%; right: 20%; animation-delay: 2.5s; }
.shooting-star:nth-child(4) { top: -5%; right: 40%; animation-delay: 4s; }

/* 3. LOGO TYPOGRAPHY (Using your new font) */
.logo-container {
    text-align: center;
    z-index: 10;
    width: 80%;
    max-width: 800px;
}

.main-title {
    font-family: 'Protomolecule', sans-serif;
    font-size: 5rem;
    color: #e0e0e0;
    margin: 0;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.divider {
    width: 100%;
    height: 3px;
    background-color: #e0e0e0;
    margin: 15px 0;
}

.sub-title {
    font-family: 'Protomolecule', sans-serif;
    font-size: 3rem;
    color: #e0e0e0;
    margin: 0;
    letter-spacing: 2px;
}

.enter-prompt {
    margin-top: 40px;
    font-family: 'VT323', monospace;
    color: var(--crt-color);
    letter-spacing: 3px;
    animation: blink 1.5s infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --crt-color: #A7C7E7;
    --crt-bg: #050505;
    --crt-glow: 0 0 10px rgba(167, 199, 231, 0.7), 0 0 2px rgba(167, 199, 231, 0.5);
}

body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
    font-family: 'VT323', monospace;
    color: var(--crt-color);
    height: 100vh;
    width: 100vw;
    user-select: none;
}

/* --- CRT LAYERS --- */
.screen { position: fixed; width: 100%; height: 100%; background: radial-gradient(circle, var(--crt-bg) 0%, #000 100%); z-index: -1; }
.screen::before {
    content: " "; display: block; position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    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));
    z-index: 100; background-size: 100% 3px, 3px 100%; pointer-events: none;
}
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 101;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
    animation: flicker 0.15s infinite;
}
@keyframes flicker { 0% { opacity: 0.97; } 50% { opacity: 0.95; } 100% { opacity: 0.97; } }

/* --- UI ELEMENTS --- */
#header {
    position: absolute; top: 4%; left: 5%;
    font-size: clamp(1.2rem, 4vw, 2rem);
    text-transform: uppercase;
    text-shadow: var(--crt-glow); z-index: 50;
    border: 2px solid var(--crt-color); padding: 5px 15px;
    box-shadow: var(--crt-glow);
    background: rgba(0,0,0,0.7);
}
#sys-log {
    position: absolute; bottom: 4%; left: 5%;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    color: var(--crt-color); opacity: 0.7;
    z-index: 50; max-width: 80vw;
}

/* --- BACKGROUND & GALAXY --- */
#galaxy-container {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0; z-index: 10;
    animation: rotate-galaxy 150s linear infinite;
}
#galaxy-container::before {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40vmin; height: 20vmin;
    background: radial-gradient(ellipse at center, rgba(167, 199, 231, 0.2) 0%, rgba(0,0,0,0) 60%);
    pointer-events: none; z-index: -1; filter: blur(15px);
}

@keyframes rotate-galaxy {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- LINKS --- */
.star-link {
    position: absolute; text-decoration: none;
    color: var(--star-color, var(--crt-color));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; pointer-events: auto;
    white-space: nowrap;
    transform: translate3d(var(--x), var(--y), 0);
    animation: counter-rotate 150s linear infinite;
}

@keyframes counter-rotate {
    0% { transform: translate3d(var(--x), var(--y), 0) rotate(0deg); }
    100% { transform: translate3d(var(--x), var(--y), 0) rotate(-360deg); }
}

.star-link .dot {
    width: 12px; height: 12px;
    background-color: var(--star-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--star-color);
    position: relative; z-index: 2;
    animation: pulse-dot 2s infinite alternate;
}
@keyframes pulse-dot { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }

.star-link:hover .dot {
    transform: scale(1.5); background-color: #fff;
    box-shadow: 0 0 25px var(--star-color); animation: none;
}

.star-link .sign {
    margin-top: 10px; font-size: clamp(1rem, 3vw, 1.2rem);
    text-shadow: 0 0 5px var(--star-color);
    background: rgba(0,0,0,0.8); padding: 2px 5px;
    border-radius: 3px;
}

.star-link .desc {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    opacity: 0; transition: opacity 0.3s;
    position: absolute; top: 45px; width: clamp(120px, 30vw, 160px); text-align: center;
    background: #000; border: 1px solid var(--crt-color); padding: 5px;
    pointer-events: none;
    left: 50%; transform: translateX(-50%);
    white-space: normal; word-wrap: break-word; z-index: 10;
}
.star-link:hover .desc { opacity: 1; }
/* --- SPLASH SCREEN STYLES --- */
#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #0d1117; /* Dark navy like your image */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease, visibility 1s;
    cursor: pointer;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Shooting Stars Background */
.star-field {
    position: absolute;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -1;
}

.shooting-star {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
    animation: shoot 3s linear infinite;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 100px; height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}

/* Randomize positions/delays for shooting stars */
.shooting-star:nth-child(1) { top: 0; right: 0; animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 20%; right: 10%; animation-delay: 1s; }
.shooting-star:nth-child(3) { top: 40%; right: 40%; animation-delay: 2s; }
.shooting-star:nth-child(4) { top: -10%; right: 50%; animation-delay: 1.5s; }
.shooting-star:nth-child(5) { top: 10%; right: 20%; animation-delay: 2.5s; }

@keyframes shoot {
    0% { transform: rotate(215deg) translateX(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: rotate(215deg) translateX(-1000px); opacity: 0; }
}

/* Logo Typography */
.logo-container {
    text-align: center;
    color: #e0e0e0;
}

.main-title {
    font-family: 'Protomolecule', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 12px;
    margin: 0;
    text-transform: uppercase;
}

/* Styling the "E" to look like the 3-bar Protomolecule version */
.exo-e {
    display: inline-block;
    position: relative;
    color: transparent; /* Hide actual letter */
    width: 0.7em;
}
.exo-e::before {
    content: '';
    position: absolute;
    left: 0; top: 25%;
    width: 100%; height: 4px;
    background: #e0e0e0;
    box-shadow: 0 15px 0 #e0e0e0, 0 30px 0 #e0e0e0; /* The three bars */
}

.divider {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    margin: 10px 0;
}

.sub-title {
    font-family: 'Michroma', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    margin: 0;
    letter-spacing: 2px;
}

.enter-prompt {
    margin-top: 50px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: var(--crt-color);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}