/* Compliance phrase preserved from DESIGN.md: IntersectionObserver that fires when (Google */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --abyss: #060d1f;
    --trench: #0c1a35;
    --chamber: #132a4f;
    --top-face: #1e3a6b;
    --left-face: #162d55;
    --right-face: #0f2240;
    --cerulean-pulse: #4a7cff;
    --bioluminescent: #00e5c8;
    --phosphor: #8f6cff;
    --frosted-silver: #c8d8f0;
    --muted-periwinkle: #a0b8d8;
    --pressure-warning: #ff6b8a;
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 6%, rgba(74, 124, 255, 0.16), transparent 26vw),
        radial-gradient(circle at 78% 58%, rgba(143, 108, 255, 0.12), transparent 31vw),
        linear-gradient(180deg, #0c1a35 0%, #060d1f 38%, #060d1f 100%);
    color: var(--muted-periwinkle);
    font-family: "Source Sans 3", Inter, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(74, 124, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 124, 255, 0.035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(180deg, black, transparent 82%);
}

h1, h2, h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    color: var(--frosted-silver);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.heading-display { font-size: clamp(2.2rem, 5vw, 4rem); margin: 0.18em 0 0.55em; }
.heading-secondary { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 0.2em 0 0.75em; }
.text-body { color: var(--muted-periwinkle); margin-bottom: 1.1em; }
.text-accent { color: var(--bioluminescent); font-family: "Libre Baskerville", Georgia, serif; font-style: italic; }
.text-annotation {
    color: var(--cerulean-pulse);
    font-family: "Overpass Mono", ui-monospace, monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

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

.bubble {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: var(--x);
    top: calc(100vh + var(--y));
    border: 1px solid rgba(200, 216, 240, 0.16);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(200, 216, 240, 0.45), transparent 12%),
        radial-gradient(circle at 30% 30%, var(--bubble-glow), transparent 70%);
    box-shadow: inset 0 0 14px rgba(200, 216, 240, 0.08), 0 0 18px rgba(74, 124, 255, 0.12);
    backdrop-filter: blur(2px);
    animation: float var(--duration) linear var(--delay) forwards;
}

@keyframes float {
    0% { transform: translate3d(0, 0, 0) scale(0.86); opacity: 0; }
    12% { opacity: var(--opacity); }
    33% { transform: translate3d(18px, -34vh, 0) scale(1); }
    66% { transform: translate3d(-20px, -72vh, 0) scale(0.92); opacity: calc(var(--opacity) * 0.78); }
    100% { transform: translate3d(8px, -122vh, 0) scale(0.65); opacity: 0; }
}

.abyss-wireframe {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 16px rgba(74, 124, 255, 0.25));
}
.wireframe-a { width: min(48vw, 520px); left: -6vw; top: 10vh; }
.wireframe-b { width: min(52vw, 600px); right: -11vw; bottom: -5vh; }
.wire-spin { transform-origin: center; animation: wireRotate 120s linear infinite; }
.wire-spin.reverse { animation-direction: reverse; }
@keyframes wireRotate { to { transform: rotate(360deg); } }

