:root {
    --deep: #04131A;
    --cyan: #8DE9E2;
    --green: #46B37C;
    --sand: #D8C79A;
    --magenta: #D94E8F;
    --violet: #6957C8;
    --foam: #F2FBF7;
    --serif: "DM Serif Display", Georgia, serif;
    --body: "Chivo", Helvetica, sans-serif;
    --note: "Alegreya Sans", Arial, sans-serif;
    --summary-font-space: "DM Serif Display";
    --summary-font-inter: "Chivo";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--deep); }

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--foam);
    font-family: var(--body);
    background:
        radial-gradient(circle at 18% 12%, rgba(105, 87, 200, .22), transparent 34rem),
        radial-gradient(circle at 82% 42%, rgba(141, 233, 226, .11), transparent 28rem),
        linear-gradient(180deg, #04131A 0%, #061D25 42%, #04131A 100%);
}

button { font: inherit; }

.room-noise,
.condensation {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

.room-noise {
    opacity: .18;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(242,251,247,.18) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 10%, rgba(216,199,154,.12) 0 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(141,233,226,.13) 0 1px, transparent 1px);
    background-size: 31px 37px, 43px 47px, 19px 23px;
    mix-blend-mode: screen;
}

.condensation {
    opacity: .34;
    background:
        radial-gradient(ellipse at var(--mx, 52%) var(--my, 48%), rgba(242,251,247,.12), transparent 12rem),
        radial-gradient(circle at 9% 16%, rgba(242,251,247,.10) 0 .12rem, transparent .13rem),
        radial-gradient(circle at 91% 31%, rgba(242,251,247,.09) 0 .18rem, transparent .19rem),
        linear-gradient(90deg, rgba(141,233,226,.05), transparent 18%, transparent 82%, rgba(141,233,226,.04));
    filter: blur(.25px);
}

.depth-markers {
    position: fixed;
    z-index: 30;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.depth-marker {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: center;
    gap: .35rem;
    min-width: 7.5rem;
    padding: .28rem .4rem;
    color: rgba(242,251,247,.52);
    background: rgba(4,19,26,.28);
    border: 1px solid rgba(141,233,226,.22);
    border-radius: 999px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-family: var(--note);
    font-size: .69rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: color .35s, border-color .35s, transform .35s;
}

.depth-marker span {
    color: var(--sand);
    font-family: var(--serif);
    font-size: .9rem;
}

.depth-marker.active {
    color: var(--foam);
    border-color: var(--cyan);
    transform: translateX(.42rem);
}

.water-spine {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 12.5vw;
    width: 1px;
    z-index: 25;
    background: rgba(141,233,226,.18);
}

.water-spine::before,
.water-spine::after {
    content: "";
    position: absolute;
    left: -5px;
    width: 11px;
    height: 1px;
    background: rgba(216,199,154,.62);
    box-shadow: 0 13vh 0 rgba(216,199,154,.35), 0 26vh 0 rgba(216,199,154,.35), 0 39vh 0 rgba(216,199,154,.35), 0 52vh 0 rgba(216,199,154,.35), 0 65vh 0 rgba(216,199,154,.35), 0 78vh 0 rgba(216,199,154,.35);
}

.water-spine::before { top: 8vh; }
.water-spine::after { top: 15vh; }

.water-spine span {
    position: absolute;
    left: -2px;
    top: 0;
    width: 5px;
    height: calc(var(--scroll, 0) * 1%);
    min-height: 8vh;
    border-radius: 999px;
    background: linear-gradient(var(--cyan), var(--green), var(--magenta));
    box-shadow: 0 0 20px rgba(141,233,226,.6);
}

.basin {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    align-items: center;
    gap: 1.2vw;
    padding: 7vh 5vw 7vh 15vw;
    isolation: isolate;
}

.basin::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(141,233,226,.035) 50%, transparent);
    pointer-events: none;
}

.basin-glass {
    position: relative;
    overflow: hidden;
    min-height: 62vh;
    border: 1px solid rgba(141,233,226,.55);
    border-radius: 2.5rem .7rem 3.8rem 1.2rem;
    background:
        linear-gradient(90deg, rgba(242,251,247,.075), transparent 12%, transparent 86%, rgba(242,251,247,.06)),
        radial-gradient(circle at 50% 120%, rgba(141,233,226,.20), transparent 46%),
        rgba(4,19,26,.58);
    box-shadow: inset 0 0 48px rgba(141,233,226,.08), 0 24px 90px rgba(0,0,0,.42);
    backdrop-filter: blur(7px);
}

