/* ============================================
   interplanetary.quest - Dopamine Neon Styles
   Seapunk Mission Control
   ============================================ */

/* --- Palette --- */
:root {
    --void-indigo: #0A0A1E;
    --trench-blue: #0D1B2A;
    --abyss-white: #F0F4FF;
    --reef-magenta: #FF2D7B;
    --bio-cyan: #00F5FF;
    --nebula-violet: #B84DFF;
    --plankton-green: #39FF78;
    --solar-flare: #FFB627;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    font-family: 'EB Garamond', serif;
    background: var(--void-indigo);
    color: var(--abyss-white);
    cursor: none;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Custom Cursor --- */
.cursor-crosshair {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cursor-crosshair::before,
.cursor-crosshair::after {
    content: '';
    position: absolute;
    background: var(--bio-cyan);
}

.cursor-crosshair::before {
    width: 20px;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cursor-crosshair::after {
    width: 1px;
    height: 20px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.cursor-crosshair.active {
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--bio-cyan));
}

/* --- Phosphorescent Trail --- */
.trail-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.trail-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bio-cyan);
    opacity: 0.3;
    transition: opacity 600ms ease-out;
    pointer-events: none;
}

.trail-dot.fade {
    opacity: 0;
}

/* --- Grid Overlay --- */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 800ms ease;
}

.grid-overlay.visible {
    opacity: 1;
}

.grid-col {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    background: var(--bio-cyan);
    opacity: 0.08;
    transition: opacity 200ms ease;
}

.grid-col.highlight {
    opacity: 0.25;
}

.grid-col[data-col="1"]  { left: calc(100% / 13 * 1); }
.grid-col[data-col="2"]  { left: calc(100% / 13 * 2); }
.grid-col[data-col="3"]  { left: calc(100% / 13 * 3); }
.grid-col[data-col="4"]  { left: calc(100% / 13 * 4); }
.grid-col[data-col="5"]  { left: calc(100% / 13 * 5); }
.grid-col[data-col="6"]  { left: calc(100% / 13 * 6); }
.grid-col[data-col="7"]  { left: calc(100% / 13 * 7); }
.grid-col[data-col="8"]  { left: calc(100% / 13 * 8); }
.grid-col[data-col="9"]  { left: calc(100% / 13 * 9); }
.grid-col[data-col="10"] { left: calc(100% / 13 * 10); }
.grid-col[data-col="11"] { left: calc(100% / 13 * 11); }
.grid-col[data-col="12"] { left: calc(100% / 13 * 12); }
.grid-col[data-col="13"] { left: calc(100% / 13 * 13); }

.grid-row {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        var(--reef-magenta) 0px,
        var(--reef-magenta) 1px,
        transparent 1px,
        transparent 5px
    );
    opacity: 0.06;
    transition: opacity 200ms ease;
}

.grid-row.highlight {
    opacity: 0.2;
}

.grid-row[data-row="1"] { top: calc(100% / 9 * 1); }
.grid-row[data-row="2"] { top: calc(100% / 9 * 2); }
.grid-row[data-row="3"] { top: calc(100% / 9 * 3); }
.grid-row[data-row="4"] { top: calc(100% / 9 * 4); }
.grid-row[data-row="5"] { top: calc(100% / 9 * 5); }
.grid-row[data-row="6"] { top: calc(100% / 9 * 6); }
.grid-row[data-row="7"] { top: calc(100% / 9 * 7); }
.grid-row[data-row="8"] { top: calc(100% / 9 * 8); }
.grid-row[data-row="9"] { top: calc(100% / 9 * 9); }

/* --- Sections --- */
.section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
}

.section--void {
    background: var(--void-indigo);
}

.section--trench {
    background: var(--trench-blue);
}

.section--void::after,
.section--trench::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 55% 50%, rgba(184, 77, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* --- Section Grid (Z-Pattern) --- */
.section-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    padding: 2vh 3vw;
    z-index: 10;
}

.z1 {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    display: flex;
    align-items: flex-start;
    padding-top: 2vh;
}

