/* ===================================================
   concengine.com — Neomorphic Herbarium Engine
   Color Palette:
     Substrate:       #E8E0D4 (Warm Parchment)
     Primary Text:    #3D3228 (Dark Umber)
     Body Text:       #5C4F42 (Medium Umber)
     Annotation:      #7B6B5A (Dusty Taupe)
     Botanical:       #6B7F5E (Sage Moss)
     Floral:          #C4956A (Aged Ochre)
     Shadow Dark:     #A39480 (Clay Shadow)
     Shadow Light:    #FFFFFC (Bone White)
     Stipple:         #8B7D6B (Paper Grain)
   =================================================== */

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

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

body {
    background-color: #E8E0D4;
    color: #5C4F42;
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- Stipple Grain Canvas ---- */
#stipple-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* ---- Scenes ---- */
.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 5vh 3vw;
    z-index: 1;
}

.scene + .scene {
    margin-top: 20vh;
}

.scene-opening {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* ---- Specimen Trays (Neomorphic Containers) ---- */
.specimen-tray {
    position: absolute;
    left: var(--offset-x, 5vw);
    top: var(--offset-y, 10vh);
    background-color: #E8E0D4;
    border-radius: 24px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow:
        -6px -6px 16px rgba(255, 255, 252, 0.8),
        6px 6px 16px rgba(163, 148, 128, 0.35);
    max-width: clamp(300px, 38vw, 520px);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    z-index: 1;
}

.specimen-tray.visible {
    opacity: 1;
    transform: translateY(0);
}

.tray-illustration {
    max-width: clamp(280px, 35vw, 450px);
    padding: clamp(1rem, 2vw, 2rem);
}

.tray-title {
    z-index: 2;
}

.tray-closing {
    position: relative;
    left: auto;
    top: auto;
    margin: 15vh auto;
    max-width: clamp(320px, 50vw, 600px);
}

/* Stagger second tray in each scene */
.scene .specimen-tray:nth-child(2) {
    transition-delay: 0.2s;
}

/* ---- Typography ---- */
.site-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4.5rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #3D3228;
    margin-bottom: 0.3em;
}

.title-rule {
    width: 100%;
    height: 1px;
    background-color: #A39480;
    margin-bottom: 1em;
    opacity: 0.6;
}

.section-heading {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #3D3228;
    margin-bottom: 0.6em;
}

.body-text {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: #5C4F42;
    margin-bottom: 1em;
}

.body-text:last-child {
    margin-bottom: 0;
}

.botanical-latin {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-weight: 400;
    color: #3D3228;
}

/* ---- Annotation Layer ---- */
.annotation {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    color: #7B6B5A;
}

.margin-note {
    position: absolute;
    left: var(--note-x, 80%);
    top: var(--note-y, 10%);
    max-width: 200px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out 1s, transform 0.6s ease-out 1s;
    z-index: 3;
    pointer-events: none;
}

.margin-note.visible {
    opacity: 1;
    transform: scale(1);
}

.closing-annotation {
    text-align: center;
    margin-top: 2em;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}

/* ---- Callout Badges ---- */
.callout-badge {
    position: absolute;
    left: var(--badge-x, 50vw);
    top: var(--badge-y, 20vh);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #E8E0D4;
    box-shadow:
        inset -3px -3px 8px rgba(255, 255, 252, 0.7),
        inset 3px 3px 8px rgba(163, 148, 128, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #7B6B5A;
    z-index: 3;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease-out 1.2s, transform 0.5s ease-out 1.2s;
}

.callout-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* ---- Seed Dots ---- */
.seed-cluster {
    position: absolute;
    left: var(--cx, 50vw);
    top: var(--cy, 90vh);
    z-index: 2;
}

.seed-dot {
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #C4956A;
    transform: translate(var(--dx, 0), var(--dy, 0));
    opacity: 0.6;
}

/* ---- Thorn Markers ---- */
.thorn {
    opacity: 0;
    transition: opacity 0.4s ease-out;
    transition-delay: var(--delay, 1s);
}

.thorn.visible {
    opacity: 1;
}

/* ---- Dot Navigation ---- */
#dot-nav {
    position: fixed;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 100;
}

.dot-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: #E8E0D4;
    cursor: pointer;
    box-shadow:
        -2px -2px 5px rgba(255, 255, 252, 0.8),
        2px 2px 5px rgba(163, 148, 128, 0.35);
    transition: box-shadow 0.2s ease-in-out;
}

.dot-btn:hover {
    box-shadow:
        -1px -1px 3px rgba(255, 255, 252, 0.6),
        1px 1px 3px rgba(163, 148, 128, 0.25);
}

.dot-btn.active {
    box-shadow:
        inset 2px 2px 4px rgba(163, 148, 128, 0.35),
        inset -2px -2px 4px rgba(255, 255, 252, 0.6);
}

/* ---- Botanical SVGs ---- */
.botanical-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Path-draw animation */
.draw-path {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 2.5s ease-in-out;
    transition-delay: var(--delay, 0s);
}

.draw-path.animate {
    stroke-dashoffset: 0;
}

/* Root paths draw slightly faster */
.root-path {
    transition-duration: 1.8s;
}

/* Leaves: fade and unfurl */
.leaf {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.6s ease-out;
    transition-delay: var(--delay, 1.3s);
}

.leaf.animate {
    opacity: 1;
}

/* Flowers: scale in */
.flower {
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.3s ease-out;
    transition-delay: var(--delay, 2s);
}

.flower.animate {
    transform: scale(1);
}

.flower-center {
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.3s ease-out;
    transition-delay: var(--delay, 2.2s);
}

.flower-center.animate {
    transform: scale(1);
}

/* Pollen dots float in */
.pollen-dot {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    transition-delay: var(--delay, 2.5s);
}

.pollen-dot.animate {
    opacity: 1;
}

/* ---- Vine Border Decorations (annotation layer SVG overlays) ---- */
.vine-border {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}

/* ---- Mobile Adaptation ---- */
@media (max-width: 768px) {
    .specimen-tray {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: calc(100vw - 6vw);
        max-width: none;
        margin: 2vh auto;
    }

    .specimen-tray:nth-child(odd) {
        margin-left: 3vw;
    }

    .specimen-tray:nth-child(even) {
        margin-right: 3vw;
        margin-left: auto;
    }

    .tray-illustration {
        max-width: none;
        width: calc(100vw - 6vw);
    }

    .tray-closing {
        margin: 8vh auto;
    }

    .scene {
        min-height: auto;
        padding: 3vh 0;
    }

    .scene + .scene {
        margin-top: 8vh;
    }

    .scene-opening {
        display: block;
        min-height: auto;
    }

    .margin-note {
        position: relative;
        left: auto !important;
        top: auto !important;
        display: block;
        margin: 1em 3vw;
        max-width: none;
    }

    .callout-badge {
        display: none;
    }

    #dot-nav {
        right: 2vw;
        top: auto;
        bottom: 2vh;
        transform: none;
        flex-direction: row;
        gap: 10px;
    }

    .seed-cluster {
        display: none;
    }
}

/* ---- Small screens ---- */
@media (max-width: 480px) {
    .site-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .section-heading {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .specimen-tray {
        padding: 1.2rem;
        border-radius: 18px;
    }
}