:root {
    --abyss: #06141B;
    --bone: #F1E4C8;
    --violet: #8A6CFF;
    --plum: #41213F;
    --orange: #D56B2D;
    --teal: #0C6B73;
    --mint: #8FFFE2;
    --depth: 0;
    --tint: 0.35;
    --blur: 0px;
    --drift: 0px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--bone);
    font-family: "Spectral", serif;
    background:
        radial-gradient(circle at 28% 12%, rgba(143,255,226,0.16), transparent 25vw),
        radial-gradient(circle at 74% 42%, rgba(138,108,255,0.13), transparent 34vw),
        linear-gradient(180deg, #06141B 0%, #0C6B73 38%, #41213F 72%, #06141B 100%);
    overflow-x: hidden;
}

button { font: inherit; }

.aquarium {
    position: relative;
    min-height: 500vh;
    isolation: isolate;
}

.water-column {
    position: fixed;
    z-index: 1;
    top: -10vh;
    left: calc(47% + (sin(var(--depth)) * 1px));
    width: 22vw;
    height: 120vh;
    transform: translateX(calc(-50% + var(--drift))) skewX(-5deg);
    border-left: 1px solid rgba(143,255,226,0.22);
    border-right: 1px solid rgba(143,255,226,0.14);
    background:
        radial-gradient(ellipse at 50% 20%, rgba(143,255,226,0.15), transparent 24%),
        linear-gradient(90deg, transparent, rgba(143,255,226,0.07), rgba(12,107,115,0.22), transparent);
    filter: blur(var(--blur));
    pointer-events: none;
}

.caustics,
.glass-noise,
.scratches {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.caustics {
    z-index: 8;
    opacity: 0.28;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse at 20% 30%, transparent 34%, rgba(143,255,226,0.18) 36%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, transparent 30%, rgba(241,228,200,0.12) 32%, transparent 38%);
    animation: causticDrift 13s ease-in-out infinite alternate;
}