.basin-glass::before {
    content: "";
    position: absolute;
    inset: .8rem;
    border: 1px solid rgba(242,251,247,.11);
    border-radius: inherit;
    pointer-events: none;
}

.basin-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(100deg, transparent 0 16px, rgba(242,251,247,.025) 17px 18px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.vertical-label {
    position: absolute;
    left: 8.8vw;
    top: 18vh;
    writing-mode: vertical-rl;
    color: var(--sand);
    font-family: var(--note);
    letter-spacing: .34em;
    font-size: .78rem;
    opacity: .74;
}

.prime-tank { grid-column: 3 / 13; min-height: 72vh; }

.basin-prime h1 {
    grid-column: 8 / 14;
    align-self: start;
    margin: 7vh 0 0;
    max-width: 7.5em;
    font-family: var(--serif);
    font-size: clamp(3.8rem, 9vw, 9.8rem);
    font-weight: 400;
    line-height: .86;
    color: rgba(242,251,247,.92);
    text-shadow: 0 10px 40px rgba(141,233,226,.18);
    z-index: 3;
}

.water-fill,
.drain-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--fill, 24%);
    background:
        radial-gradient(circle at 35% 20%, rgba(141,233,226,.24), transparent 22%),
        linear-gradient(180deg, rgba(141,233,226,.16), rgba(70,179,124,.18) 55%, rgba(4,19,26,.22));
    filter: url(#none);
    transition: height 1.3s cubic-bezier(.18,.78,.2,1);
}

.water-fill::before,
.drain-water::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: -7px;
    height: 18px;
    background: radial-gradient(ellipse at 50% 70%, rgba(141,233,226,.78), transparent 65%);
    animation: meniscus 5.5s ease-in-out infinite;
}

.meniscus {
    position: absolute;
    left: 5%;
    right: 8%;
    bottom: calc(var(--fill, 24%) - 2px);
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
    opacity: .75;
    transition: bottom 1.3s cubic-bezier(.18,.78,.2,1);
}

.ruler { position: absolute; inset: 6% auto 9% 3%; width: 18px; border-left: 1px solid rgba(216,199,154,.65); }
.ruler::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(216,199,154,.8) 0 1px, transparent 1px 26px); }

.agent-cloud i,
.agent-school i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--foam);
    box-shadow: 0 0 16px rgba(242,251,247,.9);
    animation: drift 7s ease-in-out var(--d, 0s) infinite;
}

.etched-wordmark {
    position: absolute;
    left: 9%;
    bottom: 8%;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 6vw, 7rem);
    color: rgba(216,199,154,.38);
    letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(242,251,247,.25), 0 0 30px rgba(141,233,226,.12);
}

.quiet-invitation {
    position: absolute;
    left: 8%;
    top: 9%;
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    max-width: 34rem;
}

.quiet-invitation button {
    border: 1px solid rgba(141,233,226,.43);
    background: rgba(4,19,26,.34);
    color: var(--foam);
    border-radius: 999px;
    padding: .72rem 1rem;
    font-family: var(--note);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .35s, background .35s, border-color .35s;
}

.quiet-invitation button:hover { transform: translateY(-3px); border-color: var(--cyan); background: rgba(141,233,226,.12); }

.edge-note {
    grid-column: 2 / 5;
    align-self: end;
    margin: 0 0 7vh;
    color: var(--sand);
    font-family: var(--note);
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    line-height: 1.15;
    z-index: 3;
}

.side-copy,
.weather-copy,
.final-copy {
    position: relative;
    z-index: 4;
}

.side-copy { grid-column: 2 / 6; max-width: 28rem; }
.right-slip { grid-column: 11 / 15; }
.weather-copy { grid-column: 3 / 8; align-self: start; margin-top: 6vh; }
.final-copy { grid-column: 9 / 14; max-width: 35rem; }

.specimen {
    display: inline-block;
    color: var(--cyan);
    font-family: var(--note);
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

h2 {
    margin: 0 0 1.2rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 7.4rem);
    line-height: .88;
    color: var(--foam);
}

p {
    color: rgba(242,251,247,.72);
    font-size: clamp(1rem, 1.22vw, 1.25rem);
    line-height: 1.7;
    font-weight: 300;
}