.z2 {
    grid-column: 7 / 13;
    grid-row: 1 / 4;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    padding-top: 2vh;
}

.z3 {
    grid-column: 3 / 11;
    grid-row: 3 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.z4 {
    grid-column: 6 / 13;
    grid-row: 6 / 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    padding-bottom: 2vh;
}

/* --- Typography --- */
.telemetry-bar {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    letter-spacing: 0.12em;
    color: var(--bio-cyan);
    opacity: 0;
}

.telemetry-bar.visible {
    opacity: 0.9;
}

.section-headline {
    font-family: 'EB Garamond', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.03em;
    color: var(--abyss-white);
    line-height: 1.1;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.section-headline.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-body {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.72;
    color: rgba(240, 244, 255, 0.85);
    max-width: 45ch;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.section-body.visible {
    opacity: 1;
    transform: translateY(0);
}

.axis-label {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(0.6rem, 0.9vw, 0.8rem);
    letter-spacing: 0.12em;
    color: var(--bio-cyan);
    opacity: 0.7;
}

/* --- Hero Section --- */
#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.sonar-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--bio-cyan);
    opacity: 0.4;
    transform: translateY(-50%);
    z-index: 11;
}

.sonar-line.animate {
    animation: sonarDraw 1200ms ease-out forwards;
}

@keyframes sonarDraw {
    from { width: 0; }
    to { width: 100%; }
}

.sonar-line.fade-out {
    transition: opacity 800ms ease;
    opacity: 0;
}

.hero-title {
    position: relative;
    z-index: 12;
    text-align: center;
    opacity: 0;
}

.hero-title.visible {
    opacity: 1;
}

.hero-title__top,
.hero-title__bottom {
    font-family: 'EB Garamond', serif;
    font-weight: 800;
    font-size: clamp(4rem, 12vw, 9rem);
    letter-spacing: 0.06em;
    line-height: 1;
}

.hero-title__top {
    color: var(--abyss-white);
}

.hero-title__bottom {
    color: var(--reef-magenta);
}

.hero-title__top .char,
.hero-title__bottom .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 150ms ease;
}

.hero-title__top .char.visible,
.hero-title__bottom .char.visible {
    opacity: 1;
}

.hero-telemetry {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(0.6rem, 1vw, 0.85rem);
    letter-spacing: 0.12em;
    color: var(--bio-cyan);
    opacity: 0;
    margin-top: 2rem;
    z-index: 12;
    transition: opacity 600ms ease;
}

.hero-telemetry.visible {
    opacity: 0.5;
}

/* --- Hero Orbital --- */
.hero-orbital {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 500px);
    height: min(60vw, 500px);
    opacity: 0;
    transition: opacity 800ms ease;
    z-index: 8;
}

.hero-orbital.visible {
    opacity: 1;
}

.orbital-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--bio-cyan);
    border-radius: 50% / 20%;
    transform-origin: center center;
}

.orbital-ring[data-ring="1"] {
    width: 20%;
    height: 20%;
    margin-left: -10%;
    margin-top: -10%;
    opacity: 0.9;
    animation: orbit 30s linear infinite;
}

.orbital-ring[data-ring="2"] {
    width: 36%;
    height: 36%;
    margin-left: -18%;
    margin-top: -18%;
    opacity: 0.7;
    animation: orbit 50s linear infinite reverse;
}

.orbital-ring[data-ring="3"] {
    width: 52%;
    height: 52%;
    margin-left: -26%;
    margin-top: -26%;
    opacity: 0.5;
    animation: orbit 80s linear infinite;
}

.orbital-ring[data-ring="4"] {
    width: 70%;
    height: 70%;
    margin-left: -35%;
    margin-top: -35%;
    opacity: 0.3;
    animation: orbit 120s linear infinite reverse;
}

.orbital-ring[data-ring="5"] {
    width: 90%;
    height: 90%;
    margin-left: -45%;
    margin-top: -45%;
    opacity: 0.15;
    animation: orbit 180s linear infinite;
}

@keyframes orbit {
    to { transform: rotate(360deg); }
}

