/* ==========================================================================
   bada.studio - Flat-Design Progressive Narrative
   Palette: Living Gradient System
   Typography: Humanist Warmth System (Fraunces, Source Sans 3, Caveat)
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
    --bg-start: #FFF8F0;
    --bg-end: #F0E6D8;
    --scene-a-start: #FDEBD3;
    --scene-a-end: #E8D5C4;
    --scene-b-start: #E6F0E8;
    --scene-b-end: #D4E8D6;
    --accent-primary: #D4785C;
    --accent-secondary: #5B8C6A;
    --accent-tertiary: #D4A94E;
    --text-primary: #2D2A26;
    --text-secondary: #6B6560;
    --container-tint: rgba(255, 252, 248, 0.7);
    --ease-entry: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-heading: 'Fraunces', serif;
    --font-body: 'Source Sans 3', sans-serif;
    --font-accent: 'Caveat', cursive;
}

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

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-primary);
    background: linear-gradient(
        180deg,
        #FFF8F0 0%,
        #FDEBD3 10%,
        #E8D5C4 20%,
        #E6F0E8 30%,
        #D4E8D6 40%,
        #FDEBD3 50%,
        #E8D5C4 60%,
        #E6F0E8 70%,
        #D4E8D6 80%,
        #F0E6D8 90%,
        #FDEBD3 100%
    );
    background-size: 100% 600vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1.2;
    font-variation-settings: 'WONK' 1;
}

h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

p:last-child {
    margin-bottom: 0;
}

/* --- Scene Base --- */
.scene {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.scene-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 60px 40px;
}

/* --- Growth Ring Decorations --- */
.growth-ring {
    position: fixed;
    border-radius: 50%;
    border: 1px solid var(--accent-tertiary);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.growth-ring::before,
.growth-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--accent-tertiary);
    opacity: 0.15;
}

.growth-ring-1 {
    width: 350px;
    height: 350px;
    top: 15%;
    left: -80px;
    opacity: 0.2;
}

.growth-ring-1::before {
    width: 260px;
    height: 260px;
    top: 45px;
    left: 45px;
}

.growth-ring-1::after {
    width: 170px;
    height: 170px;
    top: 90px;
    left: 90px;
}

.growth-ring-2 {
    width: 450px;
    height: 450px;
    top: 35%;
    right: -120px;
    opacity: 0.15;
}

.growth-ring-2::before {
    width: 340px;
    height: 340px;
    top: 55px;
    left: 55px;
}

.growth-ring-2::after {
    width: 230px;
    height: 230px;
    top: 110px;
    left: 110px;
}

.growth-ring-3 {
    width: 300px;
    height: 300px;
    top: 60%;
    left: 5%;
    opacity: 0.18;
}

.growth-ring-3::before {
    width: 220px;
    height: 220px;
    top: 40px;
    left: 40px;
}

.growth-ring-3::after {
    width: 140px;
    height: 140px;
    top: 80px;
    left: 80px;
}

.growth-ring-4 {
    width: 500px;
    height: 500px;
    top: 80%;
    right: -150px;
    opacity: 0.12;
}

.growth-ring-4::before {
    width: 380px;
    height: 380px;
    top: 60px;
    left: 60px;
}

.growth-ring-4::after {
    width: 260px;
    height: 260px;
    top: 120px;
    left: 120px;
}

/* --- Flowing Line Connectors --- */
.flowing-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.flow-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 3s var(--ease-entry);
}

.flow-line.animate {
    stroke-dashoffset: 0;
}

/* --- Organic Containers --- */
.organic-container {
    background: var(--container-tint);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 28px;
    padding: 40px;
    position: relative;
}

/* --- Reveal Animation Base --- */
.reveal-element {
    opacity: 0;
    transform: scale(0.92) translateY(30px);
    transition: opacity 800ms var(--ease-entry), transform 800ms var(--ease-entry);
}

