/* ==========================================================================
   RRIPPL.com — chromed watercolor, organic-flow, kinetic-animated
   palette: chrome-metallic + aqua bleed + indigo trace
   ========================================================================== */

:root {
    --obsidian: #0B0D10;
    --pearl: #E9ECEF;
    --graphite: #9CA6B2;
    --tarnish: #5C6573;
    --mercury: #C7D2DC;
    --platinum: #D9C9B7;
    --aqua: #3DA9C2;
    --indigo: #7E5B8A;

    --ease-bead: cubic-bezier(0.16, 1.18, 0.32, 1);
    --ease-bloom: cubic-bezier(0.4, 0, 0.2, 1);

    --scroll-progress: 0;
    --scroll-velocity: 0;
    --wave-amp: 120;
    --cursor-x: 50vw;
    --cursor-y: 50vh;
}

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

html, body {
    background: var(--obsidian);
    color: var(--pearl);
    overflow-x: hidden;
    font-family: 'Instrument Serif', serif;
    cursor: none;
}

body {
    position: relative;
    min-height: 100vh;
}

.defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ===== Circuit substrate floor — visible behind everything ===== */
.circuit-floor {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.16;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ===== Chromatic-aberration glyph drift ===== */
.glyph-drift {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.drift-glyph {
    position: absolute;
    font-family: 'Fraunces', serif;
    font-size: 6px;
    color: var(--pearl);
    text-shadow:
        1px 0 0 rgba(255, 64, 80, 0.5),
        -1px 0 0 rgba(64, 255, 240, 0.5);
    opacity: 0.65;
    will-change: transform;
}

/* ===== Chrome cursor trail ===== */
.cursor-trail {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}

.trail-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--pearl), var(--mercury) 45%, var(--tarnish) 85%, var(--obsidian));
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: blur(0.4px);
    will-change: transform, opacity;
}

.trail-dot.head {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 18px rgba(233, 236, 239, 0.45), 0 0 36px rgba(61, 169, 194, 0.18);
}

/* ===== Navigation chrome bead ===== */
.bead-stage {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 22px;
    height: 60vh;
    z-index: 60;
    pointer-events: none;
}

.bead-stage svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ===== Layout: continuous narrative, six movements ===== */
#stage {
    position: relative;
    z-index: 2;
}

.movement {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

/* ===== Movement I — The Drop ===== */
.movement-drop {
    height: 100vh;
}

.pond {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 60%, rgba(92, 101, 115, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 38%, rgba(199, 210, 220, 0.05) 0%, transparent 60%),
        var(--obsidian);
    z-index: 1;
}

.drop-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#droplet {
    will-change: transform;
}

.impact-ring {
    fill: none;
    stroke: var(--pearl);
    stroke-width: 1.2;
    opacity: 0;
    filter: url(#watercolor-soft);
    transform-origin: center;
    will-change: transform, opacity;
}

.impact-ring.aqua {
    stroke: var(--aqua);
}

.wordmark {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-family: 'Fraunces', serif;
    font-size: clamp(4rem, 22vw, 18rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
    color: var(--pearl);
    user-select: none;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    text-shadow: 0 0 60px rgba(199, 210, 220, 0.18), 0 0 120px rgba(61, 169, 194, 0.08);
}

.wm-r {
    display: inline-block;
    font-variation-settings: 'wght' 500, 'opsz' 144, 'SOFT' 50, 'slnt' 0;
    transition: font-variation-settings 0.06s linear;
    will-change: font-variation-settings, transform;
}

#wmR1 {
    font-variation-settings: 'wght' 100, 'opsz' 144, 'SOFT' 100, 'slnt' 0;
}

#wmR2 {
    font-variation-settings: 'wght' 900, 'opsz' 144, 'SOFT' 0, 'slnt' -3;
}

.wm-rest {
    font-variation-settings: 'wght' 380, 'opsz' 144, 'SOFT' 30, 'slnt' 0;
    background: linear-gradient(90deg, var(--pearl) 0%, var(--mercury) 35%, var(--platinum) 65%, var(--graphite) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.drop-meta {
    position: absolute;
    left: 6vw;
    bottom: 6vh;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--tarnish);
    text-transform: lowercase;
}

.drop-meta .meta-line {
    opacity: 0.75;
}

/* ===== Movement II — First Concentric ===== */
.movement-first {
    padding: 12vh 0 14vh;
}

.wave-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
}

.wave-headline {
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 0.01em;
    font-weight: 400;
}

.trough-text {
    position: relative;
    z-index: 4;
    max-width: 560px;
    margin: 56vh auto 0;
    padding: 0 6vw;
    text-align: left;
}

.first-trough {
    margin-top: 60vh;
    margin-left: 12vw;
}

.caption-tag {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--indigo);
    text-transform: lowercase;
    margin-bottom: 14px;
    opacity: 0.85;
}

.caption-tag + .caption-tag {
    margin-top: 14px;
    color: var(--tarnish);
}

.body-narrative {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.55;
    color: var(--graphite);
    letter-spacing: -0.005em;
}

.body-narrative em {
    color: var(--pearl);
    font-style: italic;
}

