/* ============================================================
   lovable.dev v2  —  tactile-warm letterpress vertical column
   Cream paper, ink-purple, coral gasp.
   ============================================================ */

:root {
    --cream: #f6efe4;
    --ink: #2a1f3d;
    --coral: #d97a5e;

    --left-margin: 12vw;
    --column-max: 32em;
    --baseline: 24px;

    --hero-size: clamp(40px, 5.4vw, 72px);
    --love-size: clamp(28px, 3.6vw, 44px);
    --section-title-size: clamp(20px, 2vw, 24px);
    --body-size: clamp(15px, 1.4vw, 17px);
    --marker-size: clamp(11px, 1vw, 12px);

    --ease-letter: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--cream);
    color: var(--ink);
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-weight: 400;
    font-size: var(--body-size);
    line-height: 1.9;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* ============================================================
   Structural rule (decorative vertical hairline that "breathes")
   ============================================================ */

.structural-rule {
    position: fixed;
    top: 0;
    left: var(--left-margin);
    width: 1px;
    height: 100vh;
    background-color: var(--ink);
    opacity: 0;
    transform-origin: top center;
    will-change: opacity;
    transition: opacity 600ms var(--ease-letter);
    pointer-events: none;
    z-index: 1;
}

.structural-rule.is-active {
    opacity: 1;
}

/* ============================================================
   Page / sections
   ============================================================ */

.page {
    position: relative;
    width: 100%;
    z-index: 2;
}

.section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 18vh 0 12vh;
    display: flex;
    align-items: center;
}

.column {
    position: relative;
    margin-left: var(--left-margin);
    padding-left: 2.4em;
    max-width: var(--column-max);
    width: 100%;
    z-index: 3;
}

.margin-art {
    position: absolute;
    top: 0;
    left: var(--left-margin);
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================
   Chapter markers
   ============================================================ */

.chapter-marker {
    display: block;
    color: var(--coral);
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-weight: 400;
    font-size: var(--marker-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 3.2em;
    opacity: 1;
}

.chapter-marker--inverted {
    color: var(--coral);
    margin-bottom: 4em;
}

/* ============================================================
   Section: opening (ch.01)
   ============================================================ */

.section-opening {
    min-height: 100vh;
    padding-top: 22vh;
}

.opening-hairline {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 38.2vh;
    background-color: var(--ink);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 900ms var(--ease-letter) 700ms;
}

.opening-hairline.is-drawn {
    transform: scaleY(1);
}

.wordmark {
    font-size: var(--hero-size);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 1.1em;
    color: var(--ink);
}

.wordmark-name,
.wordmark-tld {
    font-weight: 400;
}

.wordmark-dot {
    color: var(--coral);
    font-weight: 700;
    display: inline-block;
    transform: translateY(-0.02em);
}

.tagline {
    font-size: var(--body-size);
    color: var(--ink);
    opacity: 0.78;
    letter-spacing: 0.02em;
}

/* Reveal mechanics for opening */
.reveal {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 700ms var(--ease-letter),
        transform 700ms var(--ease-letter);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tagline.reveal.is-visible {
    opacity: 0.78;
}

/* ============================================================
   Section: meaning (ch.02 — three numbered paragraphs)
   ============================================================ */

.section-meaning {
    padding-top: 30vh;
    padding-bottom: 30vh;
}

.section-title {
    font-size: var(--section-title-size);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 4em;
    color: var(--ink);
    opacity: 0.86;
}

.paragraph {
    position: relative;
    margin-bottom: 5em;
    padding-left: 4em;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 700ms var(--ease-letter),
        transform 700ms var(--ease-letter);
    will-change: opacity, transform;
}

.paragraph.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.paragraph .numeral {
    position: absolute;
    top: 0.05em;
    left: 0;
    color: var(--coral);
    font-size: 0.95em;
    letter-spacing: 0.18em;
    font-weight: 400;
}

.paragraph p {
    color: var(--ink);
    font-size: var(--body-size);
    line-height: 1.9;
    letter-spacing: 0.01em;
}

/* Hand-drawn imperfect circles in margin */

.margin-art--circles {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--left-margin) + var(--column-max) + 4em);
    right: 6vw;
    pointer-events: none;
}

.circle {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ink);
    background-color: transparent;
    opacity: 0;
    transition: opacity 900ms var(--ease-letter);
    will-change: opacity, transform;
}

.circle.is-visible {
    opacity: 0.5;
    animation: breathe 4s ease-in-out infinite;
}