.reveal-element.revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* =========================================================================
   Scene 1: Seed
   ========================================================================= */
.scene-1 {
    background: linear-gradient(180deg, #FFF8F0, #FDEBD3);
}

.seed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    padding: 40px;
}

.seed-illustration {
    margin-bottom: 40px;
    transition: transform 1.2s var(--ease-spring);
}

.seed-left,
.seed-right {
    transform-origin: 24px 24px;
    transition: transform 1s var(--ease-spring);
}

.seed-cracked .seed-left {
    transform: translateX(-6px) rotate(-8deg);
}

.seed-cracked .seed-right {
    transform: translateX(6px) rotate(8deg);
}

.site-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    color: var(--accent-primary);
    font-variation-settings: 'WONK' 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s var(--ease-entry), transform 1.2s var(--ease-entry);
    letter-spacing: -0.02em;
}

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

.site-tagline {
    font-family: var(--font-accent);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--text-secondary);
    margin-top: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s var(--ease-entry) 0.4s, transform 1s var(--ease-entry) 0.4s;
}

.site-tagline.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   Scene 2: Roots
   ========================================================================= */
.scene-2 {
    background: linear-gradient(180deg, #FDEBD3, #E8D5C4);
    flex-direction: column;
    padding: 80px 0;
}

.roots-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1200px;
    padding: 60px 40px;
}

.container-roots-1 {
    max-width: 600px;
    align-self: flex-start;
    margin-left: 60px;
}

.container-roots-2 {
    max-width: 560px;
    align-self: flex-end;
    margin-right: 60px;
}

.container-roots-3 {
    max-width: 520px;
    align-self: flex-start;
    margin-left: 120px;
}

.roots-illustration {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    z-index: 1;
    width: clamp(200px, 30vw, 400px);
    height: auto;
}

/* =========================================================================
   Scene 3: Canopy
   ========================================================================= */
.scene-3 {
    background: linear-gradient(180deg, #E6F0E8, #D4E8D6);
}

.canopy-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    padding: 60px 40px;
    position: relative;
    z-index: 2;
}

.canopy-illustration {
    flex-shrink: 0;
    width: clamp(250px, 35vw, 500px);
    height: auto;
}

.leaf {
    opacity: 0;
    transform-origin: center center;
    transition: opacity 700ms var(--ease-entry), transform 700ms var(--ease-entry);
}

.leaf.animate {
    opacity: 1;
}

.canopy-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 540px;
}

.container-canopy {
    border-radius: 32px;
}

.container-canopy-2 {
    border-radius: 28px;
}

/* =========================================================================
   Scene 4: Bloom
   ========================================================================= */
