/* ============================================
   lovebot.dev — Watercolor AI Companion Studio
   ============================================ */

/* --- Palette --- */
:root {
    --bg-warm-white: #faf8f4;
    --text-primary: #1a1a20;
    --watercolor-rose: #d4606a;
    --watercolor-lavender: #8a7ab4;
    --watercolor-sage: #6a9a7a;
    --watercolor-amber: #c4963a;
    --tech-accent: #3a3a4a;
    --code-bg: #f0ece4;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: #faf8f4;
    color: #1a1a20;
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3, .brand-text, .step-number, .connect-text {
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.04em;
}

.section-heading {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(24px, 3.5vw, 40px);
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: clamp(40px, 6vh, 80px);
    color: #1a1a20;
}

/* --- HERO SECTION --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf8f4;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Watercolor Heart */
.watercolor-heart {
    position: absolute;
    width: clamp(280px, 50vw, 520px);
    height: clamp(280px, 50vw, 520px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.heart-wash {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: path('M256 480 C256 480 32 320 32 176 C32 80 96 16 176 16 C216 16 244 40 256 80 C268 40 296 16 336 16 C416 16 480 80 480 176 C480 320 256 480 256 480Z');
    transform: scale(0.5);
    transform-origin: center center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.heart-wash-1 {
    background: radial-gradient(ellipse at 40% 35%, rgba(212, 96, 106, 0.25) 0%, rgba(212, 96, 106, 0.08) 50%, transparent 70%),
                radial-gradient(ellipse at 65% 40%, rgba(138, 122, 180, 0.2) 0%, rgba(138, 122, 180, 0.06) 50%, transparent 70%);
    filter: blur(2px);
}

.heart-wash-2 {
    background: radial-gradient(ellipse at 50% 45%, rgba(212, 96, 106, 0.3) 0%, rgba(212, 96, 106, 0.1) 40%, transparent 65%),
                radial-gradient(ellipse at 35% 50%, rgba(138, 122, 180, 0.25) 0%, transparent 55%);
    filter: blur(1px);
}

.heart-wash-3 {
    background: radial-gradient(ellipse at 45% 40%, rgba(212, 96, 106, 0.35) 0%, rgba(212, 96, 106, 0.15) 30%, transparent 55%),
                radial-gradient(ellipse at 60% 35%, rgba(138, 122, 180, 0.3) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 55%, rgba(196, 150, 58, 0.12) 0%, transparent 40%);
}

.heart-wash.visible {
    opacity: 1;
}

/* Bleeding edge — larger, blurred pseudo heart */
.heart-bleed {
    position: absolute;
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    clip-path: path('M256 480 C256 480 32 320 32 176 C32 80 96 16 176 16 C216 16 244 40 256 80 C268 40 296 16 336 16 C416 16 480 80 480 176 C480 320 256 480 256 480Z');
    transform: scale(0.5);
    transform-origin: center center;
    background: radial-gradient(ellipse at 50% 40%, rgba(212, 96, 106, 0.1) 0%, rgba(138, 122, 180, 0.06) 40%, transparent 65%);
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.heart-bleed.visible {
    opacity: 1;
}

/* Hero Text */
.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

#hero-title {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(32px, 5vw, 56px);
    letter-spacing: 0.04em;
    color: #1a1a20;
    line-height: 1.2;
}

.cursor {
    animation: blink 0.8s step-end infinite;
    color: #d4606a;
}

.cursor.hidden {
    display: none;
}

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

.hero-subtitle {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(20px, 3vw, 36px);
    letter-spacing: 0.04em;
    color: #3a3a4a;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-top: 4px;
}

.hero-subtitle.visible {
    opacity: 1;
}


/* --- TEMPLATES CARD GRID --- */
#templates {
    padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px);
    max-width: 1200px;
    margin: 0 auto;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.template-card {
    position: relative;
    padding: 24px;
    min-height: 240px;
    overflow: hidden;
}

/* Watercolor splash background per card */
.card-splash {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    pointer-events: none;
}

.template-card.visible .card-splash {
    opacity: 1;
    transform: scale(1);
}

/* Unique splash per color */
[data-color="rose"] .card-splash {
    background: radial-gradient(ellipse at 30% 40%, rgba(212, 96, 106, 0.22) 0%, rgba(212, 96, 106, 0.08) 40%, transparent 65%),
                radial-gradient(ellipse at 70% 60%, rgba(212, 96, 106, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 30%, rgba(212, 96, 106, 0.1) 0%, transparent 55%);
}

[data-color="lavender"] .card-splash {
    background: radial-gradient(ellipse at 60% 35%, rgba(138, 122, 180, 0.22) 0%, rgba(138, 122, 180, 0.08) 40%, transparent 65%),
                radial-gradient(ellipse at 25% 65%, rgba(138, 122, 180, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 45% 50%, rgba(138, 122, 180, 0.1) 0%, transparent 55%);
}

[data-color="sage"] .card-splash {
    background: radial-gradient(ellipse at 40% 50%, rgba(106, 154, 122, 0.22) 0%, rgba(106, 154, 122, 0.08) 40%, transparent 65%),
                radial-gradient(ellipse at 75% 30%, rgba(106, 154, 122, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 55% 70%, rgba(106, 154, 122, 0.1) 0%, transparent 55%);
}

[data-color="amber"] .card-splash {
    background: radial-gradient(ellipse at 55% 45%, rgba(196, 150, 58, 0.22) 0%, rgba(196, 150, 58, 0.08) 40%, transparent 65%),
                radial-gradient(ellipse at 30% 70%, rgba(196, 150, 58, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 65% 25%, rgba(196, 150, 58, 0.1) 0%, transparent 55%);
}

/* Card content */
.card-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

.template-card.visible .card-content {
    opacity: 1;
}

.card-icon {
    margin-bottom: 16px;
}

.card-icon svg {
    display: block;
}

.card-title {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(18px, 2.5vw, 28px);
    letter-spacing: 0.04em;
    color: #1a1a20;
    margin-bottom: 10px;
}

.card-description {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.7;
    color: #3a3a4a;
}


/* --- HOW IT WORKS --- */
#how-it-works {
    padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px);
    max-width: 900px;
    margin: 0 auto;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.step-panel {
    position: relative;
    padding: 48px 40px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.step-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Watercolor frame SVG */
.step-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.frame-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 0.8s ease;
}

.step-panel.visible .frame-path {
    stroke-dashoffset: 0;
}

[data-step="1"] .frame-path {
    stroke: rgba(212, 96, 106, 0.5);
}

[data-step="2"] .frame-path {
    stroke: rgba(138, 122, 180, 0.5);
}

[data-step="3"] .frame-path {
    stroke: rgba(106, 154, 122, 0.5);
}

/* Step wash behind content */
.step-wash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease 0.8s;
    pointer-events: none;
}

.step-panel.visible .step-wash {
    opacity: 1;
}

[data-step="1"] .step-wash {
    background: radial-gradient(ellipse at 50% 50%, rgba(212, 96, 106, 0.08) 0%, transparent 70%);
}

[data-step="2"] .step-wash {
    background: radial-gradient(ellipse at 50% 50%, rgba(138, 122, 180, 0.08) 0%, transparent 70%);
}

[data-step="3"] .step-wash {
    background: radial-gradient(ellipse at 50% 50%, rgba(106, 154, 122, 0.08) 0%, transparent 70%);
}

/* Step content */
.step-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease 1.2s;
}

.step-panel.visible .step-content {
    opacity: 1;
}

.step-number {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    letter-spacing: 0.04em;
    color: rgba(26, 26, 32, 0.08);
    display: block;
    margin-bottom: 8px;
    line-height: 1;
}

.step-name {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: 0.04em;
    color: #1a1a20;
    margin-bottom: 16px;
}

.step-explanation {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.7;
    color: #3a3a4a;
    max-width: 520px;
    margin: 0 auto;
}


/* --- CONNECT CLOSING --- */
#connect {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #faf8f4;
}

.connect-wash {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connect-wash-1 {
    background: radial-gradient(ellipse at 30% 50%, rgba(212, 96, 106, 0.15) 0%, transparent 55%);
}

.connect-wash-2 {
    background: radial-gradient(ellipse at 70% 40%, rgba(138, 122, 180, 0.12) 0%, transparent 50%);
}

.connect-wash-3 {
    background: radial-gradient(ellipse at 50% 65%, rgba(212, 96, 106, 0.08) 0%, rgba(138, 122, 180, 0.06) 30%, transparent 55%);
}

.connect-text {
    position: relative;
    z-index: 1;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(28px, 4.5vw, 52px);
    letter-spacing: 0.04em;
    color: #1a1a20;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.connect-text.visible {
    opacity: 1;
}


/* --- Code/Technical Style --- */
code, .code-snippet {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    background: #f0ece4;
    padding: 2px 6px;
}


/* --- Responsive --- */
@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .step-panel {
        padding: 32px 24px;
    }

    .watercolor-heart {
        width: 260px;
        height: 260px;
    }
}