html,
body {
    margin: 0;
    padding: 0;
    background: radial-gradient(ellipse at bottom, #0d1b2a 0%, #000814 60%, #000000 100%);
    color: white;
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}


#satellite-scrolly-container,
#exoplanet-section,
#iss-scrolly-container,
.iss-banner {
    font-family: 'Lato', sans-serif;
}

#satellite-scrolly-container .satellite-step-content h1 {
    font-family: "Orbitron", sans-serif;
}

#exoplanet-section #main-title {
    font-family: 'Lato', sans-serif;
}

.iss-banner .banner-title,
#iss-visualization-container .main-title {
    font-family: 'Lato', sans-serif;
}

#scrolly-timeline h2,
.mission-step[data-step="2"] h4,
#moon-mars-container h2 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
}

#scrolly-timeline p,
.mission-step[data-step="2"] p,
.mission-step[data-step="2"] label,
#info-box,
.text-scroll-block p,
#moon-mars-container p,
#moon-mars-popup {
    font-family: sans-serif;
}


body.scroll-locked {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {

    color: white;
}


#satellite-scrolly-container {
    position: relative;
    width: 100%;
}


.satellite-scrolly-step {
    box-sizing: border-box;
    width: 100%;
    padding: 8vh 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0.4;
    transition: opacity 0.5s ease-in-out;
    margin-bottom: 20vh;
    position: relative;
    min-height: 100vh;
}

.satellite-scrolly-step:last-child {
    margin-bottom: 5vh;
    border-bottom: none;
}

.satellite-scrolly-step.is-active {
    opacity: 1;
}


.satellite-step-content {
    max-width: 800px;
    text-align: justify;
    margin-bottom: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    padding: 20px;
    border-radius: 12px;
}

.satellite-step-content p {
    font-size: 1.1em;
    line-height: 1.6;
}

.satellite-step-content strong {
    color: #FFD700;
}

.text-step .satellite-step-content {
    max-width: 700px;
}

.satellite-viz-container {
    width: 100%;
    max-width: 1800px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
}

.satellite-scrolly-step[data-step="globe"] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.globe-layout-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#globe {
    width: 90vw;
    max-width: none;
    height: 65vh;
    min-height: 500px;
    display: block;
    position: relative;
}

#treemap-scrolly-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    margin-bottom: 50px;
    min-height: 100vh;
    height: 100vh;
}

#treemap-sticky-viz {
    width: 45%;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 2;
    background: transparent;
}

#treemap {
    width: 100%;
    height: 100%;
    max-height: none;
}

#treemap-scrolling-text {
    width: 55%;
    padding-left: 30px;
    padding-right: 0;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;

}

#treemap-scrolling-text .satellite-scrolly-step {
    min-height: 70vh;
    margin-bottom: 30vh;
    padding: 5vh 20px;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;

}

#treemap-scrolling-text .satellite-step-content {
    max-width: 100%;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
}



#treemap svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: sans-serif;
}

#treemap rect {
    cursor: pointer;
}

#treemap .treemap-label-purpose {
    fill: #000;
}

#treemap .treemap-label-country {
    fill: #000;
}

.treemap-glow {
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
    stroke-width: 3 !important;
    opacity: 1 !important;
}

.treemap-faded {
    opacity: 0.3 !important;
    transition: opacity 0.2s;
}

#treemap-legend {
    width: 90%;
    max-width: 250px;
    height: 20%;
    max-height: 150px;
    padding: 10px;
    margin-top: 15px;
    color: white;
    box-sizing: border-box;
}

#treemap-legend .legend-title {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 13px;
    color: white;
    border-bottom: 1px solid #555;
    padding-bottom: 4px;
}

#treemap-legend text {
    fill: white;
    font-size: 11px;
}



