:root {
    --aero-pool-blue: #5FE6FF;
    --deep-glass-teal: #075E71;
    --fresh-system-green: #8BFF7A;
    --pearlescent-white: #F4FFFB;
    --chrome-shadow-navy: #06243D;
    --bubble-lavender: #B9B5FF;
    --citrus-highlight: #FFE45E;
    --soft-coral-alert: #FF7A8A;
    --specular-white: #FFFFFF;
    --title: "Exo 2", sans-serif;
    --body: "Nunito Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --mono-sparingly-for-buoy-IDs: 1;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    background: var(--chrome-shadow-navy);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--chrome-shadow-navy);
    font-family: var(--body);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 25% 10%, rgba(255, 255, 255, .96) 0 9%, transparent 28%),
        radial-gradient(circle at 80% 28%, rgba(185, 181, 255, .52) 0 10%, transparent 30%),
        linear-gradient(180deg, #F4FFFB 0%, #5FE6FF 34%, #075E71 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.22) 0 2px, transparent 3px 17px),
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.18) 48%, transparent 56% 100%);
    mix-blend-mode: soft-light;
    opacity: .75;
    z-index: 1;
    animation: causticSlide 16s linear infinite;
}

h1, h2 {
    font-family: var(--title);
    margin: 0;
    letter-spacing: -.045em;
    line-height: .92;
}

p { font-size: clamp(1rem, 1.9vw, 1.35rem); line-height: 1.55; margin: 1.2rem 0 0; }

button { font: inherit; }

.aqua-terminal { position: relative; z-index: 3; perspective: 1200px; }

.scene {
    position: relative;
    min-height: 100vh;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 5vw, 6rem);
    overflow: hidden;
}

.caustic-field {
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.55), transparent 18%),
        conic-gradient(from 110deg at 50% 50%, rgba(95,230,255,.15), rgba(255,228,94,.12), rgba(139,255,122,.12), rgba(185,181,255,.16), rgba(95,230,255,.15));
    filter: blur(18px) saturate(1.5);
    animation: fieldBreathe 9s ease-in-out infinite alternate;
}

.waterline-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28vh;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(244,255,251,.15) 70%, transparent);
    mask-image: radial-gradient(ellipse at 50% 0%, black 35%, transparent 82%);
}

.refracted-rail {
    position: fixed;
    right: clamp(1rem, 2.5vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(95,230,255,.16));
    border: 1px solid rgba(255,255,255,.68);
    box-shadow: inset 0 1px rgba(255,255,255,.92), 0 18px 42px rgba(6,36,61,.2);
    backdrop-filter: blur(16px);
}

.rail-dot {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.8);
    color: var(--deep-glass-teal);
    background: radial-gradient(circle at 30% 20%, #FFFFFF, rgba(95,230,255,.54) 42%, rgba(7,94,113,.28));
    box-shadow: inset -6px -9px 16px rgba(7,94,113,.18), inset 3px 3px 8px rgba(255,255,255,.9), 0 10px 20px rgba(6,36,61,.16);
    cursor: pointer;
    transition: transform .35s cubic-bezier(.2,1.5,.35,1), filter .35s;
}

.rail-dot span { font-family: var(--mono); font-size: .56rem; font-weight: 600; }
.rail-dot.active { transform: scale(1.22); filter: hue-rotate(12deg) saturate(1.3); }

.boot-capsule, .aero-tank, .glass-plaque, .surface-plaque {
    position: relative;
    border: 1px solid rgba(255,255,255,.72);
    background:
        linear-gradient(145deg, rgba(255,255,255,.58), rgba(244,255,251,.24) 28%, rgba(95,230,255,.22) 68%, rgba(7,94,113,.18)),
        radial-gradient(circle at 20% 8%, rgba(255,255,255,.95), transparent 20%);
    box-shadow: inset 0 1px 1px #FFFFFF, inset 0 -18px 48px rgba(7,94,113,.12), 0 34px 90px rgba(6,36,61,.24);
    backdrop-filter: blur(22px) saturate(1.35);
}

