/* ============================================
   PPEBBL.com — Wabi-Sabi Pebble Aesthetic
   Palette: #f5f0eb #57534e #a8a29e #d6d3d1 #4d7c0f #292524 #b45309
   Display: Georgia" -- classic serif with organic warmth. Used at normal weight.
   Body: Lato" (Google Fonts) -- warm humanist sans.
   Style: organic-shaped blob container (border-radius with 4 different values)
   ============================================ */

/* ---- Custom Properties ---- */
:root {
    --parchment: #f5f0eb;
    --stone-dark: #57534e;
    --stone-mid: #a8a29e;
    --stone-light: #d6d3d1;
    --moss: #4d7c0f;
    --text: #292524;
    --amber: #b45309;
}

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

html {
    scroll-behavior: smooth;
}

/* ---- Base ---- */
body {
    background-color: var(--parchment);
    color: var(--text);
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 1.8;
    overflow-x: hidden;
    position: relative;
}

/* ---- Large organic background shape at 5% opacity ---- */
.bg-organic-shape {
    position: fixed;
    top: -10vh;
    left: -10vw;
    width: 80vw;
    height: 80vh;
    background: var(--stone-mid);
    opacity: 0.05;
    border-radius: 62% 38% 46% 54% / 58% 42% 68% 32%;
    pointer-events: none;
    z-index: 0;
}

/* ---- Grain / Texture Overlay ---- */
.grain-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

.grain-overlay--dark {
    opacity: 0.06;
}

/* ---- Moss-green Dots (decorative) ---- */
.moss-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--moss);
    opacity: 0.35;
    pointer-events: none;
}

.moss-dot--light {
    background: var(--moss);
    opacity: 0.25;
}

/* ---- Wavy Divider ---- */
.wavy-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    padding: 0.5rem 0;
}

.wavy-divider--dark {
    background: transparent;
}

.wavy-line-svg {
    width: 100%;
    height: 16px;
    display: block;
}

/* ============================================
   FIND: Hero Zone (0–100vh)
   Warm parchment fills. Brand name in Georgia.
   An organic blob container. Quiet.
   ============================================ */
.find-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--parchment);
    padding: 4rem 2rem 6rem;
}

.hero-inner {
    text-align: center;
    position: relative;
    z-index: 1;
}

.brand-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 9vw, 3.25rem);
    color: var(--stone-dark);
    letter-spacing: 0.08em;
    margin-bottom: 2.5rem;
}

/* An organic blob container with pebble silhouette */
.blob-tagline {
    display: inline-block;
    background: var(--stone-light);
    border: 1px solid var(--stone-light);
    border-radius: 40% 60% 55% 45% / 60% 40% 50% 50%;
    padding: 2.2rem 3.5rem;
    position: relative;
}

.tagline-text {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--stone-dark);
    letter-spacing: 0.02em;
}

/* ============================================
   GATHER: Stone Sections (100–260vh)
   Stone-shaped containers with varied radius.
   Content in warm tones. Each unique in shape.
   ============================================ */
.gather-section {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
    padding: 5rem 2rem 6rem;
}

/* Pebble cards — each has a unique organic border-radius */
.pebble-card {
    position: relative;
    background: var(--stone-light);
    border: 1px solid var(--stone-light);
    width: 100%;
    max-width: 580px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.pebble-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* No two shapes identical — asymmetric organic border-radius */
.shape-a {
    border-radius: 40% 60% 55% 45% / 60% 40% 50% 50%;
    padding: 3.2rem 3rem 2.8rem;
}

.shape-b {
    border-radius: 55% 45% 48% 52% / 42% 58% 44% 56%;
    padding: 2.6rem 3.4rem 3rem;
}

.shape-c {
    border-radius: 48% 52% 60% 40% / 55% 45% 50% 50%;
    padding: 3rem 2.8rem 3.4rem;
}

.shape-d {
    border-radius: 44% 56% 50% 50% / 52% 48% 58% 42%;
    padding: 2.8rem 3.2rem 2.6rem;
}

.pebble-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: clamp(1.4rem, 4vw, 1.7rem);
    color: var(--text);
    margin-bottom: 1rem;
}

.pebble-body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--stone-dark);
}

.card-label {
    display: inline-block;
    margin-top: 1.2rem;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone-mid);
}

/* ============================================
   RIVER: Pebble Circle Band (260–340vh)
   Horizontal band of small pebble circles in
   earth tones. Organic arrangement.
   ============================================ */
.river-section {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--parchment);
    padding: 5rem 2rem 6rem;
    overflow: hidden;
}

.river-bed {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 650px;
    position: relative;
    z-index: 1;
}

/* Individual pebble circles */
.pebble-dot {
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.pebble-dot:hover {
    transform: scale(1.25);
}

/* ============================================
   REST: Moss Footer (340vh+)
   Darker earthy section. Moss green accents.
   Sparse text. A wavy line closes.
   ============================================ */
.rest-section {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    padding: 6rem 2rem 5rem;
}

.rest-inner {
    text-align: center;
    position: relative;
    z-index: 1;
}

.rest-phrase {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: clamp(1.3rem, 4vw, 1.6rem);
    color: var(--stone-mid);
    margin-bottom: 2.5rem;
    letter-spacing: 0.04em;
}

.rest-wavy-close {
    width: 140px;
    margin: 0 auto 2.5rem;
}

.rest-wavy-svg {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.55;
}

.rest-footnote {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--stone-dark);
    text-transform: uppercase;
}

/* ---- Animations ---- */
@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2px, -3px) rotate(0.5deg); }
    50% { transform: translate(-1px, 2px) rotate(-0.3deg); }
    75% { transform: translate(1px, -1px) rotate(0.2deg); }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.brand-name {
    animation: fadeUp 1.2s ease both;
}

.blob-tagline {
    animation: fadeUp 1.4s 0.3s ease both, breathe 6s 2s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .gather-section {
        padding: 3rem 1.2rem 4rem;
        gap: 2.5rem;
    }

    .pebble-card {
        max-width: 100%;
    }

    .shape-a,
    .shape-b,
    .shape-c,
    .shape-d {
        padding: 2rem 1.8rem;
    }

    .river-bed {
        max-width: 100%;
        gap: 8px;
    }
}