.satellite-tooltip {
    position: absolute;
    text-align: left;
    padding: 6px 10px;
    background: rgba(20, 20, 30, 0.95);
    color: #FAFAFA;
    border: 1px solid #00ffff;
    border-radius: 6px;
    pointer-events: none;
    font-size: 12px;
    opacity: 0;
    max-width: 250px;
    white-space: normal;
    cursor: default;
    backdrop-filter: blur(3px);
    box-shadow: 0 0 8px #00ffff55;
    z-index: 10;
    transition: opacity 0.2s;
}

.treemap-tooltip {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    text-align: left;
    max-width: 250px;
    white-space: normal;
    cursor: default;
    z-index: 11;
    transition: opacity 0.2s;
}


@media (max-width: 900px) {

    #treemap-scrolly-section {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    #treemap-sticky-viz {
        width: 100%;
        position: relative;
        top: 0;
        height: 60vh;
        min-height: 450px;
        padding: 10px;
        margin-bottom: 5vh;
    }

    #treemap-scrolling-text {
        width: 100%;
        height: auto;
        overflow-y: visible;
        padding-left: 0;
    }

    #treemap-scrolling-text .satellite-scrolly-step {
        min-height: auto;
        padding: 5vh 15px;
        margin-bottom: 15vh;
        align-items: center;
    }

    #treemap-scrolling-text .satellite-step-content {
        max-width: 90%;
    }

    #treemap {
        height: 70%;
        max-height: 500px;
    }

    #treemap-legend {
        width: 90%;
        max-width: 400px;
        height: auto;
        max-height: 150px;
    }


    .satellite-step-content {
        max-width: 90%;
    }

    #globe {
        width: 95%;
        height: 60vh;
    }
}


@media (max-width: 600px) {
    .satellite-scrolly-step {
        padding: 6vh 10px;
        margin-bottom: 15vh;
    }

    .satellite-step-content h1 {
        font-size: 1.6em;
    }

    .satellite-step-content p {
        font-size: 1em;
    }

    #treemap-sticky-viz {
        height: 55vh;
        min-height: 400px;
    }

    #treemap {
        height: 70%;
        max-height: 400px;
    }

    #treemap-legend {
        font-size: 10px;
    }

    #treemap-legend .legend-title {
        font-size: 12px;
    }

    .satellite-tooltip {
        font-size: 11px;
        padding: 4px 8px;
    }

    .treemap-tooltip {
        font-size: 11px;
        padding: 6px 8px;
    }
}










#exoplanet-section {

    background-color: black;
    color: white;
    overflow: hidden;
    font-weight: 400;
}

#intro-container {
    position: relative;
    overflow: visible;
    padding: 10vh 5% 5vh 5%;
    margin-bottom: 0;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

}



#main-title {

    font-weight: 900;
    text-align: center;
    margin-bottom: 5vh;
    position: relative;
    z-index: 3;
    white-space: normal;
    font-size: clamp(3em, 8vw, 6em);
    width: 90%;
    line-height: 1.2;
}


.exo-scroll-text-panel {
    max-width: 600px;
    margin: 5vh auto 20px auto;
    padding: 25px 35px;
    background-color: rgba(20, 20, 20, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;

    font-size: 1.1em;
    line-height: 1.7;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: opacity 0.5s ease-in-out;
    opacity: 0.3;
}

.exo-scroll-text-panel.is-active {
    opacity: 1;
}

.exo-scroll-text-panel h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
    color: #eee;
}

.exo-scroll-text-panel p {
    margin-bottom: 15px;
}

.exo-scroll-text-panel strong {
    color: #ffcc66;
    font-weight: 700;
}

h1.exo-chart-title {
    text-align: center;

    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.exo-viz-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}


.exo-viz-container.is-visible {
    opacity: 1;
}

.exo-legend {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;

    font-size: 0.9em;
    color: #ccc;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-swatch {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid #555;
}

#visualization-distance-container {
    margin-bottom: 40px;
}


#visualization-container .node,
#visualization-distance-container .node {
    cursor: pointer;
}