.chrome-rim::before {
    content: "";
    position: absolute;
    inset: .65rem;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.52);
    box-shadow: inset 0 0 18px rgba(255,255,255,.42);
    pointer-events: none;
}

.boot-capsule {
    width: min(76vw, 780px);
    min-height: 48vh;
    border-radius: 4rem;
    padding: clamp(2rem, 6vw, 5rem);
    text-align: center;
    transform: rotateX(8deg) rotateZ(-1.5deg);
    animation: capsuleInflate 1.8s cubic-bezier(.2,1.4,.24,1) both, panelBob 7s ease-in-out 1.9s infinite;
}

.boot-capsule h1 {
    font-size: clamp(4.4rem, 15vw, 12rem);
    color: rgba(6,36,61,.88);
    text-shadow: 0 2px #FFFFFF, 0 14px 32px rgba(7,94,113,.3), -10px 10px 0 rgba(95,230,255,.18);
}

.boot-readout {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2rem;
}

.boot-readout span, .buoy-label, .gel-tab {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
}

.boot-readout span, .gel-tab {
    border-radius: 999px;
    padding: .55rem .85rem;
    color: var(--deep-glass-teal);
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(95,230,255,.25));
    border: 1px solid rgba(255,255,255,.76);
    box-shadow: inset 0 1px #FFFFFF, 0 8px 18px rgba(6,36,61,.12);
}

.buoy-label { color: var(--deep-glass-teal); font-weight: 600; }

.sonar-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.48);
    width: 20vw;
    aspect-ratio: 1;
    animation: rippleReveal 4s ease-out infinite;
}

.ring-one { left: 12%; top: 18%; }
.ring-two { right: 16%; bottom: 14%; animation-delay: 1.4s; }

.fish-cursor {
    position: absolute;
    width: 72px;
    height: 28px;
    border-radius: 60% 45% 45% 60%;
    background: linear-gradient(90deg, rgba(255,255,255,.76), rgba(95,230,255,.62));
    box-shadow: inset 0 2px rgba(255,255,255,.9), 0 12px 30px rgba(6,36,61,.12);
    opacity: .72;
    animation: swim 16s linear infinite;
}
.fish-cursor::after { content: ""; position: absolute; right: -16px; top: 6px; border: 8px solid transparent; border-left-color: rgba(185,181,255,.68); }
.fish-a { left: -8%; top: 34%; }
.fish-b { left: -20%; bottom: 24%; animation-delay: 6s; transform: scale(.72); }

.aero-tank {
    width: min(86vw, 1050px);
    min-height: 66vh;
    border-radius: 4rem;
    padding: clamp(2rem, 5vw, 5rem);
    transform: rotateY(-8deg) rotateZ(1.5deg);
    animation: panelBob 8s ease-in-out infinite;
}
.aero-tank h2, .glass-plaque h2, .surface-plaque h2 { font-size: clamp(3rem, 8vw, 7.5rem); color: var(--chrome-shadow-navy); text-shadow: 0 2px #FFFFFF, 0 18px 40px rgba(7,94,113,.22); }
.directory-signs { display: flex; gap: 1rem; margin-top: 2.3rem; flex-wrap: wrap; }

.glass-plaque {
    border-radius: 2rem;
    padding: 1.5rem;
    min-width: 220px;
}
.glass-plaque strong { display: block; font-family: var(--title); font-size: 1.6rem; margin-top: .7rem; }
.glass-plaque small { display: block; margin-top: .4rem; font-size: .95rem; color: var(--deep-glass-teal); }
.tilted { transform: rotateZ(-4deg) translateY(10px); }
.tilted.reverse { transform: rotateZ(5deg) translateY(-6px); }

.tube-connector {
    position: absolute;
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(95,230,255,.25), rgba(255,255,255,.62));
    box-shadow: inset 0 2px rgba(255,255,255,.85), 0 10px 24px rgba(6,36,61,.16);
}
.tube-one { width: 46vw; right: -12vw; bottom: 20%; transform: rotate(-24deg); }
.tube-two { width: 38vw; left: -6vw; top: 24%; transform: rotate(18deg); }
.tube-three { width: 28vw; right: 8vw; bottom: 18%; transform: rotate(-10deg); }

