/* =========================================================
   sora.quest — A vertical journey from ocean to cosmos
   Palette
     #0a2a4a  Ocean (deep ocean blue)
     #4a8ab8  Sky   (daytime sky)
     #e8a060  Horizon (golden horizon line)
     #050510  Space (deep space)
     #0a1a3a  Twilight (high atmosphere)
     #ffffff  Star (bright text / stars)
     #e0e8f0  Cloud (wispy elements)
   Typography
     Josefin Sans  — display
     Lato          — body
     Space Mono    — data/HUD
   ========================================================= */

:root {
    --c-ocean:    #0a2a4a;
    --c-sky:      #4a8ab8;
    --c-horizon:  #e8a060;
    --c-space:    #050510;
    --c-twilight: #0a1a3a;
    --c-star:     #ffffff;
    --c-cloud:    #e0e8f0;

    --font-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;
    --font-data:    "Space Mono", "SFMono-Regular", Consolas, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--c-cloud);
    background: var(--c-space);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* The journey is read top -> bottom: deep space (top) -> ocean (bottom).
   Scrolling DOWN therefore feels like descending from the cosmos toward the sea.
   To honor the design's "ascend by scrolling" feeling, we instead build the
   gradient so the START of the page is the OCEAN and the END is the COSMOS,
   matching the prose order of the chapters. */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background: linear-gradient(
        to bottom,
        var(--c-space)    0%,
        var(--c-twilight) 18%,
        var(--c-ocean)    32%,
        var(--c-sky)      52%,
        var(--c-horizon)  56%,
        var(--c-sky)      62%,
        var(--c-ocean)    100%
    );
    /* The fixed gradient becomes the "sky" we move past. */
    pointer-events: none;
}

/* Atmospheric vignette */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at 50% 0%,   rgba(5,5,16,0)   0%, rgba(5,5,16,0.55) 80%),
        radial-gradient(ellipse at 50% 100%, rgba(5,5,16,0)   0%, rgba(5,5,16,0.55) 80%);
    pointer-events: none;
}

/* =========================================================
   Atmospheric / parallax layers
   ========================================================= */

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    left: 0;
    right: 0;
    will-change: transform;
}

/* Star field — pure CSS via box-shadow technique. */
.layer-stars {
    top: -20vh;
    height: 220vh;
    background: transparent;
}

.layer-stars::before,
.layer-stars::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
}

.layer-stars::before {
    box-shadow:
        47vw 12vh   1px 0 rgba(255,255,255,0.85),
        12vw 28vh   0   0 rgba(255,255,255,0.65),
        82vw 7vh    1px 0 rgba(255,255,255,0.95),
        25vw 47vh   0   0 rgba(255,255,255,0.45),
        66vw 33vh   1px 0 rgba(255,255,255,0.75),
        91vw 59vh   0   0 rgba(255,255,255,0.55),
        4vw  72vh   1px 0 rgba(255,255,255,0.9),
        37vw 88vh   0   0 rgba(255,255,255,0.5),
        58vw 102vh  1px 0 rgba(255,255,255,0.85),
        72vw 115vh  0   0 rgba(255,255,255,0.6),
        18vw 128vh  1px 0 rgba(255,255,255,0.8),
        45vw 141vh  0   0 rgba(255,255,255,0.4),
        88vw 152vh  1px 0 rgba(255,255,255,0.95),
        9vw  165vh  0   0 rgba(255,255,255,0.55),
        62vw 178vh  1px 0 rgba(255,255,255,0.7),
        31vw 192vh  0   0 rgba(255,255,255,0.5),
        77vw 205vh  1px 0 rgba(255,255,255,0.85),
        53vw 22vh   0   0 rgba(255,255,255,0.4),
        14vw 55vh   1px 0 rgba(255,255,255,0.7),
        86vw 81vh   0   0 rgba(255,255,255,0.6),
        29vw 98vh   1px 0 rgba(255,255,255,0.85),
        69vw 124vh  0   0 rgba(255,255,255,0.45),
        41vw 148vh  1px 0 rgba(255,255,255,0.9),
        93vw 170vh  0   0 rgba(255,255,255,0.55),
        6vw  198vh  1px 0 rgba(255,255,255,0.8);
}

