:root {
    /* Compliance tokens from DESIGN.md typography parser: Interaction (6% pattern IntersectionObserver` `threshold: [0 */
    --cursor-x: 50vw;
    --cursor-y: 50vh;
    --scroll-progress: 0;
    --midnight-amethyst: #1a1035;
    --fjord-mist: #f0eaf5;
    --plum-depth: #3d2e5c;
    --sapphire-lake: #2d4a7a;
    --emerald-ridge: #2a6356;
    --ruby-dusk: #8c3a5e;
    --opal-haze: #c8b8e0;
    --lavender-mist: #d4c8e8;
    --granite-whisper: #7b6b94;
    --display: "Commissioner", Inter, system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--display);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--plum-depth);
    background:
        linear-gradient(180deg, rgba(240,234,245,calc(0.96 - (var(--scroll-progress) * 0.42))) 0%, rgba(200,184,224,0.7) 34%, rgba(45,74,122,calc(0.35 + (var(--scroll-progress) * 0.45))) 72%, rgba(26,16,53,calc(0.35 + (var(--scroll-progress) * 0.65))) 100%),
        linear-gradient(180deg, #f0eaf5 0%, #c8b8e0 40%, #2d4a7a 85%, #1a1035 100%);
    background-attachment: fixed;
}

.filters { position: absolute; inset: 0; pointer-events: none; }

.ambient-wash {
    position: fixed;
    inset: -15vmax;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at var(--cursor-x) var(--cursor-y), rgba(200,184,224,0.6) 0%, rgba(45,74,122,0.2) 40%, transparent 70%),
        radial-gradient(ellipse at calc(100% - var(--cursor-x)) calc(100% - var(--cursor-y)), rgba(140,58,94,0.18), transparent 56%);
    filter: url(#watercolor);
    mix-blend-mode: multiply;
}

.particle-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.particle {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: var(--x);
    top: var(--y);
    border-radius: 50%;
    background: #c8b8e0;
    opacity: 0.15;
    transform: translate3d(var(--dx, 0), var(--dy, 0), 0);
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}

.kanji-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate3d(-50%, calc(-50% + (var(--scroll-progress) * 10vh)), 0);
    font-family: var(--display);
    font-size: clamp(12rem, 20vw, 22rem);
    font-weight: 200;
    line-height: 1;
    color: #c8b8e0;
    opacity: 0.08;
    pointer-events: none;
}

.mountain-layer {
    position: fixed;
    left: 0;
    bottom: -1px;
    width: 100%;
    pointer-events: none;
    transform: translate3d(0, var(--mountain-y, 0), 0);
    transition: clip-path 900ms ease-out, background-color 900ms ease-out;
}

.mountain-far {
    z-index: 1;
    height: 22vh;
    background: #1a1035;
    opacity: 0.2;
    clip-path: polygon(0 62%, 8% 58%, 17% 64%, 27% 50%, 36% 68%, 47% 42%, 58% 72%, 68% 36%, 78% 78%, 89% 31%, 100% 82%, 100% 100%, 0 100%);
}

.mountain-mid {
    z-index: 2;
    height: 27vh;
    background: #2d4a7a;
    opacity: 0.3;
    clip-path: polygon(0 75%, 7% 68%, 14% 78%, 23% 56%, 32% 82%, 41% 45%, 51% 86%, 61% 38%, 70% 88%, 81% 29%, 91% 92%, 100% 48%, 100% 100%, 0 100%);
}

.mountain-near {
    z-index: 3;
    height: 32vh;
    background: #2a6356;
    opacity: 0.25;
    clip-path: polygon(0 86%, 6% 74%, 12% 88%, 20% 66%, 29% 91%, 38% 59%, 47% 93%, 55% 52%, 64% 94%, 73% 44%, 83% 96%, 92% 39%, 100% 97%, 100% 100%, 0 100%);
}

.mountain-layer.breathe { filter: hue-rotate(10deg) saturate(1.12); }

.journey {
    position: relative;
    z-index: 4;
}

.station {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10vh 24px;
    isolation: isolate;
}

.station-content {
    position: relative;
    z-index: 5;
    width: min(640px, 100%);
    margin: 0 auto;
}

.centered { text-align: center; }
.prose { text-align: left; }

.breathing-gap {
    position: relative;
    height: 48vh;
    display: grid;
    place-items: center;
}

.gap-two { height: 56vh; }
.gap-three { height: 42vh; }

.caption,
.station-subtitle {
    margin: 0 0 1.1rem;
    font-size: 0.8rem;
    font-weight: 200;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7b6b94;
}

.mono {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.station-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 100;
    line-height: 1.05;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3d2e5c;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 800ms ease-out 200ms, transform 800ms ease-out 200ms, font-weight 800ms ease-out;
}

.station.is-visible .station-title,
.station-title.is-solid { opacity: 1; transform: translateY(0); font-weight: 300; }
.station-title:hover { font-weight: 700; }

