/* renai.plus -- surreal watercolor cartography of the heart */

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

:root {
    --cream: #fdf6ec;
    --plum: #e8c9d6;
    --wisteria: #c9a7c6;
    --glacier: #94b3c9;
    --slate: #5b7a91;
    --indigo: #2c3a4a;
    --apricot: #f4a988;
    --lichen: #7c9d6a;

    --font-display: "Oswald", sans-serif;
    --font-sub: "Barlow Condensed", sans-serif;
    --font-body: "Cormorant Garamond", serif;
    --font-mono: "JetBrains Mono", monospace;

    --slide-duration: 1100ms;
    --slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    color: var(--indigo);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.85;
    background: linear-gradient(165deg,
        var(--cream) 0%,
        var(--plum) 28%,
        var(--wisteria) 52%,
        var(--glacier) 78%,
        var(--slate) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* paper-grain overlay, very subtle */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 22% 18%, rgba(253, 246, 236, 0.32), transparent 38%),
        radial-gradient(circle at 78% 64%, rgba(244, 169, 136, 0.10), transparent 42%);
    pointer-events: none;
    z-index: 0;
}

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

/* ---------- cloud field ---------- */

.cloud-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.cloud-puff {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    background: radial-gradient(ellipse, rgba(253, 246, 236, 0.7), transparent 70%);
    border-radius: 50%;
    transform: translateX(-30vw);
    animation:
        cloud-drift var(--dur) linear var(--delay) infinite,
        cloud-breathe 14s ease-in-out var(--delay) infinite;
    will-change: transform;
    filter: blur(2px);
    opacity: 0.55;
}

@keyframes cloud-drift {
    0%   { transform: translateX(-30vw) scale(1); }
    100% { transform: translateX(130vw) scale(1); }
}

@keyframes cloud-breathe {
    0%, 100% { transform: scale(0.96); }
    50%      { transform: scale(1.04); }
}

/* ---------- ascent shell ---------- */

