/* ==========================================================================
   lovebot.dev — watercolor AI companion studio
   Palette
   - bg:        #faf8f4 (warm white)
   - text:      #1a1a20 (near-black)
   - rose:      #d4606a
   - lavender:  #8a7ab4
   - sage:      #6a9a7a
   - amber:     #c4963a
   - tech:      #3a3a4a
   ========================================================================== */

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

:root {
    --bg: #faf8f4;
    --bg-code: #f0ece4;
    --ink: #1a1a20;
    --rose: #d4606a;
    --lavender: #8a7ab4;
    --sage: #6a9a7a;
    --amber: #c4963a;
    --tech: #3a3a4a;
    --circuit: rgba(26, 26, 32, 0.2);

    --gap-card: 24px;
    --pad-card: 24px;
    --section-gap: clamp(60px, 10vh, 120px);

    --mono: 'Space Mono', 'SF Mono', Menlo, monospace;
    --serif: 'Crimson Pro', 'Lora', Georgia, serif;
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

main {
    display: block;
    width: 100%;
}

code {
    font-family: var(--mono);
    font-size: 14px;
    background: var(--bg-code);
    padding: 2px 6px;
    border-radius: 0;
    color: var(--tech);
}

p { font-size: clamp(15px, 1.5vw, 18px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 24px;
}

.hero-stage {
    position: relative;
    width: min(680px, 100%);
    aspect-ratio: 1 / 0.92;
    display: grid;
    place-items: center;
}

/* Watercolor heart: clip-path heart with layered radial gradient washes */
.watercolor-heart {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-clip-path: path('M340 540 C170 460 50 360 50 220 C50 130 110 60 200 60 C260 60 310 100 340 160 C370 100 420 60 480 60 C570 60 630 130 630 220 C630 360 510 460 340 540 Z');
    clip-path: path('M340 540 C170 460 50 360 50 220 C50 130 110 60 200 60 C260 60 310 100 340 160 C370 100 420 60 480 60 C570 60 630 130 630 220 C630 360 510 460 340 540 Z');
    transform-origin: center;
}

.watercolor-heart::before {
    /* The wider blurred ghost — bleeding edge that extends beyond clip */
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(closest-side at 35% 35%, rgba(212, 96, 106, 0.22), rgba(212, 96, 106, 0) 70%),
        radial-gradient(closest-side at 70% 55%, rgba(138, 122, 180, 0.20), rgba(138, 122, 180, 0) 70%);
    filter: blur(8px);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.watercolor-heart.painted::before { opacity: 1; }

.wash {
    position: absolute;
    inset: 0;
    border-radius: 0;
    opacity: 0;
    transition: opacity 600ms ease;
}

.wash-1 {
    background:
        radial-gradient(closest-side at 38% 38%, rgba(212, 96, 106, 0.30), rgba(212, 96, 106, 0) 75%),
        radial-gradient(closest-side at 72% 60%, rgba(212, 96, 106, 0.18), rgba(212, 96, 106, 0) 70%);
    transition-duration: 700ms;
}
.wash-2 {
    background:
        radial-gradient(closest-side at 60% 35%, rgba(138, 122, 180, 0.25), rgba(138, 122, 180, 0) 70%),
        radial-gradient(closest-side at 30% 70%, rgba(138, 122, 180, 0.18), rgba(138, 122, 180, 0) 75%);
    transition-duration: 500ms;
}
.wash-3 {
    background:
        radial-gradient(circle at 50% 50%, rgba(212, 96, 106, 0.20), rgba(212, 96, 106, 0) 50%),
        radial-gradient(circle at 30% 80%, rgba(138, 122, 180, 0.18), rgba(138, 122, 180, 0) 55%),
        radial-gradient(circle at 75% 75%, rgba(106, 154, 122, 0.10), rgba(106, 154, 122, 0) 60%);
    transition-duration: 400ms;
}
.wash-bleed {
    /* small detail spots simulating darker pooling at edges */
    background:
        radial-gradient(circle at 20% 30%, rgba(58, 58, 74, 0.10), rgba(58, 58, 74, 0) 25%),
        radial-gradient(circle at 80% 35%, rgba(58, 58, 74, 0.08), rgba(58, 58, 74, 0) 22%);
    mix-blend-mode: multiply;
    transition-duration: 380ms;
}

.watercolor-heart.painted .wash-1 { opacity: 1; }
.watercolor-heart.painted .wash-2 { opacity: 1; }
.watercolor-heart.painted .wash-3 { opacity: 1; }
.watercolor-heart.painted .wash-bleed { opacity: 1; }

.hero-mark {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
}

.hero-name {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(32px, 5vw, 56px);
    letter-spacing: 0.04em;
    line-height: 1;
}
.hero-name .caret {
    display: inline-block;
    width: 0.6ch;
    color: var(--rose);
    animation: caret 1.05s steps(1) infinite;
    transform: translateY(2px);
}
.hero-name .caret.done {
    animation: none;
    opacity: 0;
}
@keyframes caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.hero-tld {
    font-family: var(--mono);
    font-weight: 400;
    color: var(--ink);
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.04em;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 500ms ease 200ms;
}
.hero-tld.in { opacity: 1; }

.hero-tag {
    font-family: var(--serif);
    font-style: italic;
    margin-top: 18px;
    color: var(--tech);
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transition: opacity 600ms ease 600ms;
}
.hero-tag.in { opacity: 1; }

.scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--tech);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    animation: cueIn 800ms ease 1500ms forwards;
}
.cue-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--tech) 70%);
    animation: cueDrip 1.8s ease-in-out infinite;
}
@keyframes cueDrip {
    0% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(0.4); transform-origin: bottom; opacity: 0.3; }
}
@keyframes cueIn { to { opacity: 1; } }

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.section-head {
    max-width: 720px;
    margin: 0 auto var(--gap-card);
    padding: 0 24px;
    text-align: center;
}
.eyebrow {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--tech);
    margin-bottom: 12px;
}
.section-title {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--ink);
}
.section-lede {
    margin-top: 14px;
    color: var(--tech);
}

