/* ============================================
   gabs.day - Ocean-Deep Retro-Futuristic
   Submarine Research Station Aesthetic
   ============================================ */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #0B1A2A;
    color: #D4E8F0;
    font-family: 'Lora', serif;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* --- Watercolor Paper Texture Overlay --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    mix-blend-mode: soft-light;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23D4E8F0' opacity='0.3'/%3E%3Ccircle cx='120' cy='30' r='0.8' fill='%23D4E8F0' opacity='0.2'/%3E%3Ccircle cx='80' cy='140' r='1.2' fill='%23D4E8F0' opacity='0.25'/%3E%3Ccircle cx='170' cy='90' r='0.7' fill='%23D4E8F0' opacity='0.2'/%3E%3Ccircle cx='50' cy='180' r='1' fill='%23D4E8F0' opacity='0.15'/%3E%3Ccircle cx='150' cy='160' r='0.9' fill='%23D4E8F0' opacity='0.2'/%3E%3Cline x1='10' y1='100' x2='18' y2='102' stroke='%23D4E8F0' stroke-width='0.5' opacity='0.15'/%3E%3Cline x1='90' y1='70' x2='96' y2='68' stroke='%23D4E8F0' stroke-width='0.5' opacity='0.12'/%3E%3Cline x1='160' y1='130' x2='165' y2='133' stroke='%23D4E8F0' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* --- Palette Reference (all DESIGN.md colors) ---
   #0B1A2A - Abyssal Ink (primary bg)
   #0F2A3D - Hadal Blue (secondary bg)
   #142E4A - Trench Indigo (terrain deep)
   #1A4A5C - Bathyal Teal (terrain mid)
   #2A6B7C - Pelagic Cerulean (terrain near)
   #4DA88A - Bioluminescent Green (accent)
   #A8D8EA - Phosphor Cyan (display type)
   #D4E8F0 - Pale Ice (body text)
   #C47A8A - Cnidarian Rose (warm accent)
--- */

/* --- Background Terrain Layer --- */
#terrain-layer {
    position: fixed;
    top: 0;
    left: -50vw;
    width: 200vw;
    height: 600vh;
    z-index: 10;
    pointer-events: none;
    will-change: transform;
    background-color: #0B1A2A;
}

#terrain-svg {
    width: 100%;
    height: 100%;
}

/* --- Foreground Instrument Layer --- */
#instrument-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 30;
    pointer-events: none;
}

#wordmark {
    position: absolute;
    top: 28px;
    left: 32px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4DA88A;
    pointer-events: auto;
}

#depth-counter {
    position: absolute;
    top: 28px;
    right: 32px;
    pointer-events: auto;
}

.depth-bezel {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4DA88A;
    padding: 6px 14px;
    border: 1px solid rgba(77, 168, 138, 0.3);
    border-radius: 8px;
    box-shadow: inset 0 0 12px rgba(77, 168, 138, 0.05);
    transition: opacity 50ms ease;
}

#depth-value {
    display: inline-block;
    min-width: 3.2em;
    text-align: right;
}

/* --- Navigation Pips --- */
#nav-pips {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto;
}

.pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(77, 168, 138, 0.4);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.pip.active {
    background-color: #4DA88A;
    box-shadow: 0 0 8px rgba(77, 168, 138, 0.4);
}

.pip:hover {
    background-color: #C47A8A;
    box-shadow: 0 0 6px rgba(196, 122, 138, 0.3);
}

/* --- Content Layer --- */
#content-layer {
    position: relative;
    z-index: 20;
}

/* --- Breathing Gaps (60vh between sections) --- */
.breathing-gap {
    height: 60vh;
    position: relative;
}

/* --- Observation Stations --- */
.observation-station {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    position: relative;
}

.station-inner {
    max-width: 720px;
    width: 100%;
    text-align: center;
    padding: 40px;
}

/* --- Station Number Label --- */
.station-number {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4DA88A;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition: none;
}

.station-number.animate-in {
    animation: fadeSlideUp 0.5s ease forwards;
}

/* --- Station Headlines --- */
.station-headline {
    font-family: 'Anybody', sans-serif;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A8D8EA;
    margin-bottom: 32px;
    line-height: 1.1;
    overflow: hidden;
}

.station-headline .char {
    display: inline-block;
    opacity: 0;
}

.station-headline .char.animate-in {
    animation: charFadeIn 0.1s ease forwards;
}

.station-headline .char-space {
    display: inline-block;
    width: 0.3em;
}

/* --- Station Prose --- */
.station-prose {
    font-family: 'Lora', serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #D4E8F0;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(4px);
    transition: none;
}

.station-prose.animate-in {
    animation: fadeSlideUpSlow 0.6s ease forwards;
}

/* --- Station Vignettes --- */
.station-vignette {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 32px;
    opacity: 0;
    transform: scale(0.98);
    transition: none;
}

.station-vignette.animate-in {
    animation: vignetteFadeIn 0.8s ease forwards;
}

.station-vignette svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Station Rule --- */
.station-rule {
    width: 0;
    height: 1px;
    background-color: rgba(77, 168, 138, 0.3);
    margin: 0 auto;
    max-width: 200px;
    transition: none;
}

.station-rule.animate-in {
    animation: ruleExpand 0.6s ease forwards;
}

/* --- Cross-fade between sections at 80% scroll progress --- */
.observation-station {
    transition: opacity 0.8s ease;
}

.observation-station.fading-out {
    opacity: 0.3;
}

/* --- Animations --- */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes charFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeSlideUpSlow {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vignetteFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1.0);
    }
}

@keyframes ruleExpand {
    from {
        width: 0;
    }
    to {
        width: 200px;
    }
}

/* --- Sonar sweep animation for Station 4 --- */
#sonar-sweep {
    transform-origin: 200px 175px;
    animation: sonarRotate 4s linear infinite;
}

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

/* --- Section-specific background tints --- */
#station-0 {
    background: radial-gradient(ellipse at center top, rgba(168, 216, 234, 0.04) 0%, transparent 60%);
}

#station-1 {
    background: radial-gradient(ellipse at center, rgba(42, 107, 124, 0.03) 0%, transparent 70%);
}

#station-2 {
    background: radial-gradient(ellipse at center, rgba(196, 122, 138, 0.02) 0%, transparent 60%);
}

#station-3 {
    background: radial-gradient(ellipse at center, rgba(77, 168, 138, 0.03) 0%, transparent 65%);
}

#station-4 {
    background: linear-gradient(180deg, transparent 0%, rgba(15, 42, 61, 0.3) 50%, rgba(11, 26, 42, 0.5) 100%);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #wordmark {
        top: 16px;
        left: 16px;
        font-size: 12px;
    }

    #depth-counter {
        top: 16px;
        right: 16px;
    }

    .depth-bezel {
        font-size: 0.6rem;
        padding: 4px 10px;
    }

    #nav-pips {
        right: 16px;
        gap: 12px;
    }

    .station-inner {
        padding: 20px;
    }

    .station-headline {
        letter-spacing: 0.04em;
    }

    .station-vignette {
        max-width: 300px;
    }

    .breathing-gap {
        height: 40vh;
    }
}

@media (max-width: 480px) {
    .station-headline {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    .station-prose {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .breathing-gap {
        height: 30vh;
    }
}