/* ==========================================================
   daitoua.quest -- Computational Herbarium Styles
   Design: minimalist data-herbarium, Edo-period botanical
   ========================================================== */

/* --- CSS Custom Properties --- */
:root {
    --bg-primary: #F4F1EB;
    --bg-alt: #ECE8E0;
    --text-primary: #2C3E2C;
    --text-secondary: #6B7B6B;
    --accent-sage: #8B9A7B;
    --accent-petal: #C4A882;
    --accent-blue: #7B8FA8;
    --accent-vermillion: #B85C4A;
    --dark-surface: #2A2F2A;

    --font-mono: 'IBM Plex Mono', monospace;
    --font-display: 'Space Grotesk', sans-serif;

    --ease-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Taxonomy Sidebar --- */
#taxonomy-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 12%;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms var(--ease-organic);
}

#taxonomy-sidebar.visible {
    opacity: 1;
}

.taxonomy-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    opacity: 0.5;
    transform-origin: center center;
    user-select: none;
}

/* --- Main Content --- */
#main-content {
    margin-left: 12%;
    width: 88%;
    position: relative;
}

/* --- Specimen Plates --- */
.specimen-plate {
    position: relative;
    min-height: 100vh;
    padding: 6rem 4rem 8rem;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-organic), transform 600ms var(--ease-organic);
}

.specimen-plate.revealed {
    opacity: 1;
    transform: translateY(0);
}

.specimen-plate.alt-bg {
    background-color: var(--bg-alt);
}

/* --- Coordinate Grid Overlay --- */
.coordinate-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(107, 123, 107, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(107, 123, 107, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms var(--ease-organic);
}

.specimen-plate.revealed .coordinate-grid {
    opacity: 1;
}

/* --- Specimen Visuals --- */
.specimen-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 3rem;
    position: relative;
}

.specimen-visual svg {
    width: 100%;
    height: auto;
    display: block;
}

.hero-visual {
    max-width: min(70vw, 70vh);
    margin: 4rem auto 2rem;
}

#hero-flower {
    width: 100%;
    height: auto;
}

/* --- Radial Bar Chart Bars --- */
.radial-bar {
    transform-origin: center;
    opacity: 0;
    transition: opacity 150ms var(--ease-organic);
}

.radial-bar:hover {
    opacity: 1 !important;
    filter: brightness(1.15);
}

.radial-bar.drawn {
    opacity: 0.85;
}

/* --- Branch Paths --- */
.branch-path {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 800ms var(--ease-organic);
}

.specimen-plate.revealed .branch-path {
    stroke-dashoffset: 0;
}

/* --- Data Nodes --- */
.data-node {
    opacity: 0;
    transform: scale(0);
    transition: opacity 300ms var(--ease-organic), transform 300ms var(--ease-spring);
}

.specimen-plate.revealed .data-node {
    opacity: 1;
    transform: scale(1);
}

/* --- Scatter Leaves --- */
.scatter-leaf circle {
    opacity: 0;
    transition: opacity 400ms var(--ease-organic);
}

.specimen-plate.revealed .scatter-leaf circle {
    opacity: var(--target-opacity, 0.4);
}

/* --- Heatmap Petals --- */
.heatmap-petal {
    transform-origin: center;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 600ms var(--ease-organic), transform 600ms var(--ease-spring);
}

.specimen-plate.revealed .heatmap-petal {
    opacity: var(--target-opacity, 0.85);
    transform: scale(1) rotate(var(--rotation, 0deg));
}

/* --- Corner Specimens --- */
.corner-specimen {
    position: absolute;
    width: 60px;
    height: 80px;
    opacity: 0.25;
    pointer-events: none;
}

.corner-tr {
    top: 2rem;
    right: 2rem;
}

.corner-bl {
    bottom: 2rem;
    left: 2rem;
}

/* --- Annotation Labels --- */
.annotation-label {
    position: absolute;
    max-width: 220px;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 300ms var(--ease-organic), transform 300ms var(--ease-organic);
}

.specimen-plate.revealed .annotation-label {
    opacity: 0.6;
    transform: translateX(0);
}

.anno-line {
    display: block;
    width: 2px;
    height: 100%;
    position: absolute;
    left: -10px;
    top: 0;
    background-color: var(--accent-sage);
    opacity: 0.4;
    transition: opacity 300ms var(--ease-organic);
}

