/* ============================================
   chloe.cx -- Dark-Mode Watercolor Nocturne
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --deep-night: #1a1525;
    --midnight-iris: #2a2240;
    --petal-coral: #e87461;
    --seafoam-teal: #6ec6b8;
    --wisteria-mist: #8b7ca0;
    --moonpaper: #f0ebe3;
    --candlelight: #e8d5b7;
    --ink-wash: #9a8fb0;
    --plum-secondary: #5e4b6e;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    font-size: 16px;
}

body {
    background-color: var(--deep-night);
    color: var(--moonpaper);
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Paper Texture Overlay --- */
.paper-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    filter: url(#paper-texture);
    background: var(--moonpaper);
    mix-blend-mode: overlay;
}

/* --- Navigation Dots --- */
.spread-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    z-index: 900;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--petal-coral);
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: dot-breathe 3s ease-in-out infinite;
    padding: 0;
}

.nav-dot.active {
    background-color: var(--petal-coral);
}

.nav-dot:hover .nav-label {
    opacity: 1;
    transform: translateX(0);
}

.nav-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.14em;
    color: var(--ink-wash);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

@keyframes dot-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* --- Spread System --- */
.spread {
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

.spread-grid {
    display: grid;
    grid-template-columns: [bleed-start] 1fr [content-start] repeat(8, minmax(0, 7.5rem)) [content-end] 1fr [bleed-end];
    row-gap: clamp(3rem, 6vh, 5rem);
    min-height: 100vh;
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
}

/* ============================================
   SPREAD 1: THE COVER
   ============================================ */
.spread-cover {
    display: flex;
    align-items: center;
    background: var(--deep-night);
}

.spread-cover .spread-grid {
    align-content: center;
    padding: 2rem 0;
}

/* Watercolor Washes */
.wash {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

.wash-coral {
    width: clamp(300px, 50vw, 650px);
    height: clamp(300px, 50vw, 650px);
    top: 5%;
    left: 5%;
    border-radius: 42% 58% 65% 35% / 55% 40% 60% 45%;
    background: radial-gradient(ellipse at 40% 45%, rgba(232, 116, 97, 0.5) 0%, rgba(232, 116, 97, 0.2) 40%, transparent 70%);
    filter: blur(40px) url(#watercolor-distort);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.3);
    animation: wash-bloom 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards,
               wash-drift-1 25s ease-in-out 2s infinite;
}

.wash-teal {
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    bottom: 10%;
    right: 10%;
    border-radius: 58% 42% 35% 65% / 40% 60% 45% 55%;
    background: radial-gradient(ellipse at 55% 50%, rgba(110, 198, 184, 0.5) 0%, rgba(110, 198, 184, 0.2) 40%, transparent 70%);
    filter: blur(40px) url(#watercolor-distort);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.3);
    animation: wash-bloom 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards,
               wash-drift-2 30s ease-in-out 2s infinite;
}

@keyframes wash-bloom {
    0% {
        opacity: 0;
        transform: scale(0.3);
        filter: blur(20px) url(#watercolor-distort);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(40px) url(#watercolor-distort);
    }
}

@keyframes wash-drift-1 {
    0%, 100% {
        border-radius: 42% 58% 65% 35% / 55% 40% 60% 45%;
        transform: translate(0, 0) scale(1);
    }
    33% {
        border-radius: 50% 50% 55% 45% / 48% 52% 50% 50%;
        transform: translate(15px, -10px) scale(1.03);
    }
    66% {
        border-radius: 45% 55% 60% 40% / 52% 45% 55% 48%;
        transform: translate(-10px, 8px) scale(0.97);
    }
}

@keyframes wash-drift-2 {
    0%, 100% {
        border-radius: 58% 42% 35% 65% / 40% 60% 45% 55%;
        transform: translate(0, 0) scale(1);
    }
    33% {
        border-radius: 52% 48% 40% 60% / 45% 55% 50% 50%;
        transform: translate(-12px, 8px) scale(1.04);
    }
    66% {
        border-radius: 55% 45% 38% 62% / 42% 58% 48% 52%;
        transform: translate(8px, -12px) scale(0.96);
    }
}

/* Wash hover intensification */
.wash:hover {
    opacity: 1;
    filter: blur(35px) url(#watercolor-distort);
    transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Fireflies */
.fireflies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.firefly {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--candlelight);
    opacity: 0;
    animation: firefly-pulse var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes firefly-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.8; }
}

@keyframes firefly-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Masthead */
.masthead {
    grid-column: content-start / span 4;
    position: relative;
    z-index: 5;
    align-self: center;
}

.masthead-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6.5rem);
    letter-spacing: -0.02em;
    color: var(--moonpaper);
    line-height: 1.1;
    position: relative;
    display: inline-block;
}

.masthead-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.masthead-title .char.revealed {
    opacity: 1;
    transform: translateY(0);
}

.masthead-title:hover .char {
    animation: letter-wobble 0.4s ease-in-out;
}

@keyframes letter-wobble {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-1deg); }
    75% { transform: translateY(1px) rotate(1deg); }
}

/* Masthead Underline */
.masthead-underline {
    height: 3px;
    background: var(--seafoam-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-top: 0.5rem;
    width: 100%;
}

.masthead-underline.drawn {
    transform: scaleX(1);
}

/* Tagline */
.tagline {
    grid-column: 6 / content-end;
    align-self: end;
    justify-self: end;
    z-index: 5;
    margin-top: 2rem;
}

.tagline p {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--candlelight);
    opacity: 0;
    transform: rotate(5deg);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.tagline p.revealed {
    opacity: 1;
    transform: rotate(0deg);
}

.tagline p:hover {
    animation: tagline-wobble 0.4s ease-in-out;
}

@keyframes tagline-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
}

/* ============================================
   SPREAD 2: THE DOUBLE-PAGE FEATURE
   ============================================ */
.spread-feature {
    background: var(--deep-night);
}

.spread-feature .spread-grid {
    align-items: center;
    min-height: 100vh;
}

.feature-left {
    grid-column: bleed-start / span 5;
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wash-feature-coral {
    width: clamp(200px, 30vw, 400px);
    height: clamp(250px, 35vw, 450px);
    border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%;
    background: radial-gradient(ellipse at 45% 40%, rgba(232, 116, 97, 0.55) 0%, rgba(232, 116, 97, 0.15) 50%, transparent 75%);
    filter: blur(35px) url(#watercolor-distort);
    mix-blend-mode: screen;
    position: absolute;
    top: 15%;
    left: 15%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1.2s ease, transform 1.2s ease, filter 0.6s ease;
}

.wash-feature-teal {
    width: clamp(150px, 22vw, 300px);
    height: clamp(180px, 28vw, 350px);
    border-radius: 48% 52% 42% 58% / 52% 48% 55% 45%;
    background: radial-gradient(ellipse at 55% 55%, rgba(110, 198, 184, 0.5) 0%, rgba(110, 198, 184, 0.15) 50%, transparent 75%);
    filter: blur(30px) url(#watercolor-distort);
    mix-blend-mode: screen;
    position: absolute;
    bottom: 20%;
    left: 30%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1.2s ease 0.2s, transform 1.2s ease 0.2s, filter 0.6s ease;
}

.wash-feature-violet {
    width: clamp(120px, 18vw, 250px);
    height: clamp(120px, 18vw, 250px);
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(90, 75, 110, 0.45) 0%, rgba(90, 75, 110, 0.1) 50%, transparent 75%);
    filter: blur(25px) url(#watercolor-distort);
    mix-blend-mode: screen;
    position: absolute;
    top: 35%;
    right: 20%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1.2s ease 0.4s, transform 1.2s ease 0.4s, filter 0.6s ease;
}

.spread-feature.in-view .wash-feature-coral,
.spread-feature.in-view .wash-feature-teal,
.spread-feature.in-view .wash-feature-violet {
    opacity: 1;
    transform: scale(1);
}

.wash-feature-coral:hover,
.wash-feature-teal:hover,
.wash-feature-violet:hover {
    filter: blur(25px) url(#watercolor-distort);
}

/* Gutter Rule */
.gutter-rule {
    grid-column: 5 / 6;
    width: 1px;
    height: 70%;
    background: rgba(94, 75, 110, 0.3);
    justify-self: center;
    align-self: center;
}

/* Feature Right */
.feature-right {
    grid-column: 6 / content-end;
    padding: 3rem 2rem 3rem 2rem;
    align-self: center;
}

.feature-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.spread-feature.in-view .feature-text {
    opacity: 1;
    transform: translateY(0);
}

.feature-text p {
    margin-bottom: 1.5em;
    color: var(--moonpaper);
    text-align: justify;
}

/* Drop Cap */
.drop-cap {
    float: left;
    font-family: 'Caveat', cursive;
    font-size: 3.2em;
    line-height: 0.8;
    color: var(--petal-coral);
    margin-right: 0.1em;
    margin-top: 0.05em;
    shape-outside: circle(50%);
    position: relative;
}

.drop-cap::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle, rgba(232, 116, 97, 0.15) 0%, transparent 70%);
    filter: blur(8px);
    z-index: -1;
    border-radius: 50%;
}

/* ============================================
   SPREAD 3: THE MARGINALIA SPREAD
   ============================================ */
.spread-marginalia {
    background: var(--deep-night);
}

.spread-marginalia .spread-grid {
    align-items: center;
    min-height: 100vh;
    padding: 4rem 0;
}

.margin-left {
    grid-column: bleed-start / content-start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.margin-right {
    grid-column: content-end / bleed-end;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Botanical SVGs */
.botanical {
    width: 100%;
    max-width: 160px;
    height: auto;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.spread-marginalia.in-view .botanical {
    opacity: 1;
}

.draw-path {
    stroke-dasharray: var(--path-length, 500);
    stroke-dashoffset: var(--path-length, 500);
    transition: stroke-dashoffset 2s ease-out;
    fill: none;
}

.spread-marginalia.in-view .draw-path {
    stroke-dashoffset: 0;
}

/* Marginalia Text */
.marginalia-text {
    grid-column: 3 / 9;
    padding: 2rem 1rem;
}

.section-heading {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    letter-spacing: 0.01em;
    color: var(--moonpaper);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.spread-marginalia.in-view .section-heading {
    opacity: 1;
    transform: translateY(0);
}

.marginalia-text p {
    margin-bottom: 1.5em;
    color: var(--moonpaper);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.spread-marginalia.in-view .marginalia-text p {
    opacity: 1;
    transform: translateY(0);
}

.spread-marginalia.in-view .marginalia-text p:nth-child(2) { transition-delay: 0.1s; }
.spread-marginalia.in-view .marginalia-text p:nth-child(3) { transition-delay: 0.2s; }
.spread-marginalia.in-view .marginalia-text p:nth-child(4) { transition-delay: 0.3s; }
.spread-marginalia.in-view .marginalia-text p:nth-child(5) { transition-delay: 0.4s; }
.spread-marginalia.in-view .marginalia-text p:nth-child(6) { transition-delay: 0.5s; }

/* Pull Quote */
.pull-quote {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    color: var(--seafoam-teal);
    font-style: normal;
    text-align: center;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(110, 198, 184, 0.3);
    border-bottom: 1px solid rgba(110, 198, 184, 0.3);
    margin: 2rem 0;
}

/* ============================================
   SPREAD 4: THE COLOPHON
   ============================================ */
.spread-colophon {
    background: var(--deep-night);
}

.spread-colophon .spread-grid {
    align-items: center;
    justify-items: center;
    min-height: 100vh;
}

.colophon-content {
    grid-column: 3 / 9;
    text-align: center;
    position: relative;
    padding: 3rem 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.spread-colophon.in-view .colophon-content {
    opacity: 1;
    transform: translateY(0);
}

.wash-colophon-dot {
    width: clamp(100px, 15vw, 200px);
    height: clamp(100px, 15vw, 200px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 116, 97, 0.4) 0%, rgba(232, 116, 97, 0.1) 50%, transparent 75%);
    filter: blur(20px) url(#watercolor-distort);
    mix-blend-mode: screen;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 0;
}

.spread-colophon.in-view .wash-colophon-dot {
    opacity: 1;
}

.colophon-domain {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    letter-spacing: -0.02em;
    color: var(--moonpaper);
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.colophon-details {
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.colophon-meta {
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-variant: small-caps;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.14em;
    color: var(--ink-wash);
    margin-bottom: 0.5rem;
}

.colophon-signoff {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--petal-coral);
    position: relative;
    z-index: 1;
}

/* ============================================
   INTERACTIVE: UNDERLINE-DRAW LINKS
   ============================================ */
a {
    color: var(--moonpaper);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--petal-coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a:hover::after {
    transform: scaleX(1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .spread-grid {
        grid-template-columns: [bleed-start] 1rem [content-start] repeat(8, 1fr) [content-end] 1rem [bleed-end];
    }

    .masthead {
        grid-column: content-start / content-end;
    }

    .tagline {
        grid-column: content-start / content-end;
        justify-self: start;
        margin-top: 1rem;
    }

    .feature-left {
        grid-column: bleed-start / bleed-end;
        min-height: 40vh;
    }

    .gutter-rule {
        display: none;
    }

    .feature-right {
        grid-column: content-start / content-end;
        padding: 2rem 0;
    }

    .margin-left,
    .margin-right {
        display: none;
    }

    .marginalia-text {
        grid-column: content-start / content-end;
    }

    .colophon-content {
        grid-column: content-start / content-end;
    }

    .spread-nav {
        right: 0.75rem;
    }

    .nav-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .masthead-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .feature-text p {
        text-align: left;
    }
}