/* =============================================
   lower.quest - Deep-Sea Corporate / Frutiger Aero
   Palette:
     Abyss:        #0B1120
     Stratum:      #152238
     Vein:         #2E6FBF
     Frost:        #D4E3F5
     Marble Warm:  #E8DFD0
     Marble Cool:  #7A8FA6
     Glow:         #00A6ED
     Depth Shadow: #060B14
   ============================================= */

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

:root {
    --cursor-x: 50;
    --cursor-y: 50;
    --abyss: #0B1120;
    --stratum: #152238;
    --vein: #2E6FBF;
    --frost: #D4E3F5;
    --marble-warm: #E8DFD0;
    --marble-cool: #7A8FA6;
    --glow: #00A6ED;
    --depth-shadow: #060B14;
    --accent-label: #5B8FBE;
    --body-text: #B8C6DB;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--abyss);
    color: var(--body-text);
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.72;
    overflow-x: hidden;
    cursor: default;
}

/* ---- Cursor-Follow Light ---- */
#cursor-light {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(
        200px circle at calc(var(--cursor-x) * 1px) calc(var(--cursor-y) * 1px),
        rgba(232, 223, 208, 0.07) 0%,
        transparent 100%
    );
    transition: background 0.3s ease-out;
}

/* ---- Navigation Rail ---- */
#nav-rail {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 1000;
    padding: 16px 0;
}

.nav-label {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-label);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease, color 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.nav-label:hover,
.nav-label.active {
    opacity: 1;
    color: var(--glow);
}

/* ---- Strata / Sections ---- */
.stratum {
    position: relative;
    overflow: hidden;
}

.stratum--surface {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 64px 0 80px;
}

.stratum--first {
    min-height: 120vh;
    padding: 80px 64px 80px 80px;
    transform: scale(0.98);
}

.stratum--second {
    min-height: 140vh;
    padding: 80px 64px 80px 80px;
    transform: scale(0.96);
}

.stratum--deep {
    min-height: 120vh;
    padding: 80px 64px 80px 80px;
    transform: scale(0.94);
}

.stratum--bedrock {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 64px;
    background-color: var(--abyss);
}