#visualization-container .node circle,
#visualization-distance-container .node circle {
    stroke: #aaa;
    stroke-width: 0.5px;
    transition: stroke 0.2s, stroke-width 0.2s;
}

#visualization-container .node:hover circle,
#visualization-distance-container .node:hover circle {
    stroke: white;
    stroke-width: 1.5px;
}


.exo-tooltip {
    position: absolute;
    text-align: left;
    padding: 8px;
    font: 12px 'Lato', sans-serif;
    background: rgba(30, 30, 30, 0.9);
    color: white;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    white-space: pre-line;
    opacity: 0;
    z-index: 10;
    transition: opacity 0.2s;
}


.distance-circle {
    fill: none;
    stroke: #444;
    stroke-width: 1px;
}

.distance-label {
    fill: #888;
    font-size: 10px;
    text-anchor: middle;

}

.sun {
    fill: yellow;
    stroke: orange;
    stroke-width: 1px;
}

.sun-label {
    fill: yellow;
    font-size: 10px;
    font-weight: bold;
    text-anchor: middle;

}



#visualization-discovery-container {
    margin-top: 40px;
}

.bar {
    fill: #4682B4;
    transition: fill 0.2s ease-out, width 0.8s ease-out;
}



#visualization-discovery-container .axis path,
#visualization-discovery-container .axis line {
    fill: none;
    stroke: #aaa;
    shape-rendering: crispEdges;
}

#visualization-discovery-container .axis text {
    fill: #ccc;
    font-size: 11px;

}

.bar-label {
    fill: white;
    font-size: 10px;
    text-anchor: start;
    dominant-baseline: middle;

    opacity: 0;
    transition: opacity 0.5s ease-in;
}


.exo-scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px;
    box-sizing: border-box;
}


#scene-methods-overview,
#scene-bubble-viz,
#scene-distance-viz {
    min-height: 110vh;
    justify-content: center;
}

#scene-intro {
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
}


.exo-scene.space-bg {
    background-image: url('data/background-space-black.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


#transit-video {
    width: 60%;
    max-width: 500px;
    margin-top: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 1;
}


@media (max-width: 768px) {
    .exo-scroll-text-panel {
        max-width: 90%;
        padding: 20px 25px;
        font-size: 1em;
    }

    h1.exo-chart-title {
        font-size: 1.3em;
    }

    .exo-viz-container {
        width: 95%;
    }

    #visualization-discovery-container svg {

        width: 100%;
        height: auto;
    }

    #visualization-container svg,
    #visualization-distance-container svg {
        width: 95vw;
        height: 95vw;
        max-width: 500px;
        max-height: 500px;
    }

    #visualization-discovery-container .axis text {
        font-size: 9px;
    }

    .bar-label {
        font-size: 8px;
    }

    .exo-legend {
        font-size: 0.8em;
        gap: 10px;
    }

    .legend-swatch {
        width: 12px;
        height: 12px;
    }

    #transit-video {
        width: 80%;
        max-width: 400px;
    }
}


#iss-scrolly-container {
    color: #E0E0E0;
    background-color: #000000;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 5vh;
    padding-bottom: 10vh;
    align-items: flex-start;
    min-height: 100vh;
}



header.video-banner.iss-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-bottom: 5vh;

}


.iss-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iss-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.iss-banner .banner-title {
    color: #FFFFFF;
    font-size: 4.5rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}


#iss-visualization-container {
    position: sticky;
    top: 10vh;
    width: 65%;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    padding: 0 1%;
    box-sizing: border-box;
    margin-bottom: 20vh;
    z-index: 5;
}


#iss-scroll-narrative {
    width: 35%;
    padding-left: 2%;
    padding-right: 3%;
    box-sizing: border-box;
    z-index: 10;

    max-height: 100vh;
    overflow-y: auto;
}



