/* Version: 1.8.2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap');

/* Grundinställningar */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
    width: 100%; height: 100%; 
    background-color: #000; 
    font-family: 'Inter', sans-serif; 
    color: white; 
    overflow-x: hidden; 
}

/* Lagerordning */
#bg-image { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: url('textures/stars_milky_way.jpg') no-repeat center center; 
    background-size: cover; z-index: 0; 
}
#starfield { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
#shared-webgl-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; transition: opacity 0.5s; }
#main-content { position: fixed; top: 0; left: 0; display: flex; flex-direction: row; height: 100vh; z-index: 10; will-change: transform; }

/* Stationer - 100vw breda med 150vw marginal för rymdkänsla */
.station, .hero-section { 
    width: 100vw; height: 100vh; 
    flex-shrink: 0; display: flex; 
    justify-content: center; align-items: center; 
    margin-right: 150vw; 
}
.result-section { margin-right: 0; }

/* Innehållsbredd och whitespace */
.station-content, .hero-title-wrapper { 
    text-align: center; width: 90%; 
    max-width: 650px; 
    text-shadow: 0 0 20px #000; 
    position: relative; 
    z-index: 20; 
    padding: 40px 0; 
}

/* Ökad whitespace mellan rubrik och ingress */
.glow-text { 
    font-size: clamp(2rem, 8vw, 4rem); 
    font-weight: 900; color: #00d4ff; 
    text-shadow: 0 0 30px #00d4ff; 
    margin-bottom: 40px; 
}

.formula-display { 
    font-size: 1.5rem; color: #00ff7f; 
    font-weight: 700; margin: 40px 0; 
    letter-spacing: 2px; 
}
.formula-display sup { font-size: 1rem; }

/* Tajtare formel på små skärmar */
@media (max-width: 600px) {
    .formula-display {
        white-space: nowrap;
        letter-spacing: -0.01em;
        word-spacing: -0.1em;
    }
}

.hero-description { font-size: 1.1rem; color: #eee; margin-bottom: 30px; line-height: 1.6; }

/* Stationsspecifik whitespace */
.symbol { font-size: 3.5rem; font-weight: 900; color: #00d4ff; display: block; margin-bottom: 25px; }
h3 { margin-bottom: 25px; font-size: 1.6rem; }

.research-note { 
    font-size: 0.85rem; 
    font-style: italic; 
    color: #00d4ff; 
    margin-bottom: 35px; 
    opacity: 0.9;
    line-height: 1.5;
}

.slider { width: 100%; height: 12px; accent-color: #00d4ff; margin-bottom: 30px; cursor: pointer; }
.v-val { font-size: 3rem; font-weight: 900; }
.unit { color: #00ff7f; margin-left: 10px; }

/* Solsystem i Hero */
.solar-layer { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 5; }
.solar-system-container { position: relative; width: 70vmin; height: 70vmin; display: flex; justify-content: center; align-items: center; }
.sun { width: 14%; height: 14%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd04b, #ff7b00); box-shadow: 0 0 30px #ffcc33; }
.orbit { position: absolute; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; animation: orbitRotate linear infinite; }
.m-o { width: 30%; height: 30%; animation-duration: 6s; }
.v-o { width: 42%; height: 42%; animation-duration: 10s; }
.e-o { width: 54%; height: 54%; animation-duration: 14s; }
.ma-o { width: 66%; height: 66%; animation-duration: 18s; }
.j-o { width: 82%; height: 82%; animation-duration: 26s; }
.s-o { width: 98%; height: 98%; animation-duration: 35s; }

.p-mini { position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; }
.p-mercury { background: #A5A5A5; }
.p-venus { background: #E3BB76; }
.p-earth { background: #2271B3; }
.p-mars { background: #E27B58; }
.p-jupiter { background: #D39C7E; }
.p-saturn { background: #C5AB6E; }

@keyframes orbitRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Resultat-sektion */
.n-display { font-size: clamp(4rem, 15vw, 8rem); font-weight: 900; text-shadow: 0 0 40px #00d4ff; line-height: 1; margin: 10px 0; }
.voyager-container { position: relative; width: 100vw; height: 80vh; display: flex; justify-content: center; align-items: center; }
.voyager-image { position: absolute; width: 85%; height: 85%; object-fit: contain; opacity: 0.35; z-index: 1;}
.voyager-content { z-index: 5; text-align: center; width: 90%; max-width: 650px; padding: 20px; }

.drake-info { margin: 20px 0; font-size: 0.95rem; color: #ccc; line-height: 1.5; }
.wiki-link { color: #00ff7f; text-decoration: none; font-weight: bold; border-bottom: 1px solid transparent; display: inline-block; margin-top: 10px; }
.wiki-link:hover { border-bottom-color: #00ff7f; }

/* Sidfot */
.site-footer { 
    position: absolute; 
    bottom: 30px; 
    width: 100%; 
    text-align: center; 
    font-size: 0.85rem; 
    color: #cccccc; 
    opacity: 0.8; 
    letter-spacing: 1px;
    z-index: 30;
}

.back-to-start { margin-top: 20px; color: #00d4ff; cursor: pointer; text-decoration: underline; display: inline-block; }
#scroll-proxy { position: absolute; top: 0; left: 0; width: 1px; z-index: -1; }
.next-arrow, .scroll-prompt { margin-top: 30px; cursor: pointer; color: #00d4ff; display: flex; flex-direction: column; align-items: center; animation: arrowBounce 2s infinite; }
.next-arrow svg, .scroll-prompt svg { width: 50px; height: 50px; }
@keyframes arrowBounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} }