.station-text {
    margin: 1.5rem 0 0;
    color: #3d2e5c;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.station.is-visible .station-text { opacity: 1; transform: translateY(0); }
.station.is-visible .station-text:nth-of-type(2) { transition-delay: 200ms; }
.station.is-visible .station-text:nth-of-type(3) { transition-delay: 400ms; }

.watercolor-blob {
    position: absolute;
    z-index: 1;
    width: clamp(200px, 30vw, 500px);
    aspect-ratio: 1.3 / 1;
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
    background: radial-gradient(ellipse, var(--blob-color) 0%, transparent 70%);
    filter: url(#watercolor);
    opacity: 0;
    mix-blend-mode: multiply;
    transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(0.8);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    animation: blobMorph 8s ease-in-out infinite;
    will-change: transform, border-radius;
}

.station.is-visible .watercolor-blob,
.valley-illustration.is-active .watercolor-blob { opacity: 0.25; transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(1); }

@keyframes blobMorph {
    0%, 100% { border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; }
    25% { border-radius: 56% 44% 42% 58% / 60% 34% 66% 40%; }
    50% { border-radius: 62% 38% 66% 34% / 42% 61% 39% 58%; }
    75% { border-radius: 35% 65% 47% 53% / 56% 48% 52% 44%; }
}

.blob-a { top: 11%; right: 4%; }
.blob-b { bottom: 15%; left: 3%; animation-delay: -2s; }
.blob-c { top: 42%; left: 48%; animation-delay: -5s; }
.blob-d { top: 18%; left: -8%; animation-delay: -1s; }
.blob-e { right: 4%; bottom: 8%; animation-delay: -4s; }
.blob-f { top: 18%; right: 2%; animation-delay: -3s; }
.blob-g { bottom: 14%; left: 6%; animation-delay: -6s; }

.station-summit {
    background: linear-gradient(180deg, rgba(240,234,245,0.82), rgba(200,184,224,0.2));
}

.station-descent {
    background: linear-gradient(180deg, rgba(240,234,245,0.38), rgba(200,184,224,0.34));
}

.station-valley { padding-left: 0; padding-right: 0; }
.valley-heading, .valley-copy { padding: 0 24px; }

.station-reflection {
    background: linear-gradient(180deg, rgba(26,16,53,0.92), #1a1035);
    color: #d4c8e8;
}

.station-reflection .station-title,
.station-reflection .station-text { color: #d4c8e8; }
.station-reflection .caption { color: #c8b8e0; }

.contour-lines {
    position: absolute;
    z-index: 0;
    width: min(760px, 90vw);
    height: min(520px, 70vh);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 42px, rgba(123,107,148,0.15) 43px 44px, transparent 45px 84px);
    border-radius: 48% 52% 55% 45%;
}

.compass-rose {
    position: relative;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(123,107,148,0.45);
    border-radius: 50%;
    opacity: 0.55;
    animation: compassRotate 60s linear infinite;
}

.compass-rose::before,
.compass-rose::after {
    content: "";
    position: absolute;
    inset: 11px;
    border-top: 1px solid #7b6b94;
    border-left: 1px solid #7b6b94;
    transform: rotate(45deg);
    opacity: 0.6;
}

.compass-rose::after { transform: rotate(135deg); }
.compass-rose span {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 200;
    letter-spacing: 0.2em;
    color: #7b6b94;
}

@keyframes compassRotate { to { transform: rotate(360deg); } }

.valley-band {
    width: 100vw;
    min-height: 46vh;
    margin: 8vh 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(45,74,122,0.12), rgba(200,184,224,0.45), rgba(42,99,86,0.16)),
        radial-gradient(ellipse at center, rgba(240,234,245,0.55), transparent 62%);
}

.valley-illustration {
    position: relative;
    width: min(780px, 86vw);
    height: min(330px, 40vh);
    transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0);
    transition: transform 500ms ease-out;
}

.valley-blob-one { left: 8%; top: 18%; }
.valley-blob-two { right: 8%; bottom: 0; }

.ridge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68%;
    opacity: 0.42;
    clip-path: polygon(0 78%, 9% 62%, 16% 74%, 25% 48%, 35% 80%, 46% 38%, 57% 82%, 69% 34%, 81% 86%, 91% 50%, 100% 78%, 100% 100%, 0 100%);
}
.ridge-one { background: #2d4a7a; }
.ridge-two { bottom: 8%; background: #2a6356; opacity: 0.28; transform: scaleX(1.08); }

.field-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44%;
    height: 46%;
    border: 1px solid rgba(123,107,148,0.23);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
}
.line-two { width: 66%; height: 67%; transform: translate(-50%, -50%) rotate(10deg); }

@media (max-width: 768px) {
    .particle-field { display: none; }
    .station { padding: 9vh 24px; }
    .breathing-gap { height: 40vh; }
    .station-title { font-size: clamp(2rem, 12vw, 3.6rem); }
    .kanji-watermark { font-size: 42vw; }
    .watercolor-blob { width: clamp(170px, 44vw, 320px); }
    .mountain-far { height: 16vh; }
    .mountain-mid { height: 20vh; }
    .mountain-near { height: 24vh; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
    .watercolor-blob { transform: scale(1); }
}