:root {
    --abyss: #0a0f14;
    --near-black: #0a1520;
    --surface: #0d1f2b;
    --violet-depth: #15102a;
    --cyan: #42d4b4;
    --lavender: #9b8ec4;
    --aurora-violet: #6b3fa0;
    --oxidized-leather: #7a4530;
    --deep-magenta: #c74b8f;
    --leather: #6e3b28;
    --leather-dark: #5e3020;
    --display: "Outfit", "Inter", sans-serif;
    --body: "Instrument Serif", Georgia, serif;
    --mono: "Space Grotesk", "Inter", sans-serif;
    --depth: 0;
    --headline-size: clamp(2.8rem, 6vw, 5.6rem);
    --body-size: clamp(1.05rem, 1.8vw, 1.3rem);
    --caption-size: clamp(0.68rem, 0.92vw, 0.86rem);
}

/* Design anchors: IntersectionObserver` for scroll-triggered entry animations. Elements begin with `opacity: 0` and `transform: translateY(20px. IntersectionObserver` with `rootMargin: '100px'` for pre-loading animations before they enter viewport. Space Grotesk" (Google Fonts Space Grotesk" in `#c8e0dc` at small size. */

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

html {
    min-height: 100%;
    background: var(--abyss);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 16% 8%, rgba(66, 212, 180, 0.16), transparent 28vw),
        radial-gradient(circle at 82% 34%, rgba(155, 142, 196, 0.16), transparent 32vw),
        linear-gradient(180deg, #0d1f2b 0%, #0a1520 24%, #15102a 58%, #0a0f14 100%);
    color: var(--sea-text, #c8e0dc);
    font-family: var(--body);
    font-size: var(--body-size);
    line-height: 1.72;
    letter-spacing: 0.015em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(115deg, rgba(66, 212, 180, calc(0.12 - var(--depth) * 0.08)), transparent 36%, rgba(155, 142, 196, calc(0.06 + var(--depth) * 0.12)) 76%, transparent),
        linear-gradient(180deg, rgba(13, 31, 43, calc(1 - var(--depth) * 0.7)), rgba(21, 16, 42, 0.7), rgba(10, 15, 20, 1));
}

.waterfield {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.52;
    background-image:
        repeating-linear-gradient(98deg, transparent 0 42px, rgba(66, 212, 180, 0.032) 44px, transparent 48px),
        repeating-linear-gradient(172deg, transparent 0 76px, rgba(155, 142, 196, 0.034) 78px, transparent 83px);
    filter: blur(0.4px);
    animation: water-shift 18s ease-in-out infinite alternate;
}

.depth-indicator {
    position: fixed;
    top: 0;
    left: 3vw;
    width: 10px;
    height: 100vh;
    z-index: 20;
    pointer-events: none;
}

.depth-line {
    position: absolute;
    top: 0;
    left: 4px;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #42d4b4, #6b3fa0, #c74b8f, #15102a);
    opacity: 0.3;
}

.depth-dot {
    position: absolute;
    left: 1px;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42d4b4;
    box-shadow: 0 0 12px #42d4b4, 0 0 26px rgba(66, 212, 180, 0.38);
    opacity: 0;
    transform: translateY(var(--dot-y, 0px));
    transition: opacity 900ms ease;
}

.depth-dot.visible {
    opacity: 0.76;
}

.descent {
    position: relative;
    isolation: isolate;
}

.pressure-layer {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 12vh 5vw 18vh;
}

.pressure-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.86;
}