.dye-tank { grid-column: 6 / 15; min-height: 67vh; border-radius: .8rem 4rem 1.2rem 3rem; }
.dropper { position: absolute; left: -1rem; top: 31%; width: 13rem; height: 1.2rem; background: linear-gradient(90deg, rgba(216,199,154,.75), var(--magenta)); border-radius: 0 999px 999px 0; box-shadow: 0 0 28px rgba(217,78,143,.5); }
.dropper::after { content: ""; position: absolute; right: -1.2rem; top: 50%; width: 2rem; height: 2rem; border-radius: 65% 35% 58% 42%; background: var(--magenta); transform: translateY(-50%) rotate(45deg); filter: blur(.4px); animation: pulseDrop 3s ease-in-out infinite; }

.dye-plume {
    position: absolute;
    left: 4%;
    top: 18%;
    width: 58%;
    height: 68%;
    background:
        radial-gradient(ellipse at 0% 45%, rgba(217,78,143,.82), transparent 21%),
        radial-gradient(ellipse at 28% 35%, rgba(217,78,143,.36), transparent 35%),
        radial-gradient(ellipse at 52% 58%, rgba(105,87,200,.28), transparent 42%),
        radial-gradient(ellipse at 70% 30%, rgba(141,233,226,.13), transparent 34%);
    filter: blur(14px) saturate(1.18);
    opacity: var(--plume, .68);
    transform-origin: left center;
    animation: plume 9s ease-in-out infinite;
}

.current-lines,
.school-paths,
.contours,
.tide-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.current-lines path,
.school-paths path,
.contours path,
.tide-map path { fill: none; vector-effect: non-scaling-stroke; }
.current { stroke-width: 2.1; stroke-dasharray: 9 18; animation: current 6s linear infinite; }
.magenta { stroke: rgba(217,78,143,.74); } .violet { stroke: rgba(105,87,200,.7); } .cyan { stroke: rgba(141,233,226,.58); }

.eddy-caption,
.label-slip,
.outcome-label,
.storm-fragment {
    position: absolute;
    color: var(--sand);
    font-family: var(--note);
    letter-spacing: .07em;
    text-transform: uppercase;
    font-size: .82rem;
    padding: .5rem .7rem;
    border: 1px solid rgba(216,199,154,.24);
    background: rgba(4,19,26,.28);
}
.cap-one { left: 38%; top: 25%; transform: rotate(-6deg); }
.cap-two { right: 9%; bottom: 22%; transform: rotate(4deg); }

.bubbles i { position: absolute; bottom: -2rem; left: var(--x); width: var(--size); height: var(--size); border: 1px solid rgba(141,233,226,.7); border-radius: 50%; animation: bubbleUp var(--speed) linear infinite; opacity: .7; }

.learning-tank { grid-column: 2 / 11; min-height: 70vh; }
.terrain { position: absolute; background: linear-gradient(180deg, rgba(216,199,154,.9), rgba(216,199,154,.24)); border: 1px solid rgba(216,199,154,.55); box-shadow: 0 -12px 40px rgba(216,199,154,.12); }
.island-one { left: 31%; bottom: 24%; width: 16%; height: 18%; border-radius: 53% 47% 42% 58%; transform: rotate(-8deg); }
.island-two { right: 17%; top: 23%; width: 18%; height: 13%; border-radius: 46% 54% 60% 40%; transform: rotate(14deg); }
.shelf { left: 8%; right: 13%; bottom: 9%; height: 7%; border-radius: 60% 40% 0 0; opacity: .7; }
.school-paths path { stroke: rgba(70,179,124,.76); stroke-width: 2; stroke-dasharray: 630; stroke-dashoffset: 630; animation: drawPath 7s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(70,179,124,.45)); }
.school-paths path:nth-child(2) { animation-delay: .7s; stroke: rgba(141,233,226,.58); }
.school-paths path:nth-child(3) { animation-delay: 1.2s; stroke: rgba(216,199,154,.5); }
.agent-school i { background: var(--green); width: .55rem; height: .32rem; border-radius: 60% 40% 40% 60%; box-shadow: 0 0 16px rgba(70,179,124,.9); transform: translate(var(--current-x, 0), var(--current-y, 0)); transition: transform .4s ease-out; }
.rotated { right: 2rem; top: 20%; transform: rotate(90deg); transform-origin: right center; }