.layer-stars::after {
    box-shadow:
        20vw 5vh   2px 0 rgba(255,255,255,0.95),
        55vw 18vh  2px 0 rgba(255,255,255,0.85),
        78vw 41vh  2px 0 rgba(255,255,255,0.9),
        10vw 64vh  2px 0 rgba(255,255,255,0.8),
        38vw 80vh  2px 0 rgba(255,255,255,0.95),
        70vw 95vh  2px 0 rgba(255,255,255,0.7),
        24vw 112vh 2px 0 rgba(255,255,255,0.85),
        60vw 130vh 2px 0 rgba(255,255,255,0.95),
        85vw 158vh 2px 0 rgba(255,255,255,0.8),
        16vw 182vh 2px 0 rgba(255,255,255,0.9);
    animation: starTwinkle 4.2s ease-in-out infinite;
}

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

/* Cloud wisps — soft blurred ovals drifting across the sky band */
.layer-clouds {
    top: 30vh;
    height: 140vh;
}

.cloud {
    position: absolute;
    border-radius: 50%;
    background: rgba(224, 232, 240, 0.30);
    filter: blur(20px);
    will-change: transform;
}

.cloud-1 { top:  4vh; left:  -8vw; width: 38vw; height: 14vh; }
.cloud-2 { top: 22vh; left:  60vw; width: 46vw; height: 16vh; background: rgba(224,232,240,0.22); }
.cloud-3 { top: 48vh; left:  10vw; width: 30vw; height: 12vh; background: rgba(224,232,240,0.35); }
.cloud-4 { top: 70vh; left:  55vw; width: 40vw; height: 14vh; background: rgba(224,232,240,0.26); }
.cloud-5 { top: 92vh; left:  -5vw; width: 34vw; height: 12vh; background: rgba(224,232,240,0.30); }
.cloud-6 { top:118vh; left:  50vw; width: 44vw; height: 16vh; background: rgba(224,232,240,0.20); }

/* Ocean depth bubbles */
.layer-ocean {
    bottom: 0;
    height: 80vh;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(224,232,240,0.55), rgba(74,138,184,0.10) 70%);
    box-shadow: 0 0 12px rgba(224,232,240,0.18);
    will-change: transform;
}

.bubble-1 { left: 12vw; bottom:  6vh; width: 14px; height: 14px; }
.bubble-2 { left: 28vw; bottom: 22vh; width:  8px; height:  8px; }
.bubble-3 { left: 56vw; bottom: 38vh; width: 18px; height: 18px; }
.bubble-4 { left: 74vw; bottom: 14vh; width: 10px; height: 10px; }
.bubble-5 { left: 88vw; bottom: 30vh; width: 12px; height: 12px; }

/* The horizon line — appears between sky / horizon zones */
.horizon-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50vh;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(232,160,96,0) 0%,
        rgba(232,160,96,0.85) 20%,
        rgba(255,255,255,0.95) 50%,
        rgba(232,160,96,0.85) 80%,
        rgba(232,160,96,0) 100%
    );
    box-shadow: 0 0 24px rgba(232, 160, 96, 0.55);
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: transform, opacity;
}

.horizon-line.is-active { opacity: 1; }

/* =========================================================
   HUD (fixed altitude readout)
   ========================================================= */

.hud {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 50;
    color: var(--c-cloud);
    font-family: var(--font-data);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hud-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.92);
    text-transform: uppercase;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.05em;
}

.brand-mark    { color: var(--c-star); }
.brand-dot     { color: var(--c-horizon); font-size: 1.3em; line-height: 0; }
.brand-suffix  { color: rgba(255,255,255,0.55); font-size: 0.78em; letter-spacing: 0.42em; }