.scene-4 {
    background: linear-gradient(180deg, #FDEBD3, #E8D5C4);
}

.bloom-content {
    text-align: center;
}

.scene-heading {
    margin-bottom: 60px;
}

.bloom-containers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.bloom-bud {
    background: var(--container-tint);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 200px;
    padding: 50px 40px;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 900ms var(--ease-spring), opacity 900ms var(--ease-entry), border-radius 900ms var(--ease-spring);
    overflow: hidden;
}

.bloom-bud.revealed {
    transform: scale(1);
    opacity: 1;
    border-radius: 24px;
}

.bloom-bud-1 {
    max-width: 480px;
    flex: 1 1 380px;
}

.bloom-bud-2 {
    max-width: 520px;
    flex: 1 1 400px;
}

.bloom-bud-3 {
    max-width: 440px;
    flex: 1 1 360px;
}

.bloom-inner {
    text-align: left;
}

.bloom-inner h3 {
    color: var(--accent-secondary);
}

/* =========================================================================
   Scene 5: Fruit
   ========================================================================= */
.scene-5 {
    background: linear-gradient(180deg, #E6F0E8, #D4E8D6);
}

.fruit-content {
    text-align: center;
}

.fruit-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 20px;
}

.fruit-item {
    background: var(--container-tint);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 32px;
    max-width: 360px;
    text-align: left;
    opacity: 0;
    transform: translateY(-60px);
    transition: opacity 700ms var(--ease-entry), transform 700ms cubic-bezier(0.25, 0.46, 0.45, 1.04);
}

.fruit-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.fruit-label {
    font-family: var(--font-accent);
    font-size: 1.25rem;
    color: var(--accent-secondary);
    display: block;
    margin-bottom: 8px;
}

.fruit-item-1 {
    flex: 0 1 320px;
    margin-top: 0;
}

.fruit-item-2 {
    flex: 0 1 340px;
    margin-top: 30px;
}

.fruit-item-3 {
    flex: 0 1 300px;
    margin-top: -10px;
}

.fruit-item-4 {
    flex: 0 1 330px;
    margin-top: 20px;
}

.fruit-item-5 {
    flex: 0 1 310px;
    margin-top: -20px;
}

/* =========================================================================
   Scene 6: Horizon
   ========================================================================= */
.scene-6 {
    background: linear-gradient(180deg, #F0E6D8, #FDEBD3);
}

.horizon-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 60px 40px;
}

.horizon-heading {
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--accent-primary);
    margin-bottom: 40px;
    font-variation-settings: 'WONK' 1;
}

.horizon-message {
    margin-bottom: 40px;
}

.typewriter-text {
    font-family: var(--font-accent);
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--accent-tertiary);
    width: 0;
    transition: width 2s steps(40, end);
}

.typewriter-text.typing {
    width: 100%;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--accent-tertiary); }
}

.contact-line {
    font-family: var(--font-accent);
    font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    color: var(--accent-primary);
    text-decoration: none;
    opacity: 0;
    transition: opacity 800ms var(--ease-entry);
}

.contact-line.visible {
    opacity: 1;
}

/* --- Petal Display (Scene 6 decoration) --- */
.petal-display {
    position: absolute;
    bottom: 100px;
    right: 10%;
    width: 200px;
    height: 200px;
    z-index: 1;
    opacity: 0.4;
}

.petal-ring {
    position: relative;
    width: 100%;
    height: 100%;
    animation: slow-rotate 60s linear infinite;
}

@keyframes slow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.display-petal {
    position: absolute;
    width: 60px;
    height: 24px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform-origin: 0% 50%;
}