.annotation-label:hover .anno-line {
    opacity: 0.8;
}

.annotation-label:hover .anno-text {
    color: var(--text-primary);
}

.anno-text {
    display: block;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-secondary);
    transition: color 300ms var(--ease-organic);
}

/* --- Hero Stem Line --- */
.stem-line {
    display: block;
    width: 4px;
    height: 120px;
    margin: 0 auto 2rem;
}

.stem-line line {
    transition: stroke-dashoffset 600ms var(--ease-organic) 1800ms;
}

.specimen-plate.revealed .stem-line line {
    stroke-dashoffset: 0;
}

/* --- Thesis Text --- */
.thesis-text {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 600ms var(--ease-organic) 2400ms;
}

.specimen-plate.revealed .thesis-text {
    opacity: 1;
}

/* --- Plate Description --- */
.plate-description {
    max-width: 560px;
    margin: 3rem auto 2rem;
    text-align: left;
    position: relative;
    z-index: 2;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.plate-description p {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: var(--text-primary);
}

/* --- Petal Dividers --- */
.petal-divider {
    width: 60%;
    margin: 0 auto;
    padding: 4rem 0;
    opacity: 0;
    transition: opacity 400ms var(--ease-organic);
}

.petal-divider.visible {
    opacity: 1;
}

.petal-divider svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Hanko Stamps --- */
.hanko-stamp {
    position: absolute;
    bottom: 3rem;
    right: 4rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--accent-vermillion);
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 200ms var(--ease-organic), transform 200ms var(--ease-spring);
    z-index: 5;
}

.specimen-plate.revealed .hanko-stamp {
    opacity: 1;
    transform: scale(1);
}

/* --- Colophon / Footer --- */
#colophon {
    padding: 8rem 4rem 6rem;
    text-align: center;
    position: relative;
}

.colophon-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.colophon-sub {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto 3rem;
}

.final-stamp {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 0 auto;
    width: 36px;
    height: 36px;
    font-size: 0.7rem;
    opacity: 1;
    transform: scale(1);
}

/* --- Data Tooltip --- */
.data-tooltip {
    position: fixed;
    padding: 6px 10px;
    background-color: rgba(42, 47, 42, 0.9);
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.7rem;
    line-height: 1.4;
    border: 1px solid var(--accent-sage);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 150ms var(--ease-organic), transform 150ms var(--ease-organic);
    z-index: 1000;
    white-space: nowrap;
}

.data-tooltip.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- SVG Grid Underlay (inside SVGs) --- */
.svg-grid line {
    pointer-events: none;
}

/* --- Hero Annotation Stagger --- */
#specimen-hero .annotation-label:nth-child(3) { transition-delay: 1800ms; }
#specimen-hero .annotation-label:nth-child(4) { transition-delay: 1920ms; }
#specimen-hero .annotation-label:nth-child(5) { transition-delay: 2040ms; }
#specimen-hero .annotation-label:nth-child(6) { transition-delay: 2160ms; }

/* Stagger annotation labels in non-hero sections */
.specimen-plate:not(#specimen-hero) .annotation-label:nth-of-type(1) {
    transition-delay: 800ms;
}
.specimen-plate:not(#specimen-hero) .annotation-label:nth-of-type(2) {
    transition-delay: 860ms;
}
.specimen-plate:not(#specimen-hero) .annotation-label:nth-of-type(3) {
    transition-delay: 920ms;
}

/* Stagger hanko stamp timing */
.specimen-plate .hanko-stamp {
    transition-delay: 1100ms;
}