.hud-altitude {
    border-left: 1px solid rgba(255,255,255,0.25);
    padding: 0.2rem 0 0.2rem 0.9rem;
}

.hud-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.35rem;
}

.hud-value {
    font-family: var(--font-data);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--c-star);
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.hud-zone {
    font-size: 0.7rem;
    color: var(--c-horizon);
    letter-spacing: 0.18em;
    margin-bottom: 0.7rem;
    transition: color 0.6s ease;
}

.hud-bar {
    width: 12rem;
    height: 2px;
    background: rgba(255,255,255,0.15);
    overflow: hidden;
    position: relative;
}

.hud-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(
        to right,
        var(--c-ocean) 0%,
        var(--c-sky) 40%,
        var(--c-horizon) 60%,
        var(--c-star) 100%
    );
    transition: width 0.15s linear;
}

/* =========================================================
   Journey / chapters
   ========================================================= */

.journey {
    position: relative;
    z-index: 1;
}

.chapter {
    position: relative;
    min-height: 100vh;
    padding: 12vh 8vw 10vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.chapter-inner {
    position: relative;
    z-index: 2;
    max-width: 56rem;
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.chapter.is-visible .chapter-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Per-chapter tinted overlay so even when background gradient drifts,
   the chapter itself reads as a clear environmental band. */
.chapter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    opacity: 1;
}

.chapter-ocean::before   { background: linear-gradient(to bottom, rgba(10,42,74,0.0), rgba(10,42,74,0.55)); }
.chapter-sea::before     { background: linear-gradient(to bottom, rgba(10,42,74,0.10), rgba(74,138,184,0.10)); }
.chapter-clouds::before  { background: linear-gradient(to bottom, rgba(224,232,240,0.05), rgba(74,138,184,0.10)); }
.chapter-horizon::before { background: linear-gradient(to bottom, rgba(74,138,184,0.05), rgba(232,160,96,0.18)); }
.chapter-edge::before    { background: linear-gradient(to bottom, rgba(10,26,58,0.30), rgba(5,5,16,0.55)); }
.chapter-orbit::before   { background: linear-gradient(to bottom, rgba(5,5,16,0.55), rgba(5,5,16,0.65)); }
.chapter-cosmos::before  { background: linear-gradient(to bottom, rgba(5,5,16,0.70), rgba(5,5,16,0.92)); }

/* Chapter typography */
.chapter-meta {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 1.6rem;
}

.chapter-tag {
    color: var(--c-horizon);
    border: 1px solid rgba(232,160,96,0.55);
    padding: 0.3rem 0.7rem;
    border-radius: 2px;
}

.chapter-coord {
    color: rgba(255,255,255,0.7);
}

.chapter-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.2rem, 6.5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--c-star);
    margin-bottom: 1.6rem;
    text-shadow: 0 0 32px rgba(0,0,0,0.45);
}

.chapter-lede {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.75;
    color: rgba(232, 240, 248, 0.92);
    max-width: 38rem;
    margin-bottom: 2.4rem;
}

.chapter-lede em {
    font-style: italic;
    color: var(--c-horizon);
}

/* Chapter-specific colour accents */
.chapter-ocean   .chapter-lede em { color: #6ec7e8; }
.chapter-sea     .chapter-lede em { color: var(--c-cloud); }
.chapter-clouds  .chapter-lede em { color: var(--c-cloud); }
.chapter-horizon .chapter-lede em { color: var(--c-horizon); }
.chapter-edge    .chapter-lede em { color: var(--c-star); }
.chapter-orbit   .chapter-lede em { color: var(--c-star); }
.chapter-cosmos  .chapter-lede em { color: var(--c-horizon); }

/* Stat blocks */
.chapter-stat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 1.2rem;
    max-width: 42rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.55rem 1.1rem 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-data);
    font-size: 0.78rem;
}