.display-petal-1 {
    background: linear-gradient(90deg, #D4785C, #E8A88C);
    transform: rotate(0deg) translateX(30px);
}

.display-petal-2 {
    background: linear-gradient(90deg, #5B8C6A, #8AB89A);
    transform: rotate(60deg) translateX(30px);
}

.display-petal-3 {
    background: linear-gradient(90deg, #D4A94E, #E8C878);
    transform: rotate(120deg) translateX(30px);
}

.display-petal-4 {
    background: linear-gradient(90deg, #D4785C, #E8A88C);
    transform: rotate(180deg) translateX(30px);
}

.display-petal-5 {
    background: linear-gradient(90deg, #5B8C6A, #8AB89A);
    transform: rotate(240deg) translateX(30px);
}

.display-petal-6 {
    background: linear-gradient(90deg, #D4A94E, #E8C878);
    transform: rotate(300deg) translateX(30px);
}

/* =========================================================================
   Floating Petal Navigation
   ========================================================================= */
.petal-nav {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 100;
}

.nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
    width: 56px;
    height: 56px;
    position: relative;
    z-index: 101;
    transition: transform 300ms var(--ease-spring);
}

.nav-toggle:hover {
    transform: scale(1.1);
}

.nav-toggle.active {
    transform: rotate(45deg);
}

.petal-menu {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 280px;
    height: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms var(--ease-entry);
}

.petal-menu.open {
    pointer-events: all;
    opacity: 1;
}

.petal {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    transform: scale(0) translate(0, 0);
    transition: transform 400ms var(--ease-spring), opacity 300ms var(--ease-entry);
    opacity: 0;
}

.petal-menu.open .petal {
    opacity: 1;
}

.petal-label {
    font-family: var(--font-accent);
    font-size: 0.875rem;
    color: #FFFCF8;
    white-space: nowrap;
    pointer-events: none;
}

.petal-1 {
    background: linear-gradient(135deg, #D4785C, #E8A88C);
}

.petal-2 {
    background: linear-gradient(135deg, #5B8C6A, #8AB89A);
}

.petal-3 {
    background: linear-gradient(135deg, #D4E8D6, #5B8C6A);
}

.petal-4 {
    background: linear-gradient(135deg, #D4A94E, #E8C878);
}

.petal-5 {
    background: linear-gradient(135deg, #5B8C6A, #8AB89A);
}

.petal-6 {
    background: linear-gradient(135deg, #D4785C, #E8A88C);
}

/* Petal positions when open (sunflower spiral) */
.petal-menu.open .petal-1 {
    transform: scale(1) translate(-30px, -80px);
}

.petal-menu.open .petal-2 {
    transform: scale(1) translate(-100px, -50px);
}

.petal-menu.open .petal-3 {
    transform: scale(1) translate(-120px, 20px);
}

.petal-menu.open .petal-4 {
    transform: scale(1) translate(-80px, 80px);
}

.petal-menu.open .petal-5 {
    transform: scale(1) translate(-10px, 70px);
}

.petal-menu.open .petal-6 {
    transform: scale(1) translate(10px, -10px);
}

/* Stagger petal entry */
.petal-menu.open .petal-1 { transition-delay: 0ms; }
.petal-menu.open .petal-2 { transition-delay: 50ms; }
.petal-menu.open .petal-3 { transition-delay: 100ms; }
.petal-menu.open .petal-4 { transition-delay: 150ms; }
.petal-menu.open .petal-5 { transition-delay: 200ms; }
.petal-menu.open .petal-6 { transition-delay: 250ms; }

.petal:hover {
    filter: brightness(1.1);
    transform: scale(1.12) !important;
}

/* =========================================================================
   Mobile Responsive (< 768px)
   ========================================================================= */
@media (max-width: 768px) {
    .scene-content {
        padding: 40px 24px;
    }

    .roots-content {
        padding: 40px 24px;
    }

    .container-roots-1,
    .container-roots-2,
    .container-roots-3 {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        align-self: stretch;
    }

    .roots-illustration {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 200px;
        margin: 0 auto;
        display: block;
    }

    .canopy-layout {
        flex-direction: column;
        padding: 40px 24px;
        gap: 40px;
    }

    .canopy-illustration {
        width: 250px;
        order: -1;
    }

    .canopy-text {
        max-width: 100%;
    }

    .bloom-containers {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .bloom-bud-1,
    .bloom-bud-2,
    .bloom-bud-3 {
        max-width: 100%;
        flex: 1 1 auto;
    }

    .fruit-cluster {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .fruit-item {
        max-width: 100%;
    }

    .fruit-item-1,
    .fruit-item-2,
    .fruit-item-3,
    .fruit-item-4,
    .fruit-item-5 {
        margin-top: 0;
    }

    .petal-display {
        display: none;
    }

    .horizon-content {
        padding: 40px 24px;
    }

    .petal-nav {
        bottom: 20px;
        right: 20px;
    }

    .growth-ring-1,
    .growth-ring-2,
    .growth-ring-3,
    .growth-ring-4 {
        display: none;
    }
}

/* =========================================================================
   Tablet (769px - 1024px)
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    .container-roots-1 {
        margin-left: 30px;
    }

    .container-roots-2 {
        margin-right: 30px;
    }

    .container-roots-3 {
        margin-left: 60px;
    }

    .canopy-layout {
        gap: 40px;
    }

    .canopy-illustration {
        width: 300px;
    }
}