#iss-scroll-narrative .step.iss-step {
    background-color: rgba(30, 30, 30, 0.85);
    padding: 20px 25px;
    margin-bottom: 70vh;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #E0E0E0;
    transition: background-color 0.3s ease-in-out;
    min-height: 150px;

    letter-spacing: normal;
    line-height: 1.6;
    width: auto;
    max-width: none;
}

#iss-scroll-narrative .step.iss-step:last-child {
    margin-bottom: 10vh;
}

#iss-scroll-narrative .step.iss-step.is-active {
    background-color: rgba(50, 50, 50, 0.95);
}

#iss-scroll-narrative .step.iss-step h3 {
    margin-top: 0;
    color: #FFFFFF;
    font-weight: 700;

    font-size: 1.2rem;
    text-shadow: none;
    text-align: left;
}

#iss-scroll-narrative .step.iss-step p {
    font-size: 1rem;
    line-height: 1.6;

    color: #E0E0E0;
    max-width: none;
    text-shadow: none;
}




#iss-visualization-container .main-title {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}


#iss-visualization-container svg {
    display: block;

    max-width: 100%;
    height: auto;
    background-color: #000000;
    overflow: visible;
}




#iss-visualization-container .expedition-group>*,
#iss-visualization-container .expedition-number-circle,
#iss-visualization-container .expedition-number-text,
#iss-visualization-container .arrival-date-text,
#iss-visualization-container .connection-line,
#iss-visualization-container .commander-marker,
#iss-visualization-container .crew-marker,
#iss-visualization-container .commander-border,
#iss-visualization-container .crew-border,
#iss-visualization-container .crew-name,
#iss-visualization-container .iss-graphic,
#iss-visualization-container .key-group,
#iss-visualization-container .crew-path-circle,
#iss-visualization-container .expedition-boundary-circle {
    transition: opacity 0.6s ease-in-out, fill 0.6s ease-in-out, stroke 0.6s ease-in-out, stroke-width 0.3s ease-in-out;
}


#iss-visualization-container .subtitle {
    font-size: 18px;
    font-weight: 400;
    fill: #A0A0A0;
    text-anchor: middle;
}


#iss-visualization-container .crew-path-circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.2px;
    stroke-opacity: 0.9;
}


#iss-visualization-container .expedition-boundary-circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 0.5px;
    stroke-opacity: 0.9;
}

#iss-visualization-container .expedition-group text {
    font-size: 11px;
    fill: #C0C0C0;
    text-anchor: middle;
}

#iss-visualization-container .expedition-number-circle {
    fill: none;
    stroke: red;
    stroke-width: 1px;
    stroke-opacity: 0.6;
}

#iss-visualization-container .expedition-number-text {
    fill: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

#iss-visualization-container .arrival-date-text {
    fill: #A0A0A0;
    font-weight: 600;
    font-size: 8px;
    text-anchor: middle;
    dominant-baseline: central;
}


#iss-visualization-container .commander-marker {
    fill: #4DD0E1;
    stroke: none;
}

#iss-visualization-container .crew-marker {
    fill: #EC407A;
    stroke: none;
}


#iss-visualization-container .commander-border {
    fill: none;
    stroke: #4DD0E1;
    stroke-width: 0.7px;
}

#iss-visualization-container .crew-border {
    fill: none;
    stroke: #EC407A;
    stroke-width: 0.7px;
}


#iss-visualization-container .crew-name {
    font-size: 8px;
    fill: #C0C0C0;
    text-anchor: middle;
}


#iss-visualization-container .connection-line {
    stroke: #EC407A;
    stroke-width: 0.4px;
    stroke-opacity: 0.3;
}


#iss-visualization-container .key-group text {
    font-size: 10px;
    fill: #C0C0C0;
    dominant-baseline: central;
}

#iss-visualization-container .legend-background {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 1px;
    fill: none;
}

#iss-visualization-container .key-title {
    font-weight: 700;
    font-size: 14px;
    fill: #FFFFFF;
}