.surface::before { background: linear-gradient(175deg, #0d1f2b, rgba(10, 21, 32, 0.72), transparent 82%); }
.first::before { background: linear-gradient(178deg, rgba(13, 31, 43, 0.56), rgba(21, 16, 42, 0.34), transparent); }
.middle::before { background: radial-gradient(circle at 70% 10%, rgba(66, 212, 180, 0.08), transparent 31vw), linear-gradient(180deg, rgba(10, 21, 32, 0.25), rgba(21, 16, 42, 0.58)); }
.deep::before { background: linear-gradient(180deg, rgba(21, 16, 42, 0.7), rgba(10, 15, 20, 0.42)); }
.abyss::before { background: radial-gradient(circle at 20% 76%, rgba(66, 212, 180, 0.055), transparent 30vw), linear-gradient(180deg, rgba(21, 16, 42, 0.48), rgba(10, 15, 20, 0.84)); }
.lower::before { background: linear-gradient(180deg, rgba(10, 15, 20, 0.82), rgba(21, 16, 42, 0.32), rgba(10, 15, 20, 0.9)); }
.final::before { background: radial-gradient(circle at 50% 80%, rgba(66, 212, 180, 0.045), transparent 28vw), linear-gradient(180deg, rgba(10, 15, 20, 0.9), #0a0f14); }

.layer-grid {
    width: min(1400px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: min(2vw, 28px);
    align-items: center;
    position: relative;
}

.content-block,
.leather-panel,
.depth-label {
    --drift: 0px;
    opacity: 0;
    transform: translate3d(calc(var(--refraction, 0px) + var(--drift)), 28px, 0);
    transition: opacity 1250ms cubic-bezier(0.22, 1, 0.36, 1), transform 1250ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.content-block.in-view,
.leather-panel.in-view,
.depth-label.in-view {
    opacity: 1;
    transform: translate3d(calc(var(--refraction, 0px) + var(--drift)), 0, 0);
}

.headline-block {
    padding: clamp(1rem, 2vw, 2rem) 0;
}

.body-block {
    padding: clamp(1.3rem, 2.4vw, 2.5rem);
    color: #c8e0dc;
    text-shadow: 0 0 18px rgba(66, 212, 180, 0.08);
}

.body-block.narrow {
    max-width: 560px;
}

.headline {
    font-family: var(--display);
    font-size: var(--headline-size);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--headline-color, #42d4b4);
    text-shadow: 0 0 30px rgba(66, 212, 180, 0.18), 0 22px 60px rgba(10, 15, 20, 0.48);
    overflow-wrap: anywhere;
}

.headline span {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px) scaleY(1.06);
}

.headline.animated span {
    animation: character-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.headline.settled {
    animation: headline-breathe 6s ease-in-out infinite;
}

.body-block p {
    max-width: 36rem;
    font-family: var(--body);
    font-size: var(--body-size);
    color: var(--body-color, #c8e0dc);
}

.depth-label,
.panel-kicker {
    font-family: var(--mono);
    font-size: var(--caption-size);
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #42d4b4;
}

.depth-label {
    margin-bottom: 4vh;
    opacity: 0;
}

.leather-panel {
    align-self: end;
    min-height: 11rem;
    padding: clamp(1.4rem, 2.6vw, 2.4rem);
    background-color: #6e3b28;
    background-image:
        radial-gradient(ellipse 5px 3px at 28% 54%, #7a4530 0 48%, transparent 58%),
        radial-gradient(ellipse 4px 2px at 18% 22%, #5e3020 0 58%, transparent 62%),
        radial-gradient(ellipse 3px 4px at 74% 34%, rgba(10, 15, 20, 0.38) 0 52%, transparent 58%),
        radial-gradient(ellipse 2px 3px at 42% 78%, #5e3020 0 50%, transparent 60%),
        radial-gradient(ellipse 6px 3px at 87% 82%, rgba(155, 142, 196, 0.12) 0 42%, transparent 56%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 36%, rgba(10, 15, 20, 0.24));
    border: 1px solid rgba(66, 212, 180, 0.52);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.52), 0 26px 70px rgba(0, 0, 0, 0.38), 0 0 28px rgba(66, 212, 180, 0.08);
    color: #c8e0dc;
}

.leather-panel::before,
.leather-panel::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(155, 142, 196, 0.18);
    pointer-events: none;
}

.leather-panel::after {
    inset: auto 14px 14px auto;
    width: 52px;
    height: 1px;
    border: 0;
    background: #42d4b4;
    box-shadow: 0 0 12px #42d4b4;
    opacity: 0.62;
}

.leather-panel p:not(.panel-kicker) {
    margin-top: 1.1rem;
    font-family: var(--mono);
    font-size: clamp(0.84rem, 1vw, 1rem);
    line-height: 1.55;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.leather-panel.compact { min-height: 8.5rem; }
.leather-panel.wide { min-height: 12.5rem; }

.kelp-motif {
    position: absolute;
    width: clamp(42px, 5vw, 78px);
    height: auto;
    fill: none;
    stroke: #42d4b4;
    stroke-width: 1.15;
    stroke-linecap: round;
    opacity: 0.17;
    filter: drop-shadow(0 0 12px rgba(66, 212, 180, 0.22));
    transform-origin: center bottom;
    will-change: transform;
}

.kelp-a { animation: kelp-sway-a 13s ease-in-out infinite; }
.kelp-b { animation: kelp-sway-b 15s ease-in-out infinite; }
.kelp-c { animation: kelp-sway-c 17s ease-in-out infinite; }

.bio-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #42d4b4 0 18%, rgba(66, 212, 180, 0.42) 36%, transparent 72%);
    box-shadow: 0 0 16px rgba(66, 212, 180, 0.65);
    opacity: 0.16;
    animation: biolume 8s ease-in-out infinite;
    animation-delay: var(--phase);
}

@keyframes character-rise {
    0% { opacity: 0; transform: translateY(14px) scaleY(1.06); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0); }
}

@keyframes headline-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(1.5px); }
}

@keyframes water-shift {
    0% { transform: translate3d(-1.2vw, -1vh, 0) skewX(-1deg); }
    100% { transform: translate3d(1.4vw, 1.1vh, 0) skewX(1deg); }
}

@keyframes kelp-sway-a {
    0%, 100% { transform: translateX(calc(var(--drift, 0px) * 0.35)) rotate(-1.8deg); }
    50% { transform: translateX(calc(var(--drift, 0px) * 0.35 + 8px)) rotate(2deg); }
}

@keyframes kelp-sway-b {
    0%, 100% { transform: translateX(calc(var(--drift, 0px) * 0.35 + 4px)) rotate(2.4deg); }
    50% { transform: translateX(calc(var(--drift, 0px) * 0.35 - 7px)) rotate(-2.2deg); }
}

@keyframes kelp-sway-c {
    0%, 100% { transform: translateX(calc(var(--drift, 0px) * 0.35 - 3px)) rotate(-1.2deg); }
    50% { transform: translateX(calc(var(--drift, 0px) * 0.35 + 5px)) rotate(1.4deg); }
}

@keyframes biolume {
    0%, 100% { opacity: 0.1; transform: scale(0.8); }
    48% { opacity: 0.46; transform: scale(1.8); }
    58% { opacity: 0.24; transform: scale(1); }
}

@media (max-width: 900px) {
    .pressure-layer { padding: 10vh 7vw 14vh; }
    .layer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .content-block,
    .leather-panel,
    .depth-label { grid-column: 1 / -1 !important; }
    .body-block { padding-left: 0; padding-right: 0; }
    .leather-panel { margin-top: 4vh; }
    .kelp-motif { opacity: 0.1; }
}

@media (max-width: 560px) {
    :root { --headline-size: clamp(2.05rem, 12vw, 3.2rem); }
    .depth-indicator { display: none; }
    .pressure-layer { min-height: 92vh; padding: 8vh 1.1rem 12vh; }
    .layer-grid { display: block; }
    .content-block,
    .leather-panel,
    .depth-label { transform: translate3d(0, 24px, 0); }
    .content-block.in-view,
    .leather-panel.in-view,
    .depth-label.in-view { transform: translate3d(0, 0, 0); }
    .headline { letter-spacing: 0.04em; }
    .kelp-motif { display: none; }
    .bio-dot { width: 5px; height: 5px; }
}