/* ================================================
   lovebot.quest - Blobitecture AI Romance Adventure
   Colors: translucent-frost palette #FAF4FC
   Fonts: "Playfair Display" (Google Fonts), "Lora" (Google Fonts), "Quicksand" (Google Fonts)
   Internal content padding: clamp(32px, 6vw, 80px)
   ================================================ */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

:root {
    --frost-white: #faf4fc;
}

body {
    font-family: 'Lora', serif;
    color: #2a1a30;
    background: #f0e4f4;
    overflow-x: hidden;
    line-height: 1.75;
}

/* --- Animated Gradient Underlayer --- */
#gradient-underlayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    background: linear-gradient(135deg, #f0e4f4, #d4e8f0, #f0d4e0, #f0e4f4);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 0%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* --- Floating Background Blobs (Parallax 0.3x) --- */
#bg-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    pointer-events: none;
}

.bg-blob {
    position: absolute;
    border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
    opacity: 0.4;
    animation: floatBlob 12s ease-in-out infinite;
}

.blob-1 {
    width: 220px;
    height: 180px;
    background: #e8d4f0;
    top: 5%;
    left: 8%;
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    animation-duration: 10s;
    animation-delay: 0s;
}

.blob-2 {
    width: 160px;
    height: 140px;
    background: #d4f0e8;
    top: 15%;
    right: 12%;
    border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    animation-duration: 14s;
    animation-delay: -3s;
}

.blob-3 {
    width: 280px;
    height: 200px;
    background: #f0e0d4;
    top: 35%;
    left: -5%;
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
    animation-duration: 16s;
    animation-delay: -6s;
}

.blob-4 {
    width: 140px;
    height: 120px;
    background: #e8d4f0;
    top: 55%;
    right: 5%;
    border-radius: 42% 58% 55% 45% / 48% 52% 50% 50%;
    animation-duration: 11s;
    animation-delay: -2s;
}

.blob-5 {
    width: 190px;
    height: 160px;
    background: #d4f0e8;
    top: 70%;
    left: 15%;
    border-radius: 52% 48% 44% 56% / 46% 54% 52% 48%;
    animation-duration: 13s;
    animation-delay: -8s;
}

.blob-6 {
    width: 240px;
    height: 190px;
    background: #f0e0d4;
    top: 85%;
    right: 20%;
    border-radius: 48% 52% 56% 44% / 52% 48% 46% 54%;
    animation-duration: 15s;
    animation-delay: -4s;
}

.blob-7 {
    width: 170px;
    height: 150px;
    background: #e8d4f0;
    top: 25%;
    left: 60%;
    border-radius: 58% 42% 48% 52% / 44% 56% 48% 52%;
    animation-duration: 12s;
    animation-delay: -7s;
}

.blob-8 {
    width: 130px;
    height: 110px;
    background: #d4e8f0;
    top: 45%;
    left: 35%;
    border-radius: 44% 56% 52% 48% / 56% 44% 48% 52%;
    animation-duration: 9s;
    animation-delay: -1s;
}

@keyframes floatBlob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-25px) rotate(3deg); }
    66% { transform: translateY(15px) rotate(-2deg); }
}

/* --- Sections --- */
.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vw, 80px);
    z-index: 1;
}

/* --- OPENING SECTION --- */
#opening {
    height: 100vh;
    flex-direction: column;
    gap: 40px;
}

.opening-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

#central-blob {
    width: clamp(280px, 50vw, 520px);
    height: clamp(200px, 35vw, 360px);
    background: linear-gradient(135deg, #e8d4f0, #d4e8f0);
    border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: scale(0.95);
    animation: blobFadeIn 600ms ease forwards, blobPulse 4s ease-in-out 600ms infinite;
    box-shadow: 0 20px 60px rgba(42, 26, 48, 0.08);
}

@keyframes blobFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes blobPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.title-lovebot {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(36px, 7vw, 72px);
    color: #2a1a30;
    line-height: 1.1;
    opacity: 0;
    animation: textFadeIn 400ms ease 400ms forwards;
}