#iss-visualization-container .viz-element.faded {
    opacity: 0.1 !important;
}

#iss-visualization-container .viz-element.highlighted {
    opacity: 1.0 !important;
}


#iss-visualization-container .expedition-number-circle.highlighted,
#iss-visualization-container .expedition-number-text.highlighted,
#iss-visualization-container .arrival-date-text.highlighted,
#iss-visualization-container .expedition-boundary-circle.highlighted {
    opacity: 1.0 !important;
    stroke-opacity: 1.0 !important;
}

#iss-visualization-container .expedition-number-circle.highlighted {
    stroke: white;
    fill: red;
}


#iss-visualization-container .commander-marker.highlighted {
    opacity: 1.0 !important;
    fill: #80DEEA;
}

#iss-visualization-container .crew-marker.highlighted {
    opacity: 1.0 !important;
    fill: #F48FB1;
}

#iss-visualization-container .crew-border.highlighted,
#iss-visualization-container .commander-border.highlighted {
    opacity: 0.9 !important;
    stroke-width: 1.5px !important;
    stroke: white !important;
}

#iss-visualization-container .crew-path-circle.highlighted {
    stroke-opacity: 0.9 !important;
    stroke-width: 0.5px !important;
}

#iss-visualization-container .connection-line.highlighted {
    stroke-opacity: 0.7 !important;
    stroke: white !important;
}


#iss-visualization-container .key-group.faded,
#iss-visualization-container .iss-graphic.faded {
    opacity: 0.1 !important;
}


@media (max-width: 1200px) {
    #iss-visualization-container {
        width: 60%;
    }

    #iss-scroll-narrative {
        width: 40%;
    }
}

@media (max-width: 992px) {
    #iss-scrolly-container {
        flex-direction: column;
    }

    #iss-visualization-container {
        width: 95%;
        position: relative;
        top: 0;
        margin-bottom: 5vh;
        height: auto;
        min-height: 70vh;
    }

    #iss-scroll-narrative {
        width: 90%;
        padding: 0 5%;
        margin: 0 auto;
        max-height: none;
        overflow-y: visible;
    }

    #iss-scroll-narrative .step.iss-step {
        margin-bottom: 25vh;
        min-height: auto;
    }

    #iss-visualization-container svg {
        width: 100%;
        height: auto;
        max-height: 80vh;
    }
}

@media (max-width: 768px) {
    .iss-banner .banner-title {
        font-size: 3rem;
    }

    #iss-visualization-container .main-title {
        font-size: 1.5rem;
    }

    #iss-scroll-narrative .step.iss-step h3 {
        font-size: 1.2rem;
    }

    #iss-scroll-narrative .step.iss-step p {
        font-size: 0.9rem;
    }
}


.step.mission-step {
    position: relative;
    padding: 15px;
    color: #e0e0e0;
    letter-spacing: 0.5px;
    line-height: 1.6;
    border: none;
    transition: background 1s ease, color 1s ease;
    box-sizing: border-box;
    display: block;
    width: fit-content;
    max-width: 100%;
}



.full-page-step {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 60px;
    box-sizing: border-box;

}

.full-page-step[data-step="2"] {
    background: black;
    justify-content: flex-start;
    padding-top: 20px;
}

.full-page-step[data-step="3"] {
    background: black;
    justify-content: center;
}

.full-page-step[data-step="4"] {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.step.mission-step h2 {
    font-size: 32px;
    color: #ffffff;
    text-shadow: 0 0 8px #00f7ff;
    margin-bottom: 20px;
    text-align: left;
}

.step.mission-step p {
    font-size: 17px;
    color: #cccccc;
    max-width: 650px;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}


#scrolly-timeline {
    display: flex;
    position: relative;
    background: black
}

.scrolly-steps {
    flex: 1 1 45%;
    max-width: 45%;
    padding: 20px 30px;
    z-index: 10;

}