.ascent {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

/* ---------- stanza grid ---------- */

.stanza {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr 1fr auto;
    grid-template-areas:
        "tl tl . tr"
        "tl tl . tr"
        "bl . . ."
        "bl . . br";
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: clamp(1.5rem, 4vh, 4rem);
    overflow: hidden;
    isolation: isolate;
}

.stanza .peak-tl   { grid-area: tl; align-self: start;  justify-self: start;  }
.stanza .cloud-tr  { grid-area: tr; align-self: start;  justify-self: end;    }
.stanza .verse-bl  { grid-area: bl; align-self: end;    justify-self: start;  }
.stanza .marker-br { grid-area: br; align-self: end;    justify-self: end;    }

/* ---------- wash-card slide-reveal ---------- */

.wash-card {
    position: absolute;
    inset: 8% -10% 14% -10%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(-110%);
    transition: transform var(--slide-duration) var(--slide-ease),
                opacity 720ms ease-out;
    opacity: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 95%);
            mask-image: radial-gradient(ellipse at center, #000 55%, transparent 95%);
}

.stanza[data-direction="right"] .wash-card {
    transform: translateX(110%);
}

.stanza.is-revealed .wash-card {
    transform: translateX(0);
    opacity: 0.85;
}

.wash-card__inner {
    width: 100%;
    height: 100%;
    filter: blur(2px);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.36  0 0 0 0 0.42  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"),
        radial-gradient(ellipse at 30% 50%, rgba(232, 201, 214, 0.55), transparent 70%);
    background-size: 220px 220px, cover;
    background-blend-mode: multiply, normal;
}

.wash-card__inner--plum {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.36  0 0 0 0 0.42  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"),
        radial-gradient(ellipse at 28% 55%, rgba(232, 201, 214, 0.58), transparent 72%);
}

.wash-card__inner--wisteria {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.36  0 0 0 0 0.42  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"),
        radial-gradient(ellipse at 68% 52%, rgba(201, 167, 198, 0.55), transparent 72%);
}

.wash-card__inner--glacier {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.36  0 0 0 0 0.42  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"),
        radial-gradient(ellipse at 36% 50%, rgba(148, 179, 201, 0.5), transparent 72%);
}

.wash-card__inner--apricot {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.36  0 0 0 0 0.42  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"),
        radial-gradient(ellipse at 72% 50%, rgba(244, 169, 136, 0.42), transparent 72%);
}

/* ---------- peak-tl (top-left) ---------- */

.peak-tl {
    position: relative;
    z-index: 3;
    max-width: 60ch;
}

.wordmark {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(4rem, 14vw, 11rem);
    letter-spacing: 0.04em;
    color: var(--indigo);
    line-height: 0.9;
    text-transform: lowercase;
    text-shadow: 0 1px 0 rgba(253, 246, 236, 0.4);
    display: inline-block;
    position: relative;
}

.wordmark__plus {
    color: var(--lichen);
    font-weight: 300;
}

.wordmark::before {
    content: "";
    position: absolute;
    inset: -18% -8% -8% -8%;
    background: radial-gradient(ellipse at 30% 50%, rgba(232, 201, 214, 0.35), transparent 70%);
    filter: blur(28px);
    z-index: -1;
}

.wordmark__sub {
    margin-top: 0.8rem;
    font-family: var(--font-sub);
    font-weight: 200;
    font-style: italic;
    font-size: clamp(0.85rem, 1.6vw, 1.1rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.8;
}

.peak-altitude {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.7;
    margin-bottom: 0.6rem;
}

.peak-title {
    font-family: var(--font-sub);
    font-weight: 200;
    font-style: italic;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--indigo);
    line-height: 1.15;
    max-width: 18ch;
}

/* ---------- cloud-tr (top-right) ---------- */

.cloud-tr {
    position: relative;
    z-index: 3;
    max-width: 34ch;
    text-align: right;
    padding: clamp(1rem, 2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem);
    border-radius: 28px 18px 32px 22px;
}

.cloud-tr::before {
    content: "";
    position: absolute;
    inset: -22% -12%;
    background: radial-gradient(ellipse, rgba(253, 246, 236, 0.55), transparent 70%);
    filter: blur(28px);
    z-index: -1;
}

.cloud-tr__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.cloud-tr__title {
    font-family: var(--font-sub);
    font-weight: 200;
    font-style: italic;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--indigo);
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.cloud-tr__def {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--indigo);
    max-width: 32ch;
    margin-left: auto;
    opacity: 0.88;
}

/* keep wordmark stanza-i cloud not duplicating with stanza-i (already different content) */

/* ---------- verse-bl (bottom-left) ---------- */

.verse-bl {
    position: relative;
    z-index: 3;
    max-width: 38ch;
    padding: clamp(1rem, 2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem) clamp(1rem, 2vw, 1.6rem) 0;
    border-radius: 26px 22px 28px 18px;
}

.verse-bl::before {
    content: "";
    position: absolute;
    inset: -18% -16% -18% -10%;
    background: radial-gradient(ellipse, rgba(201, 167, 198, 0.32), transparent 70%);
    filter: blur(28px);
    z-index: -1;
}

.verse {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--indigo);
    max-width: 38ch;
    text-transform: lowercase;
}

.verse em {
    font-style: italic;
}

/* ---------- marker-br (bottom-right) ---------- */

.marker-br {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.6rem 1.1rem;
    min-width: 200px;
    height: 56px;
}

.marker-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.marker-text {
    position: relative;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
    white-space: nowrap;
}

.marker-text--summit {
    color: var(--lichen);
}