.orbital-planet {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reef-magenta);
    box-shadow: 0 0 12px var(--reef-magenta);
    top: 50%;
    left: 50%;
    transform-origin: center center;
}

.orbital-planet[data-ring="1"] {
    animation: orbitPlanet1 30s linear infinite;
}

.orbital-planet[data-ring="2"] {
    animation: orbitPlanet2 50s linear infinite reverse;
}

.orbital-planet[data-ring="3"] {
    animation: orbitPlanet3 80s linear infinite;
}

.orbital-planet[data-ring="4"] {
    animation: orbitPlanet4 120s linear infinite reverse;
}

.orbital-planet[data-ring="5"] {
    animation: orbitPlanet5 180s linear infinite;
}

@keyframes orbitPlanet1 {
    from { transform: rotate(0deg) translateX(calc(min(60vw, 500px) * 0.1)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(min(60vw, 500px) * 0.1)) rotate(-360deg); }
}

@keyframes orbitPlanet2 {
    from { transform: rotate(0deg) translateX(calc(min(60vw, 500px) * 0.18)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(min(60vw, 500px) * 0.18)) rotate(-360deg); }
}

@keyframes orbitPlanet3 {
    from { transform: rotate(0deg) translateX(calc(min(60vw, 500px) * 0.26)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(min(60vw, 500px) * 0.26)) rotate(-360deg); }
}

@keyframes orbitPlanet4 {
    from { transform: rotate(0deg) translateX(calc(min(60vw, 500px) * 0.35)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(min(60vw, 500px) * 0.35)) rotate(-360deg); }
}

@keyframes orbitPlanet5 {
    from { transform: rotate(0deg) translateX(calc(min(60vw, 500px) * 0.45)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(min(60vw, 500px) * 0.45)) rotate(-360deg); }
}

.orbital-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--solar-flare);
    box-shadow: 0 0 20px var(--solar-flare), 0 0 40px rgba(255, 182, 39, 0.3);
}

/* --- Scroll Indicator --- */
.scroll-indicator {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 12;
    animation: pulseChevron 2s ease-in-out infinite;
}

.scroll-indicator.visible {
    opacity: 1;
}

@keyframes pulseChevron {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* --- Data Viz Frame --- */
.dataviz-frame {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 400px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.dataviz-frame.visible {
    opacity: 1;
    transform: scale(1);
}

.dataviz-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(240, 244, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(240, 244, 255, 0.05) 1px, transparent 1px);
    background-size: 10% 10%;
    pointer-events: none;
}

/* --- Spectral Bar Chart --- */
.spectral-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 20px 30px;
}

.spectral-bar {
    flex: 1;
    max-width: 6px;
    min-width: 3px;
    height: 0;
    background: linear-gradient(to top, var(--plankton-green), var(--bio-cyan), var(--nebula-violet));
    border-radius: 1px 1px 0 0;
    transition: height 800ms ease-out;
    animation: breathe 3s ease-in-out infinite;
    animation-delay: calc(var(--delay) * 50ms);
}

.spectral-bar.active {
    height: var(--height);
}

@keyframes breathe {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.03); }
}

.dataviz-axis-x {
    position: absolute;
    bottom: 5px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
}

.dataviz-axis-y {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- Orbital Diagram (Section 2) --- */
.orbital-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px;
    margin: 0 auto;
}

.orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--bio-cyan);
    border-radius: 50%;
    transform-origin: center center;
}

.orbit-path[data-orbit="1"] {
    width: 20%;
    height: 20%;
    margin-left: -10%;
    margin-top: -10%;
    opacity: 0.9;
    animation: orbit 30s linear infinite;
}

.orbit-path[data-orbit="2"] {
    width: 36%;
    height: 36%;
    margin-left: -18%;
    margin-top: -18%;
    opacity: 0.7;
    animation: orbit 50s linear infinite;
}

.orbit-path[data-orbit="3"] {
    width: 52%;
    height: 52%;
    margin-left: -26%;
    margin-top: -26%;
    opacity: 0.5;
    animation: orbit 80s linear infinite;
}