.circle-a {
    top: 18%;
    left: 6%;
    border-radius: 49% 51% 50% 50%;
    width: 32px;
    height: 32px;
    animation-delay: 0s;
}

.circle-b {
    top: 44%;
    left: 22%;
    border-radius: 51% 48% 52% 49%;
    width: 44px;
    height: 44px;
    animation-delay: 1.2s;
}

.circle-c {
    top: 70%;
    left: 10%;
    border-radius: 48% 52% 49% 51%;
    width: 28px;
    height: 28px;
    animation-delay: 2.6s;
}

@keyframes breathe {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.05); }
}

/* ============================================================
   Sections: love (three principles, each viewport-tall)
   ============================================================ */

.section-love {
    min-height: 100vh;
    padding-top: 28vh;
    padding-bottom: 28vh;
}

.love-title {
    font-size: var(--love-size);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 0.9em;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 700ms var(--ease-letter),
        transform 700ms var(--ease-letter);
    will-change: opacity, transform;
}

.love-line {
    font-size: var(--body-size);
    line-height: 1.9;
    letter-spacing: 0.01em;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 700ms var(--ease-letter) 200ms,
        transform 700ms var(--ease-letter) 200ms;
    max-width: 28em;
}

.section-love.is-visible .love-title,
.section-love.is-visible .love-line {
    opacity: 1;
    transform: translateY(0);
}

.section-love.is-visible .love-line {
    opacity: 0.86;
}

/* Constellation dots */

.margin-art--constellation {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--left-margin) + var(--column-max) + 4em);
    right: 6vw;
}

.dot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ink);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition:
        opacity 900ms var(--ease-letter),
        transform 900ms var(--ease-letter);
    will-change: opacity, transform;
}

.section-love.is-visible .dot {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1);
}

.section-love.is-visible .dot:nth-child(2) { transition-delay: 120ms; }
.section-love.is-visible .dot:nth-child(3) { transition-delay: 240ms; }
.section-love.is-visible .dot:nth-child(4) { transition-delay: 360ms; }
.section-love.is-visible .dot:nth-child(5) { transition-delay: 480ms; }

/* ============================================================
   Section: closing (Begin a letter)
   ============================================================ */

.section-closing {
    background-color: var(--ink);
    color: var(--cream);
    min-height: 100vh;
    padding-top: 30vh;
    padding-bottom: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 600ms var(--ease-letter);
}

.closing-inner {
    text-align: center;
    max-width: 32em;
    padding: 0 6vw;
}

.section-closing .chapter-marker--inverted {
    text-align: center;
}

.letter-line {
    font-size: var(--love-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cream);
    margin-bottom: 1.2em;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 800ms var(--ease-letter),
        transform 800ms var(--ease-letter);
}

.letter-text {
    display: inline;
}

.cursor {
    display: inline-block;
    width: 0.55em;
    height: 1em;
    background-color: var(--coral);
    margin-left: 0.18em;
    vertical-align: -0.1em;
    animation: blink 1.06s steps(2, jump-none) infinite;
}

@keyframes blink {
    0%, 49.99% { opacity: 1; }
    50%, 100%  { opacity: 0; }
}

.letter-sub {
    font-size: var(--body-size);
    letter-spacing: 0.02em;
    color: var(--cream);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 800ms var(--ease-letter) 280ms,
        transform 800ms var(--ease-letter) 280ms;
}

.section-closing.is-visible .letter-line { opacity: 1; transform: translateY(0); }
.section-closing.is-visible .letter-sub  { opacity: 0.78; transform: translateY(0); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 800px) {
    :root {
        --left-margin: 8vw;
        --column-max: 28em;
    }

    .column {
        padding-left: 1.6em;
    }

    .margin-art--circles,
    .margin-art--constellation {
        left: calc(var(--left-margin) + 80vw);
        right: 0;
    }

    .circle-a, .circle-b, .circle-c {
        display: none;
    }

    .dot {
        opacity: 0;
    }

    .section-love.is-visible .dot {
        opacity: 0.45;
    }

    .paragraph {
        padding-left: 3em;
    }
}

@media (max-width: 520px) {
    :root {
        --left-margin: 6vw;
    }

    .section,
    .section-opening,
    .section-meaning,
    .section-love,
    .section-closing {
        padding-top: 22vh;
        padding-bottom: 18vh;
    }

    .closing-inner {
        padding: 0 8vw;
    }
}