.dock-icons { position: absolute; left: 8vw; bottom: 8vh; display: flex; gap: .7rem; }
.dock-icons i { width: 3rem; height: 3rem; border-radius: 1rem; background: radial-gradient(circle at 25% 15%, #FFFFFF, #5FE6FF 52%, #075E71); box-shadow: inset 0 1px #FFFFFF, 0 12px 26px rgba(6,36,61,.18); }

.packet-orbit { position: relative; min-height: 360px; margin-top: 2rem; }
.bubble-packet {
    position: absolute;
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 1;
    border-radius: 50%;
    font-family: var(--mono);
    color: var(--deep-glass-teal);
    background: radial-gradient(circle at 30% 22%, #FFFFFF 0 8%, rgba(255,255,255,.58) 9% 24%, rgba(95,230,255,.34) 45%, rgba(7,94,113,.18));
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: inset -14px -18px 32px rgba(7,94,113,.16), inset 8px 8px 18px rgba(255,255,255,.86), 0 24px 42px rgba(6,36,61,.16);
    animation: bubbleRise 7s ease-in-out infinite;
}
.bubble-packet::before { content: attr(data-label); position: absolute; bottom: -1.1rem; opacity: .42; filter: blur(2px); }
.bubble-packet.large { width: 168px; left: 8%; top: 20%; }
.bubble-packet:nth-child(2) { left: 34%; top: 4%; animation-delay: 1.3s; }
.bubble-packet:nth-child(3) { right: 16%; top: 23%; animation-delay: 2.1s; }
.bubble-packet:nth-child(4) { left: 24%; bottom: 2%; animation-delay: 3.2s; }
.bubble-packet:nth-child(5) { right: 30%; bottom: 7%; animation-delay: 4.1s; }
.coral { background: radial-gradient(circle at 30% 22%, #FFFFFF, rgba(255,122,138,.48), rgba(95,230,255,.24)); }
.lavender { background: radial-gradient(circle at 30% 22%, #FFFFFF, rgba(185,181,255,.55), rgba(95,230,255,.24)); }
.green { background: radial-gradient(circle at 30% 22%, #FFFFFF, rgba(139,255,122,.48), rgba(95,230,255,.24)); }

.current-ribbon {
    position: absolute;
    width: 120vw;
    height: 34vh;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(244,255,251,.18), rgba(95,230,255,.48), rgba(139,255,122,.18), rgba(255,255,255,.38));
    filter: blur(1px);
    transform: rotate(-18deg);
    box-shadow: inset 0 2px rgba(255,255,255,.7), 0 28px 90px rgba(6,36,61,.2);
    animation: ribbonFlow 10s ease-in-out infinite alternate;
}
.current-plaque { width: min(78vw, 880px); transform: rotateY(8deg) rotateZ(-2deg); }
.gel-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.reef-stack { position: absolute; width: min(80vw, 850px); height: 58vh; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-16deg); }
.archive-slab {
    position: absolute;
    inset: auto 0;
    padding: 2rem;
    min-height: 9rem;
    border-radius: 2.2rem;
    border: 1px solid rgba(255,255,255,.66);
    background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(185,181,255,.2), rgba(95,230,255,.24));
    box-shadow: inset 0 1px #FFFFFF, 0 30px 64px rgba(6,36,61,.22);
    backdrop-filter: blur(18px);
}
.archive-slab span { font-family: var(--mono); color: var(--deep-glass-teal); }
.archive-slab b { display: block; font-family: var(--title); font-size: clamp(1.8rem, 4vw, 3.7rem); margin-top: .4rem; }
.slab-one { top: 0; transform: translateZ(80px); }
.slab-two { top: 34%; transform: translateX(7%) translateZ(20px); }
.slab-three { bottom: 0; transform: translateX(-5%) translateZ(-30px); }
.reef-note { position: relative; width: min(76vw, 740px); margin-top: 42vh; transform: rotateZ(2deg); }

.surface-signal { background: radial-gradient(circle at 50% 15%, rgba(255,255,255,.78), transparent 38%); }
.surface-plaque { width: min(82vw, 980px); border-radius: 4.5rem; padding: clamp(2.5rem, 7vw, 6rem); text-align: center; animation: panelBob 7.5s ease-in-out infinite; }
.surface-plaque h2 { font-size: clamp(4rem, 13vw, 12rem); color: var(--deep-glass-teal); }
.signal-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.gel-button {
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 999px;
    padding: .95rem 1.35rem;
    color: var(--chrome-shadow-navy);
    background: linear-gradient(180deg, #FFFFFF, #FFE45E 55%, rgba(95,230,255,.48));
    box-shadow: inset 0 1px #FFFFFF, inset 0 -8px 18px rgba(7,94,113,.16), 0 18px 32px rgba(6,36,61,.16);
    cursor: pointer;
    transition: transform .32s cubic-bezier(.2,1.5,.35,1), filter .32s;
}
.coral-button { background: linear-gradient(180deg, #FFFFFF, #FF7A8A 58%, rgba(185,181,255,.48)); }
.gel-button:hover { transform: translateY(-5px) scale(1.04); filter: saturate(1.2); }

.bubble-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ambient-bubble {
    position: absolute;
    bottom: -80px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.64);
    background: radial-gradient(circle at 30% 20%, #FFFFFF, rgba(95,230,255,.26) 45%, rgba(7,94,113,.12));
    box-shadow: inset -8px -12px 20px rgba(7,94,113,.12), inset 4px 4px 12px rgba(255,255,255,.85);
    animation: ambientRise var(--duration) linear infinite;
    opacity: .72;
}

.is-visible .glass-plaque, .is-visible .aero-tank, .is-visible .surface-plaque { animation-name: plaqueArrive, panelBob; animation-duration: 1s, 8s; animation-timing-function: cubic-bezier(.2,1.3,.3,1), ease-in-out; animation-iteration-count: 1, infinite; }

@keyframes capsuleInflate { from { opacity: 0; transform: scale(.55) rotateX(18deg); filter: blur(12px); } to { opacity: 1; transform: scale(1) rotateX(8deg) rotateZ(-1.5deg); filter: blur(0); } }
@keyframes panelBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes rippleReveal { 0% { transform: scale(.2); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes swim { from { translate: 0 0; } to { translate: 130vw -8vh; } }
@keyframes causticSlide { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes fieldBreathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.08) rotate(6deg); } }
@keyframes bubbleRise { 0%,100% { transform: translateY(12px) scale(1); } 50% { transform: translateY(-32px) scale(1.06); } }
@keyframes ribbonFlow { from { translate: -4vw 1vh; } to { translate: 5vw -3vh; } }
@keyframes ambientRise { from { transform: translateY(0) translateX(0); } to { transform: translateY(-120vh) translateX(var(--drift)); } }
@keyframes plaqueArrive { from { opacity: .2; filter: blur(12px); transform: translateY(50px) rotateZ(-4deg); } to { opacity: 1; filter: blur(0); } }

@media (max-width: 760px) {
    .refracted-rail { right: .5rem; padding: .45rem; }
    .rail-dot { width: 2rem; height: 2rem; }
    .rail-dot span { font-size: .48rem; }
    .scene { padding: 1.4rem 3.4rem 1.4rem 1.1rem; }
    .boot-capsule, .aero-tank, .surface-plaque { border-radius: 2.2rem; width: 100%; }
    .directory-signs { flex-direction: column; }
    .packet-orbit { min-height: 430px; }
    .bubble-packet.large { left: 0; }
    .bubble-packet:nth-child(2) { left: 44%; }
    .bubble-packet:nth-child(3) { right: 0; top: 35%; }
    .bubble-packet:nth-child(4) { left: 8%; bottom: 7%; }
    .bubble-packet:nth-child(5) { right: 12%; bottom: 0; }
}