.title-quest {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(20px, 3.5vw, 36px);
    color: #6a4a70;
    opacity: 0;
    animation: textFadeIn 400ms ease 600ms forwards;
}

@keyframes textFadeIn {
    to { opacity: 1; }
}

/* --- Lovebot Character --- */
#lovebot-character {
    opacity: 0;
    animation: textFadeIn 400ms ease 800ms forwards;
}

.lovebot-svg {
    width: 120px;
    height: 100px;
}

.lovebot-svg-small {
    width: 80px;
    height: 65px;
}

.lovebot-body {
    fill: rgba(232, 212, 240, 0.8);
    stroke: rgba(42, 26, 48, 0.1);
    stroke-width: 1;
}

.lovebot-eye {
    fill: #2a1a30;
    transform-origin: center;
    animation: eyeAppear 200ms ease 1000ms both;
}

@keyframes eyeAppear {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.lovebot-mouth {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: mouthDraw 200ms ease 1200ms forwards;
}

@keyframes mouthDraw {
    to { stroke-dashoffset: 0; }
}

/* --- AWAKENING SECTION --- */
#awakening {
    flex-direction: column;
    position: relative;
}

.mid-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.landscape-blob {
    position: absolute;
    opacity: 0.25;
}

.land-blob-1 {
    width: 60%;
    height: 300px;
    background: #e8d4f0;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    bottom: 10%;
    left: -10%;
}

.land-blob-2 {
    width: 50%;
    height: 250px;
    background: #d4f0e8;
    border-radius: 45% 55% 40% 60% / 55% 45% 50% 50%;
    bottom: 5%;
    right: -8%;
}

.land-blob-3 {
    width: 35%;
    height: 200px;
    background: #f0e0d4;
    border-radius: 50% 50% 60% 40% / 40% 60% 45% 55%;
    top: 15%;
    left: 30%;
}

.section-content {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.chapter-label {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a4a70;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.chapter-label.visible {
    opacity: 1;
    transform: translateY(0);
}

.chapter-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(28px, 5vw, 56px);
    color: #2a1a30;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease 100ms, transform 600ms ease 100ms;
}

.chapter-title.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Frost Panels --- */
.frost-panel {
    background: rgba(250, 244, 252, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: clamp(24px, 4vw, 48px);
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms ease, transform 600ms ease;
}

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

.panel-1 {
    border-radius: 45% 55% 50% 50% / 30% 35% 25% 30%;
    transition-delay: 200ms;
}

.panel-2 {
    border-radius: 50% 50% 55% 45% / 25% 30% 35% 30%;
    transition-delay: 400ms;
}

.panel-3 {
    border-radius: 55% 45% 48% 52% / 35% 25% 30% 35%;
    transition-delay: 600ms;
}

.learning-reflection {
    border-radius: 48% 52% 45% 55% / 30% 32% 28% 35%;
}

.lovebot-inline {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.narrative-text {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 2vw, 24px);
    color: #2a1a30;
    line-height: 1.75;
    text-align: center;
}

.narrative-text em {
    color: #6a4a70;
}

/* --- LEARNING SECTION --- */
#learning {
    flex-direction: column;
}

.thought-bubbles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    width: 100%;
    max-width: 900px;
}