.scrolly-steps .step.mission-step {
    min-height: 70vh;
    margin-bottom: 50vh;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 35px 45px;
    box-shadow: 0 0 15px rgba(0, 150, 200, 0.1);

    width: auto;
}

.scrolly-steps .step.mission-step:last-child {
    min-height: 100vh;
    margin-bottom: 10vh;
}

.scrolly-graphics {
    flex: 1 1 55%;
    max-width: 55%;
    width: 55%;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: visible;
}

#timeline-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 60px;
    box-sizing: border-box;
}





#top-panel {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 18, 18, 0.9);
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#top-panel.visible {
    opacity: 1;
}


#filter-panel {
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
    color: #eee;
}

#filter-panel label {
    margin-right: 4px;
}

#filter-panel select,
#filter-panel button {
    padding: 5px 10px;
    background: #333;
    color: #EEE;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Orbitron', sans-serif;
}

#filter-panel button:hover {
    background: #444;
}



.control-panel.mission-control-panel {
    position: absolute;
    top: 10px;
    left: 20px;
    background: rgba(0, 0, 0, 0.75);
    padding: 10px 15px;
    border-radius: 8px;
    color: white;
    z-index: 10;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    max-width: 350px;
    width: 90%;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.control-panel.mission-control-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.control-panel.mission-control-panel label,
.control-panel.mission-control-panel select {
    display: block;
    margin-top: 8px;
    font-size: 12px;
}

.control-panel.mission-control-panel input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

.control-panel.mission-control-panel h4 {
    font-weight: bold;
    font-size: 13px;
    margin: 12px 0 6px 0;
    color: #00f7ff;
}



#viz-container {
    display: flex;
    flex-direction: row;
    width: 95%;
    max-width: 1600px;
    height: 75vh;
    max-height: 700px;
    margin-top: 10px;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#viz-container.visible {
    opacity: 1;
    pointer-events: auto;
}

#map-section,
#chart-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;
}

#map,
#barchart {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

#barchart {
    opacity: 0;
    transition: opacity 1s ease;
}

#barchart.visible {
    opacity: 1;
}




.tooltip {
    position: absolute;
    background-color: rgba(20, 20, 20, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    pointer-events: none;
    font-size: 12px;
    line-height: 1.4;
    display: none;
    opacity: 0;
    z-index: 999;
    border: 1px solid #444;
    max-width: 250px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
    font-family: sans-serif;
}

.tooltip strong {
    color: #00f7ff;
    font-weight: 600;
}

#info-box {
    display: none;
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 15px auto 15px auto;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 12px 20px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    z-index: 5;
    pointer-events: none;
    border: 1px solid #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease;

}




.control-panel.mission-control-panel #reset-view {
    background-color: #1e88e5;
    color: white;
    border: none;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 12px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.control-panel.mission-control-panel #reset-view.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}


.control-panel.mission-control-panel #reset-view:hover {
    background-color: #1565c0;
    transform: scale(1.03);
}

.control-panel.mission-control-panel #reset-view:active {
    background-color: #0d47a1;
    transform: scale(0.99);
}


#slider-container {
    margin-top: 15px;
    max-width: 100%;
}

#slider-range svg {
    width: 100% !important;
    height: auto;
    overflow: visible;
}

#slider-range text {
    fill: white !important;
    font-size: 10px !important;
}

#slider-range .parameter-value text {
    font-size: 12px !important;
    fill: #00bcd4 !important;
}

#range-display {
    font-weight: bold;
    color: white;
    font-size: 12px;
    margin-top: 6px;
}


#moon-mars-container {
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

#moon-mars-container.visible {
    opacity: 1;
    transform: translateY(0);
}

#moon-mars-viz {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block;
    margin: 0 auto;
}