.storm-table { grid-column: 3 / 14; min-height: 68vh; transform: rotate(-2.6deg); border-radius: 3.5rem 1rem 3rem .8rem; }
.contours path { stroke: rgba(141,233,226,.48); stroke-width: 1.6; stroke-dasharray: 18 12; animation: current 10s linear infinite reverse; }
.pressure-haze { position: absolute; inset: 0; background: radial-gradient(circle at 62% 44%, rgba(105,87,200,.58), transparent 28%), radial-gradient(circle at 30% 60%, rgba(217,78,143,.22), transparent 25%); filter: blur(22px); animation: pressure 6s ease-in-out infinite; }
.pressure-beads i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1.2rem); height: calc(var(--s) * 1.2rem); border-radius: 50%; border: 1px solid rgba(105,87,200,.85); background: rgba(105,87,200,.15); box-shadow: 0 0 24px rgba(105,87,200,.55); animation: bead 3.5s ease-in-out infinite; }
.wave-paddle { position: absolute; left: 6%; top: 12%; width: 1.5rem; height: 72%; border-radius: 999px; background: linear-gradient(var(--sand), transparent); transform: rotate(8deg); animation: paddle 4.5s ease-in-out infinite; }
.storm-fragment { right: 9%; bottom: 12%; }

.drain-tank { grid-column: 2 / 9; min-height: 69vh; border-radius: 1rem 3rem .6rem 4rem; }
.drain-water { height: var(--drain, 34%); opacity: .72; }
.tide-map .ghost { stroke: rgba(242,251,247,.36); stroke-width: 1.4; stroke-dasharray: 8 13; }
.tide-map .sediment-line { stroke: rgba(216,199,154,.9); stroke-width: 3; stroke-linecap: round; }
.sediment { position: absolute; bottom: 0; height: 19%; background: radial-gradient(ellipse at 50% 0%, rgba(216,199,154,.7), transparent 65%); filter: blur(10px); opacity: .8; }
.sediment-a { left: 0; right: 38%; } .sediment-b { left: 31%; right: 0; height: 12%; background: radial-gradient(ellipse at 50% 0%, rgba(70,179,124,.45), transparent 62%); }
.outcome-label { left: 9%; bottom: 25%; color: var(--foam); }

@keyframes meniscus { 0%,100% { transform: translateX(-1.5%); } 50% { transform: translateX(1.5%); } }
@keyframes drift { 0%,100% { transform: translate(0,0); opacity: .5; } 50% { transform: translate(14px,-10px); opacity: 1; } }
@keyframes pulseDrop { 0%,100% { transform: translateY(-50%) rotate(45deg) scale(.82); } 50% { transform: translateY(-50%) rotate(45deg) scale(1.12); } }
@keyframes plume { 0%,100% { transform: scaleX(.94) translateY(0); } 50% { transform: scaleX(1.1) translateY(2%); } }
@keyframes current { to { stroke-dashoffset: -220; } }
@keyframes bubbleUp { from { transform: translateY(0) scale(.7); opacity: 0; } 12% { opacity: .75; } to { transform: translateY(-72vh) scale(1.25); opacity: 0; } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes pressure { 0%,100% { transform: scale(.94) rotate(0); opacity: .72; } 50% { transform: scale(1.08) rotate(2deg); opacity: .95; } }
@keyframes bead { 0%,100% { transform: scale(.8); } 50% { transform: scale(1.18); } }
@keyframes paddle { 0%,100% { transform: rotate(5deg) translateX(0); } 50% { transform: rotate(12deg) translateX(18px); } }

@media (max-width: 900px) {
    .depth-markers { display: none; }
    .water-spine { left: 5vw; }
    .basin { grid-template-columns: 1fr; padding: 6rem 6vw 5rem 10vw; gap: 2rem; }
    .prime-tank, .dye-tank, .learning-tank, .storm-table, .drain-tank, .side-copy, .right-slip, .weather-copy, .final-copy, .basin-prime h1, .edge-note { grid-column: 1; }
    .basin-prime h1 { margin: 0; font-size: clamp(3.5rem, 17vw, 6rem); }
    .basin-glass { min-height: 58vh; }
    .vertical-label { left: 2vw; }
    .quiet-invitation { flex-direction: column; align-items: flex-start; }
}