.marker-jp {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.marker-sep {
    opacity: 0.5;
    padding: 0 0.4em;
}

/* ---------- ridges ---------- */

.ridges {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(140px, 22vh, 260px);
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.ridge {
    position: absolute;
    left: -2%;
    right: -2%;
    width: 104%;
    bottom: 0;
}

.ridge--3 { height: 60%; bottom: 32%; opacity: 0.9; }
.ridge--2 { height: 72%; bottom: 14%; opacity: 0.95; }
.ridge--1 { height: 88%; bottom: 0;   opacity: 1;    }

/* ---------- interlude (ampersand-mountain) ---------- */

.interlude {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(2rem, 6vh, 6rem) 0;
}

.ampersand-mountain {
    width: 64px;
    height: 64px;
    opacity: 0.9;
}

/* ---------- colophon ---------- */

.colophon {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: clamp(3rem, 8vh, 6rem) 1.5rem clamp(2rem, 5vh, 4rem);
}

.colophon__line {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--cream);
    opacity: 0.75;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 12px rgba(44, 58, 74, 0.4);
}

/* ---------- alternating direction stagger ---------- */

.stanza--i   { background-blend-mode: normal; }
.stanza--ii  { padding-top: clamp(3rem, 8vw, 8rem); }
.stanza--iii { padding-top: clamp(3rem, 8vw, 8rem); }
.stanza--iv  { padding-top: clamp(3rem, 8vw, 8rem); padding-bottom: clamp(4rem, 10vw, 10rem); }

/* before reveal, verse / cloud / peak / marker breathe-in opacity */
.stanza .peak-tl,
.stanza .cloud-tr,
.stanza .verse-bl,
.stanza .marker-br {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 900ms ease-out, transform 900ms var(--slide-ease);
}

.stanza.is-revealed .peak-tl,
.stanza.is-revealed .cloud-tr,
.stanza.is-revealed .verse-bl,
.stanza.is-revealed .marker-br {
    opacity: 1;
    transform: translateY(0);
}

.stanza.is-revealed .cloud-tr   { transition-delay: 240ms; }
.stanza.is-revealed .verse-bl   { transition-delay: 460ms; }
.stanza.is-revealed .marker-br  { transition-delay: 680ms; }

/* stanza i loads pre-revealed so the wordmark is visible without scroll */
.stanza--i .peak-tl {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- responsive: <760px collapses Z into single descending diagonal ---------- */

@media (max-width: 760px) {
    .stanza {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "tl"
            "tr"
            "bl"
            "br";
        row-gap: clamp(1.5rem, 5vh, 3rem);
        padding: clamp(3rem, 10vw, 5rem) clamp(1.2rem, 5vw, 2rem);
        min-height: auto;
        padding-bottom: clamp(8rem, 26vh, 14rem);
    }

    .stanza .peak-tl,
    .stanza .cloud-tr,
    .stanza .verse-bl,
    .stanza .marker-br {
        justify-self: start;
    }

    /* preserve a slight descending offset per row for the "diagonal" feel */
    .stanza .cloud-tr  { padding-left: 8%;  text-align: left; }
    .stanza .verse-bl  { padding-left: 16%; }
    .stanza .marker-br { margin-left: 24%;  }

    .cloud-tr__def { margin-left: 0; }

    .ridges {
        height: clamp(120px, 18vh, 200px);
    }

    .interlude {
        padding: clamp(1.5rem, 5vh, 3rem) 0;
    }
}

@media (max-width: 480px) {
    .wordmark {
        font-size: clamp(3.4rem, 18vw, 6rem);
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .cloud-puff {
        animation: none;
        transform: translateX(0);
        opacity: 0.35;
    }

    html {
        scroll-behavior: auto;
    }

    .wash-card,
    .stanza[data-direction="right"] .wash-card {
        transform: translateX(0);
        opacity: 0;
        transition: opacity 220ms ease-out;
    }

    .stanza.is-revealed .wash-card {
        opacity: 0.7;
    }

    .stanza .peak-tl,
    .stanza .cloud-tr,
    .stanza .verse-bl,
    .stanza .marker-br {
        transform: none;
        transition: opacity 220ms ease-out;
    }

    .stanza.is-revealed .cloud-tr,
    .stanza.is-revealed .verse-bl,
    .stanza.is-revealed .marker-br {
        transition-delay: 0ms;
    }
}