.glass-noise {
    z-index: 9;
    opacity: 0.16;
    background-image:
        repeating-radial-gradient(circle at 30% 20%, rgba(241,228,200,0.18) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(118deg, transparent 0 9px, rgba(143,255,226,0.06) 10px, transparent 11px 27px);
    backdrop-filter: blur(0.6px) saturate(120%);
}

.scratches {
    z-index: 10;
    opacity: 0.34;
    background:
        linear-gradient(103deg, transparent 6%, rgba(241,228,200,0.12) 6.2%, transparent 6.5%),
        linear-gradient(78deg, transparent 46%, rgba(143,255,226,0.13) 46.2%, transparent 46.5%),
        linear-gradient(121deg, transparent 76%, rgba(241,228,200,0.10) 76.1%, transparent 76.4%);
}

.chamber {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 7vw;
    overflow: hidden;
}

.chamber::before {
    content: "";
    position: absolute;
    inset: 4vh 4vw;
    border: 1px solid rgba(143,255,226,0.16);
    border-radius: 46% 54% 51% 49% / 6% 8% 5% 9%;
    box-shadow: inset 0 0 6vw rgba(143,255,226,0.08), inset 0 0 2vw rgba(241,228,200,0.05);
    pointer-events: none;
}

.flooded-window { background: radial-gradient(circle at 50% 40%, rgba(12,107,115,0.5), transparent 42%), linear-gradient(180deg, #06141B, #06141B); }
.intake-lock { background: radial-gradient(circle at 44% 50%, rgba(213,107,45,0.14), transparent 35%), linear-gradient(180deg, #06141B, #0C6B73); }
.specimen-tank { background: radial-gradient(circle at 70% 44%, rgba(65,33,63,0.68), transparent 42%), linear-gradient(180deg, #0C6B73, #06141B 70%); }
.hidden-current { background: radial-gradient(circle at 38% 30%, rgba(138,108,255,0.16), transparent 32%), linear-gradient(180deg, #06141B, #41213F); }
.final-dive { background: radial-gradient(circle at 50% 70%, rgba(138,108,255,0.20), transparent 30%), linear-gradient(180deg, #41213F, #06141B 62%); }

.depth-nav {
    position: fixed;
    z-index: 20;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 1.15rem;
}

.depth-tick {
    width: 4.4rem;
    height: 1px;
    border: 0;
    padding: 0;
    background: rgba(241,228,200,0.35);
    color: var(--bone);
    cursor: pointer;
    transition: background .35s ease, width .35s ease, box-shadow .35s ease;
}

.depth-tick span {
    display: block;
    transform: translateY(-1rem);
    font-family: "IBM Plex Mono", monospace;
    font-size: .62rem;
    opacity: .75;
}

.depth-tick.active {
    width: 6.1rem;
    background: var(--mint);
    box-shadow: 0 0 18px rgba(143,255,226,.8);
}

.chapter-label {
    position: absolute;
    z-index: 4;
    max-width: 32rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(241,228,200,0.20);
    border-radius: 1.4rem 2.8rem 1.2rem 2.2rem;
    background: linear-gradient(135deg, rgba(6,20,27,0.62), rgba(65,33,63,0.30));
    box-shadow: inset 0 0 2rem rgba(143,255,226,0.07), 0 2rem 5rem rgba(0,0,0,0.28);
    backdrop-filter: blur(10px);
}

.left-label { left: 8vw; top: 18vh; }
.right-label { right: 9vw; top: 19vh; }
.center-label { top: 12vh; text-align: center; }
.slim { max-width: 27rem; }
.wide { max-width: 36rem; }

h1, h2, .warped-sign {
    font-family: "Bricolage Grotesque", sans-serif;
    margin: 0;
    letter-spacing: -0.055em;
    line-height: .86;
}

h1 { font-size: clamp(4rem, 11vw, 9.5rem); color: var(--mint); text-shadow: 0 0 2rem rgba(143,255,226,.42); }
h2 { font-size: clamp(2.8rem, 7vw, 7rem); color: var(--bone); }
p { font-size: clamp(1rem, 1.4vw, 1.35rem); line-height: 1.45; }
.mono { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }

.huge-porthole {
    position: relative;
    z-index: 2;
    width: min(68vw, 880px);
    aspect-ratio: 1.35;
    border-radius: 48% 52% 50% 50% / 43% 47% 53% 57%;
    border: 1.4rem solid rgba(241,228,200,0.08);
    outline: 2px solid rgba(143,255,226,0.22);
    background: radial-gradient(circle at 52% 38%, rgba(143,255,226,0.16), transparent 30%), radial-gradient(circle, rgba(12,107,115,0.55), rgba(6,20,27,0.95) 68%);
    box-shadow: inset 0 0 4rem rgba(143,255,226,0.15), 0 0 7rem rgba(12,107,115,0.55);
    overflow: hidden;
}

.warped-sign {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(3.5rem, 10vw, 10rem);
    color: var(--bone);
    text-shadow: 0 0 1rem rgba(143,255,226,.7), 0 0 4rem rgba(138,108,255,.45);
    transform: perspective(900px) rotateY(180deg) translateZ(-80px);
    animation: signSettle 3.6s cubic-bezier(.2,.8,.12,1) forwards, buoy 7s ease-in-out infinite 3.4s;
}

.mint-sweep {
    position: absolute;
    inset: -20%;
    background: linear-gradient(105deg, transparent 38%, rgba(143,255,226,.7) 48%, transparent 58%);
    transform: translateX(-90%);
    animation: sweep 4.2s ease-in-out forwards;
}

.sealed-bag, .review-capsule, .blank-capsule {
    border: 1px solid rgba(143,255,226,0.42);
    background: linear-gradient(135deg, rgba(241,228,200,0.14), rgba(143,255,226,0.08) 48%, rgba(6,20,27,0.30));
    backdrop-filter: blur(11px);
    box-shadow: inset 0 0 2rem rgba(143,255,226,0.12), 0 1.3rem 4rem rgba(0,0,0,0.35);
}

.hero-bag {
    position: absolute;
    z-index: 5;
    right: 13vw;
    bottom: 13vh;
    width: min(30rem, 38vw);
    min-height: 15rem;
    padding: 2rem;
    border-radius: 2rem 2.8rem 1.6rem 3rem;
    transform: rotate(-7deg);
    animation: buoy 6.5s ease-in-out infinite;
}

.bag-seal {
    display: inline-block;
    padding: .35rem .7rem;
    margin-bottom: 1rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: .7rem;
    color: var(--abyss);
    background: var(--orange);
    border-radius: 999px;
}

.cost-fossils { display: flex; gap: .6rem; margin-top: 1.2rem; }
.cost-fossils i {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 58% 42% 48% 52%;
    background: radial-gradient(circle at 35% 32%, var(--bone), var(--orange) 58%, transparent 61%);
    box-shadow: 0 0 .9rem rgba(213,107,45,.6);
}

.hand-note, .warning-buoy, .final-seal {
    font-family: "Yomogi", cursive;
    color: var(--orange);
}

.note-one {
    position: absolute;
    left: 62vw;
    top: 20vh;
    z-index: 6;
    font-size: 2rem;
    transform: rotate(-13deg);
}

.curtain {
    position: absolute;
    inset: 0 auto 0 0;
    width: 31vw;
    background: radial-gradient(ellipse at 80% 20%, rgba(65,33,63,.88), transparent 70%);
}

.hatch-ring {
    position: absolute;
    left: 12vw;
    top: 22vh;
    width: min(42vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.4rem solid rgba(241,228,200,0.08);
    box-shadow: inset 0 0 4rem rgba(6,20,27,.9), 0 0 5rem rgba(143,255,226,.2);
    display: grid;
    place-items: center;
    animation: buoy 9s ease-in-out infinite;
}

.iris {
    position: absolute;
    inset: 1.7rem;
    border-radius: 50%;
    background: conic-gradient(from 20deg, #06141B, #0C6B73, #41213F, #06141B, #D56B2D, #06141B);
    clip-path: circle(42% at 50% 50%);
    animation: irisPulse 5s ease-in-out infinite;
}

.blank-capsule {
    position: relative;
    z-index: 2;
    width: 58%;
    padding: 2rem;
    border-radius: 50% 44% 48% 52%;
    text-align: center;
}

.blank-capsule b { display: block; margin-top: .6rem; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.6rem; }

.pawn-ticket {
    position: absolute;
    left: 35vw;
    bottom: 18vh;
    z-index: 4;
    padding: .9rem 1.1rem;
    color: var(--abyss);
    background: var(--bone);
    border-left: .55rem solid var(--orange);
    transform: rotate(9deg);
    font-family: "IBM Plex Mono", monospace;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.28);
}

.pressure-gauge {
    position: absolute;
    right: 14vw;
    bottom: 16vh;
    width: 13rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from -120deg, var(--mint) 0 38%, rgba(241,228,200,.18) 39% 68%, var(--orange) 69% 82%, transparent 83%);
    display: grid;
    place-items: center;
    animation: gaugeTick 4s steps(7) infinite;
}

.pressure-gauge::after { content: ""; position: absolute; inset: 1.2rem; border-radius: 50%; background: #06141B; }
.pressure-gauge span { position: relative; z-index: 2; font-family: "IBM Plex Mono", monospace; color: var(--mint); }

.review-capsule {
    position: absolute;
    z-index: 5;
    width: min(26rem, 34vw);
    padding: 1.5rem;
    border-radius: 3rem 2rem 3.5rem 1.8rem;
    animation: buoy 8s ease-in-out infinite;
}

.review-capsule p { font-style: italic; font-size: clamp(1.1rem, 2vw, 1.65rem); }
.review-capsule small { font-family: "IBM Plex Mono", monospace; color: var(--orange); text-transform: uppercase; }
.capsule-one { left: 38vw; top: 19vh; transform: rotate(-6deg); }
.capsule-two { left: 15vw; bottom: 18vh; transform: rotate(7deg); animation-delay: -2s; }
.capsule-three { right: 11vw; bottom: 23vh; transform: rotate(-3deg); animation-delay: -4s; }

.magnifier-bubble {
    position: absolute;
    z-index: 6;
    left: 60vw;
    top: 42vh;
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--abyss);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.7rem;
    background: radial-gradient(circle at 30% 25%, rgba(241,228,200,.85), rgba(143,255,226,.42) 45%, rgba(143,255,226,.12) 70%);
    box-shadow: inset -1rem -1rem 2rem rgba(6,20,27,.22), 0 0 2rem rgba(143,255,226,.48);
    animation: bubbleRise 10s ease-in-out infinite;
}

.receipt-coral {
    position: absolute;
    right: 5vw;
    bottom: -5vh;
    width: 18vw;
    height: 44vh;
    background: repeating-linear-gradient(90deg, rgba(241,228,200,.22) 0 8px, transparent 8px 17px);
    clip-path: polygon(15% 100%, 35% 20%, 45% 100%, 62% 0, 70% 100%, 88% 28%, 92% 100%);
    opacity: .45;
}

.contour-field {
    position: absolute;
    inset: 0;
    opacity: .32;
    background:
        repeating-radial-gradient(ellipse at 40% 42%, transparent 0 3.4rem, rgba(143,255,226,.24) 3.5rem 3.58rem, transparent 3.7rem 5.7rem),
        repeating-radial-gradient(ellipse at 65% 58%, transparent 0 2.8rem, rgba(213,107,45,.18) 2.9rem 3rem, transparent 3.1rem 5rem);
    animation: currentSlide 16s linear infinite;
}

.hook {
    position: absolute;
    z-index: 5;
    width: 7rem;
    height: 13rem;
    border: .35rem solid var(--orange);
    border-top: 0;
    border-left-color: transparent;
    border-radius: 0 0 5rem 5rem;
    filter: drop-shadow(0 0 1rem rgba(213,107,45,.45));
    animation: buoy 7s ease-in-out infinite;
}
.hook span { position: absolute; left: -1rem; top: 5rem; padding: .3rem .6rem; background: var(--bone); color: var(--abyss); font-family: "IBM Plex Mono", monospace; transform: rotate(-12deg); }
.hook-time { left: 12vw; top: 25vh; }
.hook-trust { left: 36vw; bottom: 14vh; animation-delay: -1.5s; }
.hook-taste { right: 31vw; top: 18vh; animation-delay: -3s; }
.hook-regret { right: 12vw; bottom: 18vh; animation-delay: -4.2s; }

.receipt-ribbon {
    position: absolute;
    left: 18vw;
    top: 51vh;
    z-index: 4;
    width: 66vw;
    padding: .8rem 1rem;
    color: var(--abyss);
    background: var(--bone);
    border-radius: 50% 20% 55% 18%;
    transform: rotate(-8deg);
    font-family: "IBM Plex Mono", monospace;
    overflow: hidden;
    white-space: nowrap;
    opacity: .82;
}
.receipt-ribbon span { display: inline-block; animation: ribbonText 12s linear infinite; }

.warning-buoy {
    position: absolute;
    left: 56vw;
    bottom: 9vh;
    z-index: 6;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background: radial-gradient(circle, var(--orange), #41213F 66%);
    color: var(--bone);
    box-shadow: 0 0 2rem rgba(213,107,45,.55);
    animation: buoy 5.5s ease-in-out infinite;
}

.ocean-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28vh;
    background: radial-gradient(ellipse at 50% 100%, rgba(241,228,200,.24), transparent 56%), linear-gradient(180deg, transparent, rgba(6,20,27,.9));
}

.verdict-fossil {
    position: absolute;
    z-index: 5;
    bottom: 17vh;
    width: min(23rem, 42vw);
    aspect-ratio: 1.55;
    display: grid;
    place-items: center;
    border-radius: 55% 45% 49% 51%;
    background: radial-gradient(circle at 50% 46%, rgba(138,108,255,.65), rgba(143,255,226,.13) 40%, rgba(241,228,200,.10) 62%, rgba(6,20,27,.15));
    border: 1px solid rgba(138,108,255,.72);
    box-shadow: 0 0 4rem rgba(138,108,255,.65), inset 0 0 2rem rgba(241,228,200,.14);
    animation: fossilGlow 4s ease-in-out infinite alternate;
}
.fossil-core { position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 20deg, var(--violet) 0 8deg, rgba(143,255,226,.6) 9deg 13deg, transparent 14deg 22deg); opacity: .82; }
.verdict-fossil span { position: relative; z-index: 2; color: var(--bone); text-shadow: 0 0 1rem #06141B; }
.final-seal { position: absolute; bottom: 6vh; right: 10vw; font-size: 2rem; color: var(--mint); transform: rotate(-4deg); }

.specimen { will-change: transform; }

@keyframes signSettle {
    0% { transform: perspective(900px) rotateY(180deg) translateZ(-120px) scale(.92); filter: blur(5px); opacity: .55; }
    62% { transform: perspective(900px) rotateY(12deg) translateZ(20px) scale(1.02); filter: blur(1px); }
    100% { transform: perspective(900px) rotateY(0) translateZ(0) scale(1); filter: blur(0); opacity: 1; }
}

@keyframes sweep { 0%, 35% { transform: translateX(-90%); } 100% { transform: translateX(90%); } }
@keyframes buoy { 0%,100% { translate: 0 0; } 50% { translate: 0 -1.2rem; } }
@keyframes causticDrift { from { transform: translate(-2vw,-1vh) scale(1); } to { transform: translate(2vw,1vh) scale(1.06); } }
@keyframes irisPulse { 0%,100% { clip-path: circle(36% at 50% 50%); rotate: 0deg; } 50% { clip-path: circle(47% at 50% 50%); rotate: 18deg; } }
@keyframes gaugeTick { 0% { rotate: -3deg; } 100% { rotate: 18deg; } }
@keyframes bubbleRise { 0%,100% { transform: translateY(1.8rem) scale(.96); } 50% { transform: translateY(-1.4rem) scale(1.06); } }
@keyframes currentSlide { from { background-position: 0 0, 0 0; } to { background-position: 12vw 8vh, -10vw 6vh; } }
@keyframes ribbonText { from { transform: translateX(0); } to { transform: translateX(-36%); } }
@keyframes fossilGlow { from { filter: saturate(1) brightness(.92); } to { filter: saturate(1.35) brightness(1.18); } }

@media (max-width: 760px) {
    .chamber { padding: 6rem 1.2rem; align-items: start; }
    .chapter-label, .left-label, .right-label, .center-label { position: relative; left: auto; right: auto; top: auto; max-width: 100%; justify-self: stretch; }
    .hero-bag, .hatch-ring, .review-capsule, .pressure-gauge, .hook, .receipt-ribbon, .warning-buoy, .final-seal { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1.5rem auto; width: min(92vw, 28rem); }
    .huge-porthole { width: 92vw; }
    .depth-nav { right: .6rem; transform: translateY(-50%) scale(.72); transform-origin: right center; }
    .water-column { width: 52vw; }
}