/* Stagger data nodes */
.specimen-plate.revealed .data-node:nth-of-type(1) { transition-delay: 300ms; }
.specimen-plate.revealed .data-node:nth-of-type(2) { transition-delay: 360ms; }
.specimen-plate.revealed .data-node:nth-of-type(3) { transition-delay: 420ms; }
.specimen-plate.revealed .data-node:nth-of-type(4) { transition-delay: 480ms; }
.specimen-plate.revealed .data-node:nth-of-type(5) { transition-delay: 540ms; }
.specimen-plate.revealed .data-node:nth-of-type(6) { transition-delay: 600ms; }
.specimen-plate.revealed .data-node:nth-of-type(7) { transition-delay: 660ms; }
.specimen-plate.revealed .data-node:nth-of-type(8) { transition-delay: 720ms; }
.specimen-plate.revealed .data-node:nth-of-type(9) { transition-delay: 780ms; }
.specimen-plate.revealed .data-node:nth-of-type(10) { transition-delay: 840ms; }
.specimen-plate.revealed .data-node:nth-of-type(11) { transition-delay: 900ms; }
.specimen-plate.revealed .data-node:nth-of-type(12) { transition-delay: 960ms; }
.specimen-plate.revealed .data-node:nth-of-type(13) { transition-delay: 1020ms; }

/* Stagger heatmap petals */
.heatmap-petal:nth-of-type(1) { transition-delay: 0ms; }
.heatmap-petal:nth-of-type(2) { transition-delay: 80ms; }
.heatmap-petal:nth-of-type(3) { transition-delay: 160ms; }
.heatmap-petal:nth-of-type(4) { transition-delay: 240ms; }
.heatmap-petal:nth-of-type(5) { transition-delay: 320ms; }
.heatmap-petal:nth-of-type(6) { transition-delay: 400ms; }
.heatmap-petal:nth-of-type(7) { transition-delay: 480ms; }
.heatmap-petal:nth-of-type(8) { transition-delay: 560ms; }

/* Scatter leaves stagger */
.scatter-leaf circle:nth-of-type(1) { transition-delay: 200ms; }
.scatter-leaf circle:nth-of-type(2) { transition-delay: 240ms; }
.scatter-leaf circle:nth-of-type(3) { transition-delay: 280ms; }
.scatter-leaf circle:nth-of-type(4) { transition-delay: 320ms; }
.scatter-leaf circle:nth-of-type(5) { transition-delay: 360ms; }
.scatter-leaf circle:nth-of-type(6) { transition-delay: 400ms; }
.scatter-leaf circle:nth-of-type(7) { transition-delay: 440ms; }
.scatter-leaf circle:nth-of-type(8) { transition-delay: 480ms; }
.scatter-leaf circle:nth-of-type(9) { transition-delay: 520ms; }
.scatter-leaf circle:nth-of-type(10) { transition-delay: 560ms; }
.scatter-leaf circle:nth-of-type(11) { transition-delay: 600ms; }
.scatter-leaf circle:nth-of-type(12) { transition-delay: 640ms; }

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    #taxonomy-sidebar {
        width: 4px;
        background-color: var(--accent-sage);
        opacity: 0.4;
    }

    #taxonomy-sidebar.visible {
        opacity: 0.4;
    }

    .taxonomy-label {
        display: none;
    }

    #main-content {
        margin-left: 12px;
        width: calc(100% - 12px);
    }

    .specimen-plate {
        padding: 4rem 1.5rem 6rem;
        min-height: auto;
    }

    .hero-visual {
        max-width: 85vw;
    }

    .annotation-label {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 100%;
        margin-bottom: 1rem;
        transform: none;
        padding-left: 14px;
    }

    .anno-line {
        left: 0;
    }

    .specimen-visual {
        max-width: 100%;
    }

    .plate-description {
        max-width: 100%;
    }

    .petal-divider {
        width: 80%;
        padding: 2rem 0;
    }

    /* Reduce petals on mobile dividers */
    .petal-group ellipse:nth-child(n+6) {
        display: none;
    }

    .hanko-stamp {
        right: 1.5rem;
        bottom: 2rem;
    }

    .corner-specimen {
        display: none;
    }

    #colophon {
        padding: 4rem 1.5rem 3rem;
    }
}

/* --- Responsive: Tablet --- */
@media (min-width: 769px) and (max-width: 1024px) {
    #taxonomy-sidebar {
        width: 8%;
    }

    #main-content {
        margin-left: 8%;
        width: 92%;
    }

    .specimen-plate {
        padding: 5rem 2.5rem 6rem;
    }

    .annotation-label {
        max-width: 180px;
    }
}

/* --- Selection Color --- */
::selection {
    background-color: var(--accent-petal);
    color: var(--text-primary);
}

::-moz-selection {
    background-color: var(--accent-petal);
    color: var(--text-primary);
}