/* ---- Marble Backgrounds ---- */
.marble-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.marble-bg--warm {
    background:
        radial-gradient(ellipse 600px 400px at 20% 30%, rgba(232, 223, 208, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 800px 300px at 70% 60%, rgba(232, 223, 208, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 400px 600px at 50% 80%, rgba(46, 111, 191, 0.06) 0%, transparent 70%),
        conic-gradient(from 45deg at 30% 40%, transparent 0%, rgba(232, 223, 208, 0.04) 10%, transparent 20%, rgba(46, 111, 191, 0.03) 35%, transparent 50%),
        linear-gradient(135deg, var(--stratum) 0%, var(--abyss) 100%);
    animation: marble-drift 60s linear infinite;
}

.marble-bg--mid {
    background:
        radial-gradient(ellipse 500px 350px at 40% 25%, rgba(232, 223, 208, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 700px 250px at 60% 55%, rgba(122, 143, 166, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 350px 500px at 25% 70%, rgba(46, 111, 191, 0.05) 0%, transparent 70%),
        conic-gradient(from 120deg at 60% 50%, transparent 0%, rgba(122, 143, 166, 0.04) 15%, transparent 25%, rgba(46, 111, 191, 0.03) 40%, transparent 55%),
        linear-gradient(160deg, #152238 0%, #0d1829 50%, var(--abyss) 100%);
    animation: marble-drift 60s linear infinite reverse;
}

.marble-bg--cool {
    background:
        radial-gradient(ellipse 450px 300px at 55% 35%, rgba(122, 143, 166, 0.09) 0%, transparent 70%),
        radial-gradient(ellipse 600px 200px at 30% 65%, rgba(46, 111, 191, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 300px 450px at 75% 20%, rgba(122, 143, 166, 0.05) 0%, transparent 70%),
        conic-gradient(from 200deg at 45% 55%, transparent 0%, rgba(46, 111, 191, 0.05) 12%, transparent 22%, rgba(122, 143, 166, 0.04) 38%, transparent 52%),
        linear-gradient(175deg, #111d30 0%, #0c1522 50%, var(--abyss) 100%);
    animation: marble-drift 60s linear infinite;
}

.marble-bg--deep {
    background:
        radial-gradient(ellipse 400px 250px at 65% 40%, rgba(122, 143, 166, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 550px 180px at 20% 70%, rgba(46, 111, 191, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 250px 400px at 80% 25%, rgba(232, 223, 208, 0.03) 0%, transparent 70%),
        conic-gradient(from 280deg at 50% 60%, transparent 0%, rgba(46, 111, 191, 0.04) 10%, transparent 20%, rgba(122, 143, 166, 0.03) 35%, transparent 50%),
        linear-gradient(190deg, #0e1826 0%, var(--abyss) 100%);
    animation: marble-drift 60s linear infinite reverse;
}

@keyframes marble-drift {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; }
    100% { background-position: 200px 200px, -150px 100px, 100px -200px, -200px 150px, 0px 0px; }
}

/* ---- Transition Zones ---- */
.transition-zone {
    height: 120px;
    position: relative;
    z-index: 1;
}

.transition-zone--1 {
    background: linear-gradient(
        180deg,
        var(--stratum) 0%,
        #111d30 40%,
        #0d1829 60%,
        #0d1829 100%
    );
}

.transition-zone--2 {
    background: linear-gradient(
        180deg,
        #0d1829 0%,
        #111d30 40%,
        #0e1826 60%,
        #0e1826 100%
    );
}

.transition-zone--3 {
    background: linear-gradient(
        180deg,
        #0e1826 0%,
        #0c1420 40%,
        #0b1120 60%,
        var(--abyss) 100%
    );
}

.transition-zone--4 {
    background: linear-gradient(
        180deg,
        var(--abyss) 0%,
        var(--abyss) 100%
    );
}

/* ---- Strata Lines (wavy SVG-style) ---- */
.strata-line--wavy {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 2;
    background: none;
    overflow: visible;
}

.strata-line--wavy::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        rgba(46, 111, 191, 0.3) 100px,
        transparent 200px,
        rgba(46, 111, 191, 0.3) 300px,
        transparent 400px
    );
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 4'%3E%3Cpath d='M0,2 Q50,0 100,2 Q150,4 200,2 Q250,0 300,2 Q350,4 400,2' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 4'%3E%3Cpath d='M0,2 Q50,0 100,2 Q150,4 200,2 Q250,0 300,2 Q350,4 400,2' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-size: 400px 4px;
    -webkit-mask-size: 400px 4px;
}

/* ---- Strata Dividers inside panels ---- */
.strata-divider {
    width: 100%;
    height: 1px;
    background: rgba(46, 111, 191, 0.2);
    margin: 24px 0;
    position: relative;
}

.strata-divider::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: radial-gradient(ellipse at center, rgba(46, 111, 191, 0.15) 0%, transparent 70%);
}

/* ---- Typography ---- */
.title-main {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: clamp(1.8rem, 4.5vw, 3.6rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--frost);
    text-shadow: 1px 1px 4px rgba(232, 223, 208, 0.15), 0 0 20px rgba(46, 111, 191, 0.1);
    position: relative;
    z-index: 5;
    margin-bottom: 24px;
}

.surface-tagline {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    color: var(--body-text);
    max-width: 520px;
    position: relative;
    z-index: 5;
    line-height: 1.72;
}

.heading-stratum {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--frost);
    text-shadow: 1px 1px 3px rgba(232, 223, 208, 0.12);
    margin-bottom: 20px;
}

.heading-stratum--small {
    font-size: clamp(1rem, 2vw, 1.4rem);
}

.heading-core {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--frost);
    text-shadow: 1px 1px 4px rgba(232, 223, 208, 0.12);
    line-height: 1.4;
    margin-bottom: 16px;
}

.heading-accent {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-label);
    margin-bottom: 12px;
}

.core-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.72;
    color: var(--body-text);
    max-width: 780px;
}

.deep-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.68;
    color: var(--body-text);
}

.vertical-word {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-label);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    opacity: 0.6;
}