.thought-bubble {
    background: rgba(250, 244, 252, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: clamp(20px, 3vw, 36px);
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 500ms ease, transform 500ms ease;
    animation: thoughtFloat 8s ease-in-out infinite;
}

.thought-bubble.visible {
    opacity: 1;
    transform: translateY(0);
}

.bubble-1 {
    width: clamp(180px, 30vw, 260px);
    border-radius: 50% 50% 45% 55% / 40% 50% 50% 40%;
    animation-duration: 8s;
    animation-delay: 0s;
    transition-delay: 0ms;
}

.bubble-2 {
    width: clamp(200px, 35vw, 280px);
    border-radius: 45% 55% 50% 50% / 50% 40% 55% 45%;
    animation-duration: 10s;
    animation-delay: -2s;
    transition-delay: 150ms;
}

.bubble-3 {
    width: clamp(190px, 32vw, 270px);
    border-radius: 55% 45% 48% 52% / 45% 55% 42% 58%;
    animation-duration: 9s;
    animation-delay: -4s;
    transition-delay: 300ms;
}

.bubble-4 {
    width: clamp(210px, 34vw, 290px);
    border-radius: 48% 52% 55% 45% / 52% 48% 46% 54%;
    animation-duration: 11s;
    animation-delay: -1s;
    transition-delay: 450ms;
}

.bubble-5 {
    width: clamp(175px, 28vw, 250px);
    border-radius: 52% 48% 44% 56% / 46% 54% 52% 48%;
    animation-duration: 7s;
    animation-delay: -3s;
    transition-delay: 600ms;
}

@keyframes thoughtFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.thought-bubble.visible {
    animation: thoughtFloat 8s ease-in-out infinite;
}

.bubble-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(18px, 2.5vw, 26px);
    color: #2a1a30;
    margin-bottom: 10px;
}

.bubble-text {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 17px);
    color: #6a4a70;
    line-height: 1.65;
}

/* --- CONNECTION SECTION --- */
#connection {
    flex-direction: column;
    min-height: 120vh;
}

.merge-stage {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 300px;
    margin: 40px auto;
}

.merge-blob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;
    height: 120px;
    transition: left 800ms cubic-bezier(0.4, 0, 0.2, 1), right 800ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms ease;
}

.merge-blob-left {
    left: 0;
}

.merge-blob-right {
    right: 0;
}

.merge-blob.merging .merge-blob-left {
    left: calc(50% - 70px);
}

.merge-blob.merging .merge-blob-right {
    right: calc(50% - 70px);
}

.merge-svg {
    width: 100%;
    height: 100%;
}

.merge-body-alt {
    fill: rgba(212, 240, 232, 0.8);
    stroke: rgba(42, 26, 48, 0.1);
    stroke-width: 1;
}

.merged-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 260px;
    height: 160px;
    opacity: 0;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease;
}

.merged-blob.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.merged-body {
    fill: rgba(232, 212, 240, 0.7);
    stroke: rgba(42, 26, 48, 0.1);
    stroke-width: 1;
}

.heart-eye {
    fill: #d46a80;
    opacity: 0;
    transition: opacity 300ms ease 200ms;
}

.merged-blob.visible .heart-eye {
    opacity: 1;
}

.merged-blob .lovebot-eye {
    transition: opacity 300ms ease;
}

.merged-blob.visible .lovebot-eye {
    opacity: 0;
}

.merged-mouth {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset 400ms ease 300ms;
}

.merged-blob.visible .merged-mouth {
    stroke-dashoffset: 0;
}

/* --- Closing Text --- */
.closing-text {
    text-align: center;
    margin-top: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.closing-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.closing-statement {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(28px, 5vw, 56px);
    color: #2a1a30;
    line-height: 1.3;
}

/* --- Lovebot expression variants --- */
.lovebot-wonder .lovebot-eye {
    r: 4.5;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .thought-bubbles-container {
        flex-direction: column;
        align-items: center;
    }

    .thought-bubble {
        width: 90% !important;
    }

    .merge-stage {
        height: 250px;
    }

    .merge-blob {
        width: 110px;
        height: 95px;
    }

    .merged-blob {
        width: 200px;
        height: 130px;
    }

    .frost-panel {
        border-radius: 30% 30% 30% 30% / 20% 20% 20% 20%;
    }

    .panel-1, .panel-2, .panel-3 {
        border-radius: 35% 35% 35% 35% / 22% 22% 22% 22%;
    }
}

@media (max-width: 480px) {
    #central-blob {
        width: 85vw;
        height: 55vw;
    }

    .merge-stage {
        height: 220px;
    }
}