/* === interplanetary.quest - Mission Control === */
/* Palette: #0A0E1A #0D1220 #0F1628 #00E5A0 #F5A623 #E84855 #E0E6F0 #6B7A99 #1A2744 #00BCD4 #ffffff */

:root {
    --void: #0A0E1A;
    --deep-space: #0D1220;
    --nebula: #0F1628;
    --signal: #00E5A0;
    --amber: #F5A623;
    --alert: #E84855;
    --data-white: #E0E6F0;
    --ghost: #6B7A99;
    --border: #1A2744;
    --holo-teal: #00BCD4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--void);
    color: var(--data-white);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}

/* === Scan Lines === */
.scan-lines {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 229, 160, 0.03) 3px, rgba(0, 229, 160, 0.03) 4px);
}

/* === HUD Frame === */
.hud-frame {
    position: fixed;
    top: 24px; left: 24px; right: 24px; bottom: 24px;
    border: 1px solid rgba(0, 229, 160, 0.4);
    pointer-events: none;
    z-index: 1000;
}

.hud-corner {
    position: absolute;
    width: 32px; height: 32px;
}

.hud-corner.tl { top: -1px; left: -1px; }
.hud-corner.tr { top: -1px; right: -1px; }
.hud-corner.bl { bottom: -1px; left: -1px; }
.hud-corner.br { bottom: -1px; right: -1px; }

.corner-path {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: drawCorner 0.5s ease-out forwards;
}

.hud-corner.tl .corner-path { animation-delay: 0s; }
.hud-corner.tr .corner-path { animation-delay: 0.1s; }
.hud-corner.bl .corner-path { animation-delay: 0.2s; }
.hud-corner.br .corner-path { animation-delay: 0.3s; }

@keyframes drawCorner {
    to { stroke-dashoffset: 0; }
}

.hud-top-bar {
    position: absolute;
    top: 8px; left: 40px; right: 40px;
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ghost);
    letter-spacing: 0.08em;
}

.hud-domain {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--signal);
    font-size: 11px;
}

.hud-bottom-bar {
    position: absolute;
    bottom: 8px; left: 40px; right: 40px;
    overflow: hidden;
    height: 18px;
}

.ticker-container {
    display: flex;
    white-space: nowrap;
    animation: tickerScroll 40s linear infinite;
}

.ticker-scroll {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ghost);
    flex-shrink: 0;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* === Sections === */
.section {
    min-height: 100vh;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
}

/* === Star Chart === */
#star-chart {
    overflow: hidden;
}

.orbital-chart {
    position: absolute;
    width: 80%;
    max-width: 700px;
    height: auto;
    opacity: 0;
    animation: chartFade 1.5s ease-out 1s forwards;
}

@keyframes chartFade {
    to { opacity: 1; }
}

.orbit {
    animation: orbitRotate var(--orbit-dur, 120s) linear infinite;
    transform-origin: center;
}

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

.planet-dot {
    opacity: 0;
    animation: planetPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow: 0 0 8px 2px var(--signal);
}

.planet-dot:nth-child(7) { animation-delay: 2s; }
.planet-dot:nth-child(8) { animation-delay: 2.2s; }
.planet-dot:nth-child(9) { animation-delay: 2.4s; }
.planet-dot:nth-child(10) { animation-delay: 2.6s; }
.planet-dot:nth-child(11) { animation-delay: 2.8s; }

@keyframes planetPop {
    0% { opacity: 0; r: 0; }
    100% { opacity: 1; }
}

.chart-title {
    position: absolute;
    bottom: 15%;
    left: 80px;
    text-align: left;
}

.title-line-1 {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.12em;
    color: var(--data-white);
    text-transform: uppercase;
}

.title-rule {
    border: none;
    border-top: 1px solid var(--signal);
    width: 100%;
    margin: 8px 0;
}

.title-line-2 {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.12em;
    color: var(--signal);
    text-transform: uppercase;
}

/* === Transit Manifold === */
#transit-manifold {
    flex-wrap: wrap;
    padding-top: 80px;
    padding-bottom: 80px;
}

.data-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    max-width: 1000px;
    width: 100%;
}

.data-panel {
    background: var(--deep-space);
    border: 1px solid var(--border);
    padding: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, box-shadow 0.3s ease-out;
}

.data-panel.revealed {
    opacity: 1;
    transform: translateY(0);
}

.data-panel:hover {
    box-shadow: inset 0 0 30px rgba(0, 229, 160, 0.03);
}

.panel-header {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--signal);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.panel-data {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.data-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ghost);
    letter-spacing: 0.06em;
}

.data-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--data-white);
}

.data-value.green { color: var(--signal); }
.data-value.amber { color: var(--amber); }
.data-value.red { color: var(--alert); }

/* === Mission Archive === */
#mission-archive {
    flex-direction: column;
    gap: 0;
    padding: 80px;
}

.archive-block {
    padding: 40px 60px;
    background: var(--deep-space);
    margin-bottom: -1px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.archive-block.revealed {
    opacity: 1;
    transform: translateY(0);
}

.block-1 { clip-path: polygon(0 0, 100% 2%, 100% 98%, 0 100%); }
.block-2 { clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%); }
.block-3 { clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%); }

.archive-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--signal);
    margin-bottom: 12px;
}

.archive-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--data-white);
    line-height: 1.75;
    max-width: 60ch;
}

/* === Telemetry === */
.telemetry-section {
    background: var(--nebula);
}

.telemetry-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 900px;
}

.telem-col {
    flex: 1;
    text-align: center;
    padding: 20px;
}

.telem-divider {
    width: 1px;
    height: 60px;
    background: rgba(0, 229, 160, 0.2);
}

.telem-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ghost);
    margin-bottom: 12px;
}

.telem-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 32px;
    font-weight: 600;
    color: var(--signal);
}

/* === Terminal === */
#terminal {
    align-items: center;
    justify-content: center;
}

.terminal-window {
    max-width: 700px;
    width: 100%;
    padding: 32px;
    background: var(--void);
    border: 1px solid var(--border);
}

.terminal-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    line-height: 2;
    color: var(--data-white);
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.terminal-line.revealed { opacity: 1; }

.prompt { color: var(--signal); }
.cmd { color: var(--data-white); }

.terminal-line.response {
    color: var(--ghost);
    padding-left: 24px;
}

.terminal-cursor {
    color: var(--signal);
    animation: cursorBlink 1s step-end infinite;
}

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

/* === Responsive === */
@media (max-width: 768px) {
    .section { padding: 60px 40px; }
    .data-panels { grid-template-columns: 1fr; }
    .telemetry-grid { flex-direction: column; gap: 24px; }
    .telem-divider { width: 60px; height: 1px; }
    .hud-top-bar { font-size: 9px; }
    .chart-title { left: 40px; bottom: 10%; }
    #mission-archive { padding: 40px; }
    .archive-block { padding: 24px 32px; clip-path: none; }
}