.vertical-word--small {
    font-size: 2.5rem;
}

/* ---- Glass Panels ---- */
.glass-panel {
    background: rgba(21, 34, 56, 0.6);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(46, 111, 191, 0.25);
    border-radius: 4px;
    padding: 40px;
    position: relative;
    z-index: 5;
    box-shadow:
        inset 0 0 40px rgba(0, 166, 237, 0.05),
        0 8px 32px rgba(6, 11, 20, 0.6),
        0 2px 8px rgba(6, 11, 20, 0.4);
    transition: box-shadow 0.4s ease;
}

.glass-panel p {
    margin-bottom: 16px;
}

.glass-panel p:last-child {
    margin-bottom: 0;
}

/* Panel reveal animation */
.panel-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.panel-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Grid Layouts ---- */
.stratum-grid {
    display: grid;
    grid-template-columns: 60% 35%;
    gap: 32px;
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin-bottom: 40px;
}

.stratum-grid--inverted {
    grid-template-columns: 35% 60%;
}

.glass-panel--left {
    /* left, wider panel */
}

.glass-panel--right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.glass-panel--right-deep {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.glass-panel--left-deep {
    /* right-heavy inverted panel */
}

.glass-panel--full {
    max-width: 900px;
    margin: 0 auto;
}

.glass-panel--compact {
    padding: 32px;
}

.full-panel-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.deep-secondary {
    margin-top: 40px;
}

/* ---- Surface Content Positioning ---- */
.surface-content {
    position: relative;
    z-index: 5;
    margin-top: 33vh;
}

/* ---- Chevron Pulse ---- */
.chevron-group {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 60px 0 40px;
}

.chevron-icon {
    animation: chevron-pulse 4s ease-in-out infinite;
}

@keyframes chevron-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* ---- Bedrock ---- */
.bedrock-content {
    max-width: 680px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.bedrock-statement {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: -0.02em;
    color: var(--frost);
    text-shadow: 0 0 30px rgba(46, 111, 191, 0.15);
    line-height: 1.6;
}

.bedrock-rule {
    width: 200px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(46, 111, 191, 0.4) 30%,
        rgba(46, 111, 191, 0.4) 70%,
        transparent 100%
    );
    margin-top: 60px;
    opacity: 1;
    animation: rule-fade 6s ease-in-out infinite;
}

@keyframes rule-fade {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #nav-rail {
        display: none;
    }

    .stratum--surface {
        padding: 0 24px;
    }

    .stratum--first,
    .stratum--second,
    .stratum--deep {
        padding: 48px 24px;
        transform: none;
    }

    .stratum--bedrock {
        padding: 48px 24px;
    }

    .stratum-grid,
    .stratum-grid--inverted {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .glass-panel {
        padding: 24px;
    }

    .glass-panel--right,
    .glass-panel--right-deep {
        min-height: 120px;
    }

    .vertical-word {
        font-size: 2.5rem;
        writing-mode: horizontal-tb;
    }

    .vertical-word--small {
        font-size: 1.8rem;
    }

    .surface-content {
        margin-top: 25vh;
    }

    .full-panel-wrapper {
        padding: 0;
    }

    .transition-zone {
        height: 80px;
    }
}

@media (max-width: 480px) {
    .title-main {
        font-size: clamp(1.4rem, 8vw, 2rem);
    }

    .heading-core {
        font-size: clamp(1rem, 5vw, 1.4rem);
    }
}