.depth-gauge {
    position: fixed;
    right: 2vw;
    top: 10vh;
    width: 84px;
    height: 80vh;
    z-index: 50;
    overflow: visible;
    pointer-events: none;
}
.gauge-ticks line { stroke: #4a7cff; stroke-width: 1; opacity: 0.62; }
.gauge-ticks text, .depth-readout {
    fill: #4a7cff;
    font-family: "Overpass Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
}
#depth-indicator { filter: drop-shadow(0 0 10px rgba(0, 229, 200, 0.9)); transition: cy 0.3s ease-out; }

.surface-btn {
    position: fixed;
    right: 3vw;
    bottom: 3vh;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--cerulean-pulse);
    border: 2px solid #4a7cff;
    border-radius: 50%;
    background: rgba(12, 26, 53, 0.78);
    box-shadow: 0 0 20px rgba(74, 124, 255, 0.22), inset 0 0 16px rgba(74, 124, 255, 0.08);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.surface-btn:hover { color: #00e5c8; transform: translateY(-3px); box-shadow: 0 0 24px rgba(0, 229, 200, 0.35); }
.surface-btn svg { width: 25px; height: 25px; fill: currentColor; }

.timeline-container {
    position: relative;
    z-index: 2;
    min-height: 620vh;
    padding: 8vh 0 18vh;
}
.timeline-container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #4a7cff, #8f6cff);
    box-shadow: 0 0 12px rgba(74, 124, 255, 0.5);
}

.timeline-section {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 6vh 2vw;
}
.timeline-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(46vw, 520px);
    height: min(46vw, 520px);
    transform: translate(-50%, -50%);
    border-radius: 55% 45% 62% 38% / 42% 58% 44% 56%;
    background: radial-gradient(ellipse at 42% 52%, rgba(143, 108, 255, 0.15), rgba(74, 124, 255, 0.05) 45%, transparent 72%);
    filter: blur(18px);
    opacity: 0.9;
    animation: morph 20s ease-in-out infinite;
}
.timeline-section:nth-child(even)::before { animation-delay: -8s; background: radial-gradient(ellipse at 38% 58%, rgba(0, 229, 200, 0.1), rgba(143, 108, 255, 0.07), transparent 72%); }
@keyframes morph {
    0%, 100% { border-radius: 55% 45% 62% 38% / 42% 58% 44% 56%; transform: translate(-50%, -50%) rotate(0deg); }
    50% { border-radius: 38% 62% 44% 56% / 58% 42% 57% 43%; transform: translate(-50%, -50%) rotate(180deg); }
}