/* ==========================================================================
   TEMPLATES (CARD GRID)
   ========================================================================== */
.templates {
    padding: var(--section-gap) 24px;
}

.cards-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-card);
}
@media (max-width: 960px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards-grid { grid-template-columns: 1fr; } }

.card {
    position: relative;
    padding: var(--pad-card);
    min-height: 280px;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms ease, transform 600ms ease;
}
.card.in { opacity: 1; transform: translateY(0); }

/* watercolor splash background -- defines card boundary; no border */
.card-splash {
    position: absolute;
    inset: 0;
    z-index: -1;
    --splash-paint: 100%;
    background:
        radial-gradient(closest-side at var(--ax, 35%) var(--ay, 40%),
            var(--splash-a-strong, rgba(212, 96, 106, 0.30)) 0%,
            var(--splash-a, rgba(212, 96, 106, 0.18)) 35%,
            transparent var(--splash-paint)),
        radial-gradient(closest-side at var(--bx, 70%) var(--by, 60%),
            var(--splash-b, rgba(212, 96, 106, 0.20)) 0%,
            transparent var(--splash-paint)),
        radial-gradient(closest-side at var(--cx, 50%) var(--cy, 80%),
            var(--splash-c, rgba(212, 96, 106, 0.12)) 0%,
            transparent var(--splash-paint));
    transition: --splash-paint 600ms ease, opacity 600ms ease;
    opacity: 0;
}
.card.in .card-splash { opacity: 1; }

.splash-rose {
    --splash-a-strong: rgba(212, 96, 106, 0.30);
    --splash-a: rgba(212, 96, 106, 0.18);
    --splash-b: rgba(212, 96, 106, 0.22);
    --splash-c: rgba(196, 150, 58, 0.10);
}
.splash-lavender {
    --splash-a-strong: rgba(138, 122, 180, 0.30);
    --splash-a: rgba(138, 122, 180, 0.18);
    --splash-b: rgba(138, 122, 180, 0.22);
    --splash-c: rgba(212, 96, 106, 0.10);
}
.splash-sage {
    --splash-a-strong: rgba(106, 154, 122, 0.30);
    --splash-a: rgba(106, 154, 122, 0.18);
    --splash-b: rgba(106, 154, 122, 0.22);
    --splash-c: rgba(196, 150, 58, 0.10);
}
.splash-amber {
    --splash-a-strong: rgba(196, 150, 58, 0.30);
    --splash-a: rgba(196, 150, 58, 0.18);
    --splash-b: rgba(196, 150, 58, 0.22);
    --splash-c: rgba(106, 154, 122, 0.10);
}