.moon-mars-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(20, 20, 30, 0.97);
    color: #FAFAFA;
    border: 1px solid #FFD700;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 12px;
    z-index: 1001;
    max-width: 260px;
    white-space: normal;
    box-shadow: 0 0 10px #FFD70044;
    opacity: 0;
    display: block;
    transition: opacity 0.2s;
    left: 0;
    top: 0;
}

#moon-mars-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #181818;
    color: #FFF;
    padding: 15px 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    border: 1px solid #444;
}

#moon-mars-popup h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #00f7ff;
    font-family: 'Orbitron', sans-serif;
}

#moon-mars-popup table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#moon-mars-popup th,
#moon-mars-popup td {
    text-align: left;
    padding: 6px 4px;
    border-bottom: 1px solid #333;
}

#moon-mars-popup th {
    font-weight: bold;
    color: #aaa;
}

#moon-mars-popup tr:last-child td {
    border-bottom: none;
}


#moon-mars-popup button#moon-mars-close {
    background: #7a4244;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
    transition: background-color 0.2s ease;
    font-family: 'Orbitron', sans-serif;
}

#moon-mars-popup button#moon-mars-close:hover {
    background: #9F5255;
}


.text-only-step {

    display: flex;
    justify-content: center;
    align-items: center;
}

.text-scroll-block {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    color: #cccccc;
    font-size: 18px;
    line-height: 1.8;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    font-family: sans-serif;
}

.text-scroll-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.text-scroll-block h2 {
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Orbitron', sans-serif;
}



.highlight {
    stroke: #FFF !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 8px #FFF);
}

.highlight-curve {
    stroke: #FFF !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 6px #FFF);
    opacity: 0.8 !important;
}



#chart-svg {
    transition: opacity 0.5s ease-in-out;
    display: block;
}



#chart-svg .axis path,
#chart-svg .axis line,
#barchart .axis path,
#barchart .axis line {
    stroke: #666;
    stroke-width: 1px;
    fill: none;
    shape-rendering: crispEdges;
}

#chart-svg .axis text,
#barchart .axis text {
    fill: #BBB;
    font-size: 10px;
    font-family: sans-serif;
}

#chart-svg .axis .axis-title,
#barchart .axis .axis-title {
    font-size: 12px;
    fill: #DDD;
    font-family: 'Orbitron', sans-serif;
    text-anchor: middle;
}

.pt {
    transition: r 0.2s ease, opacity 0.2s ease, fill 0.2s ease;
    cursor: pointer;
    stroke-width: 0.5px;
    stroke: rgba(255, 255, 255, 0.5);
}

.pt:hover {
    filter: drop-shadow(0 0 8px #FFD700);
    stroke: #fff;
    stroke-width: 1.5;
    opacity: 1 !important;
}

svg {
    overflow: visible;

}

.error-message {
    color: red;
    text-align: center;
    padding: 20px;
    font-family: sans-serif;
}





@font-face {
    font-family: 'BOOWIE';

    src: url('data/BOOWIE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


#astronaut-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    background-color: #00000b;
    color: #fff;
}

#title-container {
    position: absolute;
    top: 10vh;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}


#astro-main-title {
    font-family: 'BOOWIE', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    margin: 0;
    color: #fff;
}


#sub-title {
    font-family: 'Roboto Mono', monospace;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    margin-top: 10px;
    color: #fff;
}

#story-intro-note {
    max-width: 44rem;
    margin: 14px auto 0;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}


#astronaut-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


#astro-scroll-content {



    padding-top: 100vh;
    box-sizing: border-box;
    min-height: 5vh;


}


#astro-scroll-content h1,
#astro-scroll-content p {
    text-align: center;
    color: #fff;
}


@media (max-width: 600px) {
    #astro-main-title {
        font-size: clamp(2.5rem, 7vw, 5rem);
    }

    #sub-title {
        font-size: clamp(0.9rem, 2vw, 1.5rem);
    }

    #story-intro-note {
        width: calc(100% - 32px);
        border-radius: 20px;
        font-size: 0.74rem;
    }
}