/* =============================================
   koomimi.com — Synesthesia / Watercolor Listening Room
   ============================================= */

:root {
    --washi: #F7F3EE;
    --wet-paper: #EDE7DC;
    --sumi: #2C2C34;
    --diluted: #6E6B7A;
    --indigo: #4A6FA5;
    --persimmon: #D4856A;
    --matcha: #8BA888;
    --murasaki: #9B7EB4;
    --gold-leaf: #C9A96E;
    --wave-gray: #7B8FA1;
    --ease-organic: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    --duration-base: 800ms;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--washi);
    color: var(--sumi);
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.85;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none;
        transition: none;
    }
}

/* ---- Ink Particles ---- */
.ink-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ink-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: inkDrift var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes inkDrift {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    15% {
        opacity: var(--op);
    }
    85% {
        opacity: var(--op);
    }
    100% {
        transform: translate(var(--dx), var(--dy));
        opacity: 0;
    }
}

/* ---- Movement (Section) Base ---- */
.movement {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 120px 40px;
}

/* ---- Watercolor Blooms ---- */
.bloom {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s var(--ease-organic);
}

.bloom.visible {
    opacity: 1;
}

.bloom-indigo {
    width: 360px;
    height: 360px;
    background:
        radial-gradient(ellipse at 40% 35%, rgba(74,111,165,0.25), transparent 65%),
        radial-gradient(ellipse at 60% 65%, rgba(74,111,165,0.15), transparent 70%);
}

.bloom-persimmon {
    width: 280px;
    height: 280px;
    background:
        radial-gradient(ellipse at 45% 40%, rgba(212,133,106,0.25), transparent 60%),
        radial-gradient(ellipse at 55% 60%, rgba(212,133,106,0.15), transparent 70%);
}

.bloom-matcha {
    width: 320px;
    height: 320px;
    background:
        radial-gradient(ellipse at 35% 45%, rgba(139,168,136,0.2), transparent 60%),
        radial-gradient(ellipse at 65% 55%, rgba(139,168,136,0.15), transparent 70%);
}

.bloom-murasaki {
    width: 400px;
    height: 400px;
    background:
        radial-gradient(ellipse at 45% 40%, rgba(155,126,180,0.3), transparent 55%),
        radial-gradient(ellipse at 55% 60%, rgba(155,126,180,0.2), transparent 65%),
        radial-gradient(ellipse at 40% 55%, rgba(155,126,180,0.1), transparent 70%);
}

.bloom.medium { width: 240px; height: 240px; }
.bloom.large { width: 440px; height: 440px; }
.bloom.huge { width: 480px; height: 480px; }
.bloom.small { width: 160px; height: 160px; }
.bloom.fading { opacity: 0.15; }

/* ---- Text Blocks ---- */
.text-block {
    position: relative;
    max-width: 560px;
    z-index: 2;
    margin-bottom: 80px;
}

.text-block.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.text-block.right {
    text-align: right;
}

.text-block h2 {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 0.08em;
    line-height: 1.15;
    color: var(--sumi);
    margin-bottom: 24px;
}

.text-block p {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.85;
    color: var(--sumi);
    margin-bottom: 2.4em;
}

.text-block p:last-child {
    margin-bottom: 0;
}

/* ---- Fade reveal ---- */
.fade-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-base) var(--ease-organic), transform var(--duration-base) var(--ease-organic);
}

.fade-reveal.visible {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg));
}

/* ---- Gold underline ---- */
.gold-underline {
    position: relative;
    display: inline;
}

.gold-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold-leaf);
    transition: width 1.2s var(--ease-organic);
}

.gold-underline.drawn::after {
    width: 100%;
}

/* =============================================
   PRELUDE
   ============================================= */
#prelude {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prelude-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.site-title {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-weight: 300;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 0.24em;
    color: var(--sumi);
    opacity: 0;
    transition: opacity 1.5s var(--ease-organic);
    text-transform: lowercase;
}

.site-title.visible {
    opacity: 0.4;
}

.waveform-line {
    width: 60%;
    height: 30px;
    margin: 20px auto 0;
    display: block;
}

.wave-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s var(--ease-organic);
}

.wave-path.drawn {
    stroke-dashoffset: 0;
}

.ear-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

.ear-watermark.visible {
    opacity: 0.04;
}

.ear-svg {
    width: 320px;
    height: auto;
}

/* ---- Waveform Dividers ---- */
.waveform-divider {
    padding: 40px 0;
}

.divider-wave {
    width: 100%;
    height: 40px;
}

/* ---- Vertical wave ---- */
.vertical-wave {
    position: absolute;
    left: 10%;
    top: 0;
    width: 30px;
    height: 100%;
    z-index: 1;
}

/* ---- Resonance ---- */
.resonance-text h2 {
    font-size: clamp(3rem, 6vw, 4.5rem);
}

.resonance-text p {
    font-size: clamp(18px, 2vw, 22px);
}

/* ---- Silence / Fade ---- */
#silence {
    background: var(--washi);
    transition: background 1s ease;
}

.silence-text p {
    color: var(--diluted);
    font-size: 17px;
}

.final-word {
    text-align: center;
    margin-top: 120px;
}

.closing-title {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 32px;
    letter-spacing: 0.2em;
    color: var(--sumi);
    opacity: 0.2;
    text-transform: lowercase;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .movement {
        padding: 80px 24px;
    }

    .text-block {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }

    .text-block.right {
        text-align: left;
    }

    .bloom {
        width: 200px;
        height: 200px;
    }

    .bloom.huge,
    .bloom.large {
        width: 280px;
        height: 280px;
    }
}