.card-icon {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.card-title {
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.04em;
    color: var(--ink);
    margin-bottom: 8px;
}

.card-meta {
    font-size: 13px;
    color: var(--tech);
    margin-bottom: 14px;
}
.card-meta code { background: rgba(58, 58, 74, 0.07); }

.card-body {
    color: var(--ink);
    margin-bottom: 12px;
}
.card-foot {
    font-size: 13px;
    color: var(--tech);
    font-style: italic;
}

/* ==========================================================================
   HOW IT WORKS (PROGRESSIVE DISCLOSURE)
   ========================================================================== */
.how {
    padding: var(--section-gap) 24px;
}

.steps {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vh, 80px);
}

.step {
    position: relative;
    padding: 56px 40px;
    min-height: 220px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease 400ms, transform 600ms ease 400ms;
}
.step.in {
    opacity: 1;
    transform: translateY(0);
}

.frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
.frame-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.frame-fill {
    opacity: 0;
    transition: opacity 400ms ease;
}
.frame-stroke {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 800ms ease;
}
.step.in .frame-stroke { stroke-dashoffset: 0; }
.step.in .frame-fill { opacity: 1; transition-delay: 600ms; }

.step-body {
    position: relative;
    z-index: 1;
}
.step-num {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--rose);
    font-size: 32px;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.step:nth-child(2) .step-num { color: var(--sage); }
.step:nth-child(3) .step-num { color: var(--lavender); }

.step-title {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--ink);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.step-text {
    color: var(--ink);
    margin-bottom: 12px;
}
.step-code {
    font-size: 13px;
}

/* ==========================================================================
   API SECTION
   ========================================================================== */
.api {
    padding: var(--section-gap) 24px;
}
.api-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-card);
}
@media (max-width: 820px) { .api-grid { grid-template-columns: 1fr; } }

.api-card {
    padding: var(--pad-card);
    background: rgba(58, 58, 74, 0.04);
    border-left: 2px solid var(--tech);
}
.api-method {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--rose);
    margin-bottom: 8px;
}
.api-route {
    font-family: var(--mono);
    margin-bottom: 12px;
    color: var(--ink);
    word-break: break-all;
}
.api-route code { background: transparent; padding: 0; }
.api-desc {
    color: var(--tech);
    font-size: 15px;
}

/* ==========================================================================
   CONNECT (CLOSING)
   ========================================================================== */
.connect {
    position: relative;
    min-height: 100vh;
    padding: var(--section-gap) 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.connect-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.connect-wash .wash {
    inset: -10%;
    opacity: 1;
    transition: none;
}
.connect-wash .wash-c1 {
    background:
        radial-gradient(circle at 25% 30%, rgba(212, 96, 106, 0.22), rgba(212, 96, 106, 0) 55%),
        radial-gradient(circle at 75% 60%, rgba(138, 122, 180, 0.22), rgba(138, 122, 180, 0) 55%);
}
.connect-wash .wash-c2 {
    background:
        radial-gradient(closest-side at 60% 25%, rgba(196, 150, 58, 0.10), rgba(196, 150, 58, 0) 70%),
        radial-gradient(closest-side at 35% 75%, rgba(106, 154, 122, 0.12), rgba(106, 154, 122, 0) 70%);
    filter: blur(2px);
}
.connect-wash .wash-c3 {
    background:
        radial-gradient(closest-side at 55% 55%, rgba(212, 96, 106, 0.15), rgba(212, 96, 106, 0) 60%);
    mix-blend-mode: multiply;
}

.connect-mark {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 680px;
}
.connect-title {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(36px, 6vw, 64px);
    letter-spacing: 0.02em;
    color: var(--ink);
    margin-bottom: 18px;
}
.connect-line {
    color: var(--tech);
    font-size: clamp(16px, 1.8vw, 19px);
    margin-bottom: 28px;
}
.connect-line code { background: rgba(58, 58, 74, 0.08); }
.connect-foot {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.15em;
    color: var(--tech);
    text-transform: uppercase;
}