.stat-label {
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

.stat-value {
    color: var(--c-star);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Milestone marker */
.milestone {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(232,160,96,0.55);
    border-radius: 2px;
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    color: var(--c-horizon);
    text-transform: uppercase;
    background: rgba(5,5,16,0.25);
    backdrop-filter: blur(2px);
}

.milestone-marker {
    color: var(--c-horizon);
    font-size: 0.9rem;
    line-height: 1;
}

/* Orbit grid */
.orbit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.18);
    max-width: 36rem;
    margin-bottom: 2.4rem;
}

.orbit-cell {
    background: rgba(5,5,16,0.6);
    padding: 1.6rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.orbit-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--c-star);
    letter-spacing: 0;
    line-height: 1;
}

.orbit-cap {
    font-family: var(--font-data);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* CTA */
.cosmos-cta {
    margin-bottom: 3rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.6rem;
    background: transparent;
    color: var(--c-star);
    border: 1px solid rgba(255,255,255,0.55);
    font-family: var(--font-data);
    font-size: 0.8rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.cta-button:hover {
    background: var(--c-horizon);
    border-color: var(--c-horizon);
    color: var(--c-space);
    transform: translateY(-2px);
}

.cta-glyph {
    display: inline-block;
    font-size: 1rem;
    transform: translateY(-1px);
}

.cosmos-signature {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    font-family: var(--font-data);
    font-size: 0.68rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.sig-divider { color: var(--c-horizon); }

/* =========================================================
   Milestone rail (right side)
   ========================================================= */

.milestone-rail {
    position: fixed;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 1.2rem 0.6rem 1.2rem 1.2rem;
    border-left: 1px solid rgba(255,255,255,0.12);
}

.rail-dot {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-data);
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

.rail-tick {
    width: 18px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    transition: width 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
}

.rail-name {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.rail-dot:hover {
    color: var(--c-star);
}

.rail-dot:hover .rail-tick {
    width: 28px;
    background: var(--c-horizon);
}

.rail-dot:hover .rail-name {
    opacity: 1;
    transform: translateX(0);
}

.rail-dot.is-active {
    color: var(--c-star);
}

.rail-dot.is-active .rail-tick {
    width: 36px;
    background: var(--c-horizon);
    box-shadow: 0 0 12px rgba(232, 160, 96, 0.7);
}

.rail-dot.is-active .rail-name {
    opacity: 1;
    transform: translateX(0);
    color: var(--c-horizon);
}

/* =========================================================
   Scroll hint
   ========================================================= */

.scroll-hint {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-data);
    font-size: 0.68rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.scroll-hint.is-hidden { opacity: 0; }

.hint-line {
    width: 1px;
    height: 38px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
    animation: hintPulse 2.6s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { transform: scaleY(1);   opacity: 0.7; }
    50%      { transform: scaleY(1.6); opacity: 1;   }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {
    .hud {
        top: 1rem;
        left: 1rem;
        font-size: 0.7rem;
    }

    .hud-brand { font-size: 0.95rem; letter-spacing: 0.24em; margin-bottom: 0.9rem; }
    .hud-value { font-size: 1.1rem; }
    .hud-bar   { width: 8rem; }

    .milestone-rail { right: 0.6rem; gap: 1rem; padding: 0.8rem 0.4rem 0.8rem 0.7rem; }
    .rail-name { display: none; }

    .chapter { padding: 14vh 6vw 10vh; }
    .chapter-meta { flex-wrap: wrap; gap: 0.6rem; }

    .orbit-grid { grid-template-columns: 1fr; }

    .scroll-hint { bottom: 1rem; letter-spacing: 0.32em; }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .parallax-layer,
    .cloud,
    .bubble {
        transform: none !important;
    }

    .layer-stars::after,
    .hint-line {
        animation: none;
    }

    .chapter-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }
}