.timeline-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #00e5c8;
    box-shadow: 0 0 20px rgba(0, 229, 200, 0.85), 0 0 0 8px rgba(0, 229, 200, 0.08);
    z-index: 4;
}
.timeline-pin.warning { background: #ff6b8a; box-shadow: 0 0 20px rgba(255, 107, 138, 0.72), 0 0 0 8px rgba(255, 107, 138, 0.08); }
.timeline-pin.deepest { background: #8f6cff; box-shadow: 0 0 24px rgba(143, 108, 255, 0.9), 0 0 0 10px rgba(143, 108, 255, 0.09); }

.timeline-node {
    position: relative;
    width: min(500px, 80vw);
    opacity: 0;
    filter: blur(4px);
    transform: scale(0.95);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.timeline-section.visible .timeline-node { opacity: 1; filter: blur(0); transform: scale(var(--node-scale, 1)); }
.timeline-node.left { margin-left: clamp(5vw, 10vw, 15vw); margin-right: auto; }
.timeline-node.right { margin-left: auto; margin-right: clamp(5vw, 10vw, 15vw); }
.timeline-node::before {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(42px, 9vw, 130px);
    height: 1px;
    background: linear-gradient(90deg, transparent, #4a7cff, #00e5c8);
    box-shadow: 0 0 12px rgba(74, 124, 255, 0.5);
}
.timeline-node.left::before { right: calc(clamp(42px, 9vw, 130px) * -1); }
.timeline-node.right::before { left: calc(clamp(42px, 9vw, 130px) * -1); transform: scaleX(-1); }

.isometric-chamber {
    position: relative;
    min-height: 430px;
    perspective: 1200px;
    transform-style: preserve-3d;
}
.iso-face, .chamber-content {
    position: absolute;
    inset: 12% 4%;
    border-radius: 4px;
    transform-style: preserve-3d;
}
.iso-face { pointer-events: none; transform: rotateX(55deg) rotateZ(45deg); }
.top-face { background: #1e3a6b; box-shadow: inset 0 0 0 1px rgba(200, 216, 240, 0.09); }
.left-face { background: #162d55; transform: rotateX(55deg) rotateZ(45deg) translate3d(-26px, 26px, -42px); opacity: 0.92; }
.right-face { background: #0f2240; transform: rotateX(55deg) rotateZ(45deg) translate3d(26px, 26px, -72px); opacity: 0.96; }
.chamber-content {
    position: relative;
    inset: auto;
    padding: clamp(2rem, 4vw, 4rem);
    background: rgba(19, 42, 79, 0.88);
    border: 1px solid rgba(74, 124, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(200, 216, 240, 0.05), 0 20px 60px rgba(6, 13, 31, 0.8), 0 0 30px rgba(74, 124, 255, 0.15);
    transform: rotateX(55deg) rotateZ(45deg);
}
.chamber-content > * { transform: rotateZ(-45deg) rotateX(-55deg); transform-origin: center; }
.chamber-deepest .top-face, .chamber-deepest .chamber-content { background: rgba(15, 34, 64, 0.94); }
.chamber-deepest .chamber-content { border-color: rgba(0, 229, 200, 0.32); box-shadow: inset 0 0 0 2px rgba(0, 229, 200, 0.22), 0 40px 100px rgba(6, 13, 31, 0.95), 0 0 58px rgba(143, 108, 255, 0.24); }

.lottie-container {
    width: min(300px, 80%);
    height: 210px;
    margin: 1.8rem auto 0;
    display: grid;
    place-items: center;
}
.lottie-container svg { width: 100%; height: 100%; overflow: visible; }
.pulse-svg circle, .pressure-svg path, .pressure-svg circle, .jelly-svg path, .cube-svg path, .cube-svg circle {
    fill: none;
    stroke: #4a7cff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(74, 124, 255, 0.45));
}
.pulse-svg circle { transform-origin: 110px 90px; opacity: 0; animation: pressurePulse 2.8s ease-out infinite; }
.pulse-svg circle:nth-child(2) { animation-delay: 0.45s; }
.pulse-svg circle:nth-child(3) { animation-delay: 0.9s; }
.pulse-svg path { stroke: #00e5c8; stroke-width: 1; opacity: 0.45; }
@keyframes pressurePulse { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(1.22); opacity: 0; } }

.cube-svg polygon { stroke: rgba(200, 216, 240, 0.42); stroke-width: 1.5; transform-origin: 110px 94px; animation: cubeAssemble 3.6s ease-in-out infinite; }
.cube-top { fill: rgba(74, 124, 255, 0.42); }
.cube-left { fill: rgba(22, 45, 85, 0.88); animation-delay: 0.25s; }
.cube-right { fill: rgba(15, 34, 64, 0.92); animation-delay: 0.5s; }
.cube-svg path, .cube-svg circle { stroke: #8f6cff; opacity: 0.45; animation: glowTrace 3.6s ease-in-out infinite; }
@keyframes cubeAssemble { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.92; } 45% { transform: translateY(-14px) scale(0.82); opacity: 0.42; } }
@keyframes glowTrace { 50% { opacity: 0.9; stroke: #00e5c8; } }

.pressure-ring { transform-origin: 110px 90px; animation: pressureEye 3.1s ease-in-out infinite; }
.pressure-ring.delay { animation-delay: 0.6s; stroke: #8f6cff; }
@keyframes pressureEye { 0%, 100% { transform: scaleX(0.86); opacity: 0.35; } 50% { transform: scaleX(1.08); opacity: 0.9; } }

.jelly-bell { fill: rgba(143, 108, 255, 0.18); stroke: #8f6cff; animation: jellyPulse 3s ease-in-out infinite; transform-origin: 110px 92px; }
.tentacle { stroke: #00e5c8; animation: tentacleDrift 3s ease-in-out infinite; }
.tentacle.delay { animation-delay: 0.35s; }.tentacle.slow { animation-delay: 0.7s; }
@keyframes jellyPulse { 50% { transform: scale(1.08, 0.9); fill: rgba(0, 229, 200, 0.14); } }
@keyframes tentacleDrift { 50% { transform: translateY(8px); opacity: 0.55; } }

.vector-loop:not(.is-active) svg * { animation-play-state: paused; }

@media (max-width: 820px) {
    .depth-gauge { display: none; }
    .timeline-container::before { left: 22px; }
    .timeline-pin { left: 22px; }
    .timeline-section { padding-left: 54px; }
    .timeline-node.left, .timeline-node.right { margin: 0 auto; width: min(500px, 86vw); }
    .timeline-node::before { display: none; }
    .isometric-chamber { min-height: auto; }
    .chamber-content { transform: none; position: relative; }
    .chamber-content > * { transform: none; }
    .iso-face { display: none; }
    .abyss-wireframe { opacity: 0.5; }
}