.orbit-path[data-orbit="4"] {
    width: 70%;
    height: 70%;
    margin-left: -35%;
    margin-top: -35%;
    opacity: 0.3;
    animation: orbit 120s linear infinite;
}

.orbit-path[data-orbit="5"] {
    width: 90%;
    height: 90%;
    margin-left: -45%;
    margin-top: -45%;
    opacity: 0.15;
    animation: orbit 180s linear infinite;
}

.orbit-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reef-magenta);
    box-shadow: 0 0 12px var(--reef-magenta);
    top: 50%;
    left: 50%;
}

.orbit-dot[data-orbit="1"] { animation: orbitDot1 30s linear infinite; }
.orbit-dot[data-orbit="2"] { animation: orbitDot2 50s linear infinite; }
.orbit-dot[data-orbit="3"] { animation: orbitDot3 80s linear infinite; }
.orbit-dot[data-orbit="4"] { animation: orbitDot4 120s linear infinite; }
.orbit-dot[data-orbit="5"] { animation: orbitDot5 180s linear infinite; }

@keyframes orbitDot1 {
    from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes orbitDot2 {
    from { transform: rotate(72deg) translateX(72px) rotate(-72deg); }
    to   { transform: rotate(432deg) translateX(72px) rotate(-432deg); }
}

@keyframes orbitDot3 {
    from { transform: rotate(144deg) translateX(104px) rotate(-144deg); }
    to   { transform: rotate(504deg) translateX(104px) rotate(-504deg); }
}

@keyframes orbitDot4 {
    from { transform: rotate(216deg) translateX(140px) rotate(-216deg); }
    to   { transform: rotate(576deg) translateX(140px) rotate(-576deg); }
}

@keyframes orbitDot5 {
    from { transform: rotate(288deg) translateX(180px) rotate(-288deg); }
    to   { transform: rotate(648deg) translateX(180px) rotate(-648deg); }
}

.orbit-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--solar-flare);
    box-shadow: 0 0 20px var(--solar-flare), 0 0 40px rgba(255, 182, 39, 0.3);
}

.orbit-labels {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
}

.orbit-label {
    font-size: clamp(0.55rem, 0.8vw, 0.7rem);
}

/* --- Radar/Sonar Diagram --- */
.radar-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 350px;
    max-height: 350px;
    margin: 0 auto;
}

.radar-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--bio-cyan);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radar-circle--outer {
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.radar-circle--mid {
    width: 66%;
    height: 66%;
    opacity: 0.3;
}

.radar-circle--inner {
    width: 33%;
    height: 33%;
    opacity: 0.4;
}

.radar-sector {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform-origin: 0 0;
    opacity: 0.1;
    transition: opacity 400ms ease;
}

.radar-sector[data-sector="0"] { transform: rotate(0deg); background: linear-gradient(45deg, var(--bio-cyan) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="1"] { transform: rotate(45deg); background: linear-gradient(45deg, var(--nebula-violet) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="2"] { transform: rotate(90deg); background: linear-gradient(45deg, var(--bio-cyan) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="3"] { transform: rotate(135deg); background: linear-gradient(45deg, var(--reef-magenta) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="4"] { transform: rotate(180deg); background: linear-gradient(45deg, var(--bio-cyan) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="5"] { transform: rotate(225deg); background: linear-gradient(45deg, var(--plankton-green) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="6"] { transform: rotate(270deg); background: linear-gradient(45deg, var(--bio-cyan) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.radar-sector[data-sector="7"] { transform: rotate(315deg); background: linear-gradient(45deg, var(--nebula-violet) 0%, transparent 70%); clip-path: polygon(0 0, 100% 0, 0 100%); }

.radar-sector.active {
    opacity: 0.4;
}

.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background: linear-gradient(to right, var(--bio-cyan), transparent);
    transform-origin: 0 0;
    animation: radarSweep 4s linear infinite;
}

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

.radar-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--bio-cyan);
    box-shadow: 0 0 10px var(--bio-cyan);
}

.radar-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.radar-labels .axis-label {
    position: absolute;
}

/* --- Contour Map --- */
.contour-map {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 350px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contour-layer {
    position: absolute;
    border-radius: 42% 58% 35% 65% / 55% 38% 62% 45%;
    mix-blend-mode: screen;
    filter: blur(1px);
    transition: transform 600ms ease-out, opacity 600ms ease-out;
}

.contour-layer[data-layer="1"] {
    width: 95%;
    height: 90%;
    background: rgba(13, 27, 42, 0.2);
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.contour-layer[data-layer="2"] {
    width: 82%;
    height: 78%;
    background: rgba(184, 77, 255, 0.08);
    border: 1px solid rgba(184, 77, 255, 0.15);
}

.contour-layer[data-layer="3"] {
    width: 68%;
    height: 65%;
    background: rgba(0, 245, 255, 0.1);
    border: 1px solid rgba(0, 245, 255, 0.2);
}

.contour-layer[data-layer="4"] {
    width: 55%;
    height: 52%;
    background: rgba(184, 77, 255, 0.15);
    border: 1px solid rgba(184, 77, 255, 0.25);
}

.contour-layer[data-layer="5"] {
    width: 42%;
    height: 40%;
    background: rgba(255, 45, 123, 0.2);
    border: 1px solid rgba(255, 45, 123, 0.35);
}

.contour-layer[data-layer="6"] {
    width: 28%;
    height: 27%;
    background: rgba(255, 45, 123, 0.4);
    border: 1px solid rgba(255, 45, 123, 0.5);
}

.contour-layer[data-layer="7"] {
    width: 14%;
    height: 14%;
    background: rgba(255, 45, 123, 0.8);
    border: 1px solid rgba(255, 45, 123, 0.7);
    box-shadow: 0 0 30px rgba(255, 45, 123, 0.4);
}

.contour-layer.expanded {
    transform: scale(1);
}

.contour-labels {
    position: absolute;
    right: -10px;
    top: 10%;
    bottom: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

/* --- Status Dashboard --- */
.status-dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.status-ring {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.status-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.status-ring-bg {
    fill: none;
    stroke: rgba(240, 244, 255, 0.08);
    stroke-width: 4;
}

.status-ring-fill {
    fill: none;
    stroke: var(--bio-cyan);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 1.5s ease-out;
}

.status-ring-fill--secondary {
    stroke: var(--reef-magenta);
    stroke-dasharray: 439.82;
    stroke-dashoffset: 439.82;
}

.status-ring-fill--tertiary {
    stroke: var(--nebula-violet);
    stroke-dasharray: 314.16;
    stroke-dashoffset: 314.16;
}

.status-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.status-value {
    display: block;
    font-family: 'EB Garamond', serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--abyss-white);
    line-height: 1;
}

.status-label {
    display: block;
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--bio-cyan);
    opacity: 0.8;
    margin-top: 4px;
}

.status-metrics {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.status-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-metric-value {
    font-family: 'EB Garamond', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--abyss-white);
    letter-spacing: 0.05em;
}

.status-metric-value--positive {
    color: var(--plankton-green);
}

.status-metric-value--warning {
    color: var(--solar-flare);
}

.status-metric-label {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--bio-cyan);
    opacity: 0.6;
}

/* --- Navigation Indicator --- */
.nav-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--reef-magenta);
    margin-top: 1rem;
    animation: pulseNav 2s ease-in-out infinite;
}

.nav-indicator--final {
    background: var(--plankton-green);
    box-shadow: 0 0 12px var(--plankton-green);
}

@keyframes pulseNav {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .section-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto auto 1fr auto;
        padding: 2vh 4vw;
    }

    .z1 {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .z2 {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
        justify-content: flex-start;
    }

    .z3 {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .z4 {
        grid-column: 1 / -1;
        grid-row: 4;
        text-align: left;
        align-items: flex-start;
    }

    .section-body {
        max-width: none;
    }

    .status-dashboard {
        flex-direction: column;
        gap: 1.5rem;
    }

    .status-ring {
        width: 150px;
        height: 150px;
    }

    .orbit-labels {
        display: none;
    }

    .contour-labels {
        display: none;
    }
}