.wash {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    filter: url(#watercolor-soft);
    will-change: transform, opacity;
}

.wash-warm-1 {
    width: 70vw;
    height: 70vh;
    left: -10vw;
    top: 20vh;
    background: radial-gradient(circle at 40% 50%, rgba(217, 201, 183, 0.65) 0%, rgba(156, 166, 178, 0.3) 45%, transparent 75%);
    border-radius: 50%;
}

.wash-cool-1 {
    width: 75vw;
    height: 75vh;
    right: -15vw;
    top: 10vh;
    background: radial-gradient(circle at 55% 45%, rgba(199, 210, 220, 0.55) 0%, rgba(126, 91, 138, 0.28) 50%, transparent 78%);
    border-radius: 50%;
}

.wash-warm-2 {
    width: 80vw;
    height: 80vh;
    left: -20vw;
    top: 5vh;
    background: radial-gradient(circle at 40% 50%, rgba(217, 201, 183, 0.45) 0%, rgba(156, 166, 178, 0.22) 50%, transparent 80%);
    border-radius: 50%;
}

.wash-cool-2 {
    width: 80vw;
    height: 80vh;
    right: -20vw;
    bottom: 5vh;
    background: radial-gradient(circle at 55% 45%, rgba(199, 210, 220, 0.42) 0%, rgba(126, 91, 138, 0.2) 50%, transparent 80%);
    border-radius: 50%;
}

/* ===== Movement III — Interference ===== */
.movement-interference {
    padding: 14vh 0 16vh;
    min-height: 110vh;
}

.interference-pair {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    padding: 60vh 8vw 0;
    align-items: center;
}

.pair-a, .pair-b {
    max-width: 440px;
    transition: opacity 0.9s var(--ease-bloom), transform 0.9s var(--ease-bloom);
}

.pair-a {
    transform: translateY(-4vh);
}

.pair-b {
    transform: translateY(8vh);
    opacity: 0.55;
}

.pair-b.revealed {
    opacity: 1;
}

.interference-node {
    fill: var(--pearl);
    opacity: 0;
    filter: url(#bloom-fade);
    will-change: opacity, r;
}

/* ===== Movement IV — Standing Wave ===== */
.movement-standing {
    padding: 16vh 0 16vh;
    min-height: 140vh;
}

.cymatic-node {
    fill: var(--pearl);
    opacity: 0.92;
    filter: drop-shadow(0 0 4px rgba(233, 236, 239, 0.55));
}

.standing-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 36px;
    padding: 12vh 8vw;
}

.node-block {
    max-width: 320px;
    padding: 22px 24px;
}

.node-block[data-node="1"] {
    grid-column: 2 / span 4;
    grid-row: 1 / span 1;
}

.node-block[data-node="2"] {
    grid-column: 8 / span 4;
    grid-row: 2 / span 1;
}

.node-block[data-node="3"] {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
}

.node-block[data-node="4"] {
    grid-column: 7 / span 5;
    grid-row: 4 / span 1;
}

.node-block[data-node="5"] {
    grid-column: 4 / span 5;
    grid-row: 5 / span 1;
}

.body-technical {
    font-family: 'Instrument Serif', serif;
    font-style: normal;
    font-size: 18px;
    line-height: 1.65;
    color: var(--pearl);
    letter-spacing: -0.005em;
}

.body-technical sup {
    font-size: 0.65em;
    color: var(--mercury);
}

/* ===== Movement V — Decay ===== */
.movement-decay {
    padding: 14vh 0 18vh;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--obsidian) 0%, #0e1014 100%);
}

.decay-final {
    position: relative;
    z-index: 5;
    padding: 30vh 10vw 0;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.decay-headline {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'wght' 200, 'opsz' 144, 'SOFT' 80, 'slnt' 0;
    font-size: clamp(2rem, 8vw, 7rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--graphite);
    margin: 36px 0;
    text-shadow: 0 0 36px rgba(156, 166, 178, 0.16);
}

/* ===== Movement VI — Mirror Coda ===== */
.movement-coda {
    min-height: 80vh;
    padding: 8vh 0 18vh;
    background: linear-gradient(180deg, #0e1014 0%, var(--obsidian) 70%, #050608 100%);
}

.wave-canvas.mirrored {
    transform: scaleY(-1);
}

.coda-final {
    position: relative;
    z-index: 5;
    padding: 40vh 0 0;
    text-align: center;
}

.coda-stamp {
    color: var(--tarnish);
    opacity: 0.6;
    letter-spacing: 0.18em;
    font-size: 12px;
}

/* ===== Concentric impact rings, runtime ===== */
.impact-ring {
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

@keyframes impact-bloom {
    0%   { opacity: 0; r: 4; stroke-width: 2.4; }
    18%  { opacity: 0.95; }
    100% { opacity: 0; r: 480; stroke-width: 0.4; }
}

@keyframes wm-breathe {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(0.04vw); }
}

#wmR1 { animation: wm-breathe 5.6s var(--ease-bloom) infinite; }
#wmR2 { animation: wm-breathe 5.6s var(--ease-bloom) -2.8s infinite reverse; }

@keyframes wash-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    50%      { transform: translate(2vw, -1vh) scale(1.04); opacity: 1; }
}

.wash {
    animation: wash-drift 24s var(--ease-bloom) infinite;
}

.wash-cool-1 { animation-delay: -12s; }
.wash-warm-2 { animation-delay: -6s; animation-duration: 30s; }
.wash-cool-2 { animation-delay: -18s; animation-duration: 28s; }

/* ===== Fade-reveal helper ===== */
.fade-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s var(--ease-bloom), transform 0.9s var(--ease-bloom);
}

.fade-reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Responsiveness (chrome-fluid) ===== */
@media (max-width: 880px) {
    .interference-pair {
        grid-template-columns: 1fr;
        padding-top: 50vh;
    }

    .standing-grid {
        grid-template-columns: 1fr;
    }

    .node-block,
    .node-block[data-node="1"],
    .node-block[data-node="2"],
    .node-block[data-node="3"],
    .node-block[data-node="4"],
    .node-block[data-node="5"] {
        grid-column: 1;
        grid-row: auto;
        max-width: 100%;
    }

    .first-trough {
        margin-left: 6vw;
    }

    .bead-stage {
        right: 12px;
        width: 14px;
    }
}