/* ============================================
   hwaglyul.com - Scholarly Botanical Journal
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --codex-black: #0F0A06;
    --umber-dark: #1A0E08;
    --parchment: #F5EDE0;
    --warm-stone: #D4C5B0;
    --muted-umber: #7A6B5A;
    --old-gold: #8B6914;
    --leaf-amber: #C8A882;
    --forest-veil: #1B2F1A;
    --bioluminescent: #A8D5A2;
    --dark-sepia: #3A2A1A;
    --gutter-dark: #2C1810;

    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'Source Serif 4', 'Georgia', serif;
    --font-caption: 'Alegreya Sans', 'Helvetica Neue', sans-serif;

    --scroll-offset: 0;
}

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

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

body {
    background-color: var(--codex-black);
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--parchment);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

p {
    color: var(--warm-stone);
    margin-bottom: 1.25rem;
}

em {
    font-style: italic;
}

/* --- Spread System --- */
.spread {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

.spread-grid {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px;
}

.spread-grid.reverse {
    direction: rtl;
}

.spread-grid.reverse > * {
    direction: ltr;
}

/* --- Text Field --- */
.text-field {
    display: flex;
    align-items: center;
    padding: 60px 40px 60px 20px;
    grid-column: 1;
}

.spread-grid.reverse .text-field {
    grid-column: 3;
    padding: 60px 20px 60px 40px;
}

.text-field-inner {
    max-width: 560px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

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

/* --- Spread Labels --- */
.spread-label {
    display: block;
    font-family: var(--font-caption);
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-umber);
    margin-bottom: 1rem;
}

/* --- Gutter (Book Binding) --- */
.gutter {
    grid-column: 2;
    position: relative;
    background: linear-gradient(to right, var(--gutter-dark), var(--umber-dark));
    will-change: transform;
}

.gutter-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--leaf-amber);
    transform: translateX(-50%);
}

/* --- Specimen Field --- */
.specimen-field {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 60px 40px;
    grid-column: 3;
}

.spread-grid.reverse .specimen-field {
    grid-column: 1;
    padding: 60px 40px 60px 20px;
}

.specimen-frame {
    border: 2px solid var(--leaf-amber);
    padding: 16px;
    background-color: var(--codex-black);
    max-width: 480px;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
}

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

.specimen-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
    filter: saturate(0.7) sepia(0.15);
    transition: filter 2s ease, box-shadow 2s ease;
}

.specimen-image.alive {
    filter: saturate(1.0) sepia(0.05);
    box-shadow: inset 0 0 60px rgba(168, 213, 162, 0.08);
}

/* --- Specimen Placeholder Art (CSS-generated) --- */
.specimen-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
}

.specimen-leaf-venation {
    background:
        linear-gradient(var(--forest-veil), #0a1a09),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(168, 213, 162, 0.06) 8px,
            rgba(168, 213, 162, 0.06) 9px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 12px,
            rgba(200, 168, 130, 0.05) 12px,
            rgba(200, 168, 130, 0.05) 13px
        ),
        radial-gradient(ellipse at 40% 30%, rgba(168, 213, 162, 0.12) 0%, transparent 60%);
    background-color: #0d1f0c;
}

.specimen-bark-texture {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(200, 168, 130, 0.08) 0px,
            transparent 2px,
            transparent 6px,
            rgba(200, 168, 130, 0.05) 8px,
            transparent 10px,
            transparent 18px
        ),
        repeating-linear-gradient(
            3deg,
            rgba(200, 168, 130, 0.04) 0px,
            transparent 1px,
            transparent 11px,
            rgba(139, 105, 20, 0.06) 12px,
            transparent 14px,
            transparent 24px
        ),
        linear-gradient(175deg, #2C1810 0%, #1A0E08 40%, #3A2A1A 70%, #2C1810 100%);
    background-color: var(--dark-sepia);
}

.specimen-moss {
    background:
        radial-gradient(circle at 30% 40%, rgba(168, 213, 162, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(168, 213, 162, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(27, 47, 26, 0.8) 0%, transparent 50%),
        repeating-radial-gradient(
            circle at 40% 50%,
            transparent 0px,
            transparent 20px,
            rgba(168, 213, 162, 0.04) 22px,
            transparent 24px
        ),
        linear-gradient(160deg, #1B2F1A 0%, #0F0A06 50%, #1B2F1A 100%);
    background-color: #0d1a0c;
}

.specimen-water-droplets {
    background:
        radial-gradient(circle 6px at 25% 30%, rgba(200, 220, 200, 0.2) 0%, transparent 100%),
        radial-gradient(circle 4px at 60% 20%, rgba(200, 220, 200, 0.15) 0%, transparent 100%),
        radial-gradient(circle 8px at 45% 55%, rgba(200, 220, 200, 0.18) 0%, transparent 100%),
        radial-gradient(circle 3px at 75% 45%, rgba(200, 220, 200, 0.12) 0%, transparent 100%),
        radial-gradient(circle 5px at 35% 75%, rgba(200, 220, 200, 0.16) 0%, transparent 100%),
        radial-gradient(circle 7px at 80% 70%, rgba(200, 220, 200, 0.14) 0%, transparent 100%),
        linear-gradient(170deg, #1B2F1A 0%, #0a1a09 30%, #1B2F1A 60%, #0F0A06 100%);
    background-color: #0d1a0c;
}

.specimen-lichen {
    background:
        radial-gradient(ellipse 80px 60px at 35% 45%, rgba(200, 168, 130, 0.12) 0%, transparent 100%),
        radial-gradient(ellipse 60px 40px at 65% 55%, rgba(168, 213, 162, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 100px 80px at 50% 50%, rgba(122, 107, 90, 0.1) 0%, transparent 100%),
        repeating-conic-gradient(
            from 0deg at 40% 50%,
            transparent 0deg,
            rgba(200, 168, 130, 0.03) 5deg,
            transparent 10deg
        ),
        linear-gradient(180deg, #3A2A1A 0%, #1A0E08 40%, #3A2A1A 80%, #2C1810 100%);
    background-color: #2C1810;
}

.specimen-fungal {
    background:
        radial-gradient(circle at 50% 50%, rgba(168, 213, 162, 0.1) 0%, transparent 30%),
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0px,
            transparent 15px,
            rgba(168, 213, 162, 0.03) 16px,
            transparent 18px
        ),
        conic-gradient(
            from 0deg at 50% 50%,
            rgba(200, 168, 130, 0.04) 0deg,
            transparent 30deg,
            rgba(200, 168, 130, 0.03) 60deg,
            transparent 90deg,
            rgba(200, 168, 130, 0.04) 120deg,
            transparent 150deg,
            rgba(200, 168, 130, 0.03) 180deg,
            transparent 210deg,
            rgba(200, 168, 130, 0.04) 240deg,
            transparent 270deg,
            rgba(200, 168, 130, 0.03) 300deg,
            transparent 330deg,
            rgba(200, 168, 130, 0.04) 360deg
        ),
        linear-gradient(180deg, #0F0A06 0%, #1B2F1A 30%, #0F0A06 60%, #1B2F1A 100%);
    background-color: #0a1a09;
}

.specimen-caption {
    font-family: var(--font-caption);
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    font-weight: 400;
    color: var(--muted-umber);
    letter-spacing: 0.02em;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* --- Pull Quotes --- */
.pull-quote {
    position: relative;
    margin: 2.5rem 0;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 2px solid var(--old-gold);
}

.pull-quote blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    color: var(--parchment);
    line-height: 1.5;
    margin-bottom: 0;
}

.pull-quote-mark {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(6rem, 12vw, 10rem);
    color: var(--old-gold);
    opacity: 0;
    line-height: 1;
    pointer-events: none;
    filter: blur(8px);
    transition: opacity 0.8s ease, filter 0.8s ease;
    will-change: opacity, filter;
}

.pull-quote-mark.revealed {
    opacity: 0.25;
    filter: blur(0px);
}

.pull-quote-mark.open {
    top: -0.5em;
    left: -0.3em;
}

.pull-quote-mark.close {
    bottom: -0.8em;
    right: 0;
}

/* --- Margin Notes --- */
.margin-note {
    position: absolute;
    width: 160px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

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

.margin-note p {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 400;
    color: var(--muted-umber);
    line-height: 1.5;
    margin-bottom: 0;
}

.margin-note.margin-left {
    left: 20px;
    top: 35%;
}

.margin-note.margin-left:nth-child(2) {
    top: 55%;
}

.margin-note.margin-right {
    right: 20px;
    top: 35%;
}

.margin-note.margin-right:nth-child(2) {
    top: 55%;
}

/* --- Botanical SVG Line Drawings --- */
.botanical-svg {
    position: absolute;
    width: 100px;
    height: 250px;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.botanical-svg.botanical-right {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.botanical-svg.botanical-left {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.botanical-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 0.05s linear;
}

/* --- Pressed Leaf Silhouettes --- */
.pressed-leaf {
    position: absolute;
    width: 400px;
    height: 500px;
    opacity: 0.05;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

.leaf-1 {
    right: 10%;
    top: 20%;
    background: radial-gradient(ellipse at 50% 40%, var(--forest-veil) 0%, transparent 70%);
    clip-path: polygon(50% 0%, 80% 15%, 95% 40%, 90% 65%, 70% 85%, 50% 100%, 30% 85%, 10% 65%, 5% 40%, 20% 15%);
}

.leaf-2 {
    left: 5%;
    bottom: 15%;
    background: radial-gradient(ellipse at 50% 50%, var(--forest-veil) 0%, transparent 70%);
    clip-path: polygon(50% 0%, 75% 10%, 90% 30%, 95% 55%, 85% 75%, 65% 90%, 50% 100%, 35% 90%, 15% 75%, 5% 55%, 10% 30%, 25% 10%);
}

.leaf-3 {
    right: 8%;
    top: 25%;
    background: radial-gradient(ellipse at 45% 45%, var(--forest-veil) 0%, transparent 65%);
    clip-path: polygon(50% 0%, 85% 20%, 100% 50%, 85% 80%, 50% 100%, 15% 80%, 0% 50%, 15% 20%);
}

.leaf-4 {
    left: 8%;
    top: 30%;
    background: radial-gradient(ellipse at 50% 40%, var(--forest-veil) 0%, transparent 70%);
    clip-path: polygon(50% 0%, 78% 12%, 93% 38%, 88% 62%, 68% 82%, 50% 100%, 32% 82%, 12% 62%, 7% 38%, 22% 12%);
}

.leaf-5 {
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 50%, var(--forest-veil) 0%, transparent 70%);
    clip-path: polygon(50% 0%, 80% 15%, 95% 40%, 90% 65%, 70% 85%, 50% 100%, 30% 85%, 10% 65%, 5% 40%, 20% 15%);
    width: 300px;
    height: 400px;
}

/* --- Opening Spread --- */
.spread-opening {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--codex-black);
    z-index: 1;
}

.opening-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 300;
    color: var(--parchment);
    letter-spacing: -0.02em;
    line-height: 1.1;
    opacity: 0;
    filter: blur(4px);
    animation: titleReveal 1.5s ease forwards;
    animation-delay: 0.5s;
}

.site-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    color: var(--leaf-amber);
    margin-top: 0.5rem;
    margin-bottom: 0;
    opacity: 0;
    filter: blur(4px);
    animation: titleReveal 1.2s ease forwards;
    animation-delay: 2s;
}

.title-rule {
    width: 60vw;
    max-width: 800px;
    height: 1px;
    background-color: var(--leaf-amber);
    margin-top: 2rem;
    transform: scaleX(0);
    transform-origin: center;
    animation: ruleExpand 1.2s ease forwards;
    animation-delay: 2.8s;
}

.scroll-caret {
    margin-top: 2.5rem;
    opacity: 0;
    animation: caretAppear 0.8s ease forwards;
    animation-delay: 3.5s;
}

.scroll-caret svg {
    animation: caretBounce 2s ease-in-out infinite;
    animation-delay: 4s;
}

/* --- Opening Animations --- */
@keyframes titleReveal {
    0% {
        opacity: 0;
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes ruleExpand {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes caretAppear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes caretBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

/* --- Closing Spread --- */
.spread-closing {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--codex-black);
    min-height: 80vh;
    padding-bottom: 60px;
}

.closing-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
}

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

.closing-rule {
    width: 200px;
    height: 1px;
    background-color: var(--leaf-amber);
    margin-bottom: 2rem;
}

.closing-rule.bottom {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.closing-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    font-style: italic;
    color: var(--parchment);
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.closing-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--warm-stone);
    line-height: 1.8;
    max-width: 500px;
}

.closing-domain {
    font-family: var(--font-caption);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-umber);
    margin-bottom: 0.25rem;
}

.closing-year {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 300;
    color: var(--muted-umber);
    letter-spacing: 0.15em;
    margin-bottom: 0;
}

/* --- Folio Bar --- */
.folio-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--codex-black);
    border-top: 1px solid rgba(200, 168, 130, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 10;
}

.folio-domain {
    font-family: var(--font-caption);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-umber);
    flex: 0 0 auto;
}

.folio-page {
    font-family: var(--font-caption);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--warm-stone);
    flex: 0 0 auto;
    letter-spacing: 0.05em;
}

.folio-progress {
    flex: 1;
    max-width: 200px;
    height: 2px;
    background-color: rgba(200, 168, 130, 0.15);
    margin-left: 24px;
    overflow: hidden;
}

.folio-progress-bar {
    height: 100%;
    width: 100%;
    background-color: var(--old-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.15s ease;
    will-change: transform;
}

/* --- Spread Transition Effects --- */
.spread:not(.spread-opening):not(.spread-closing) {
    transition: opacity 0.3s ease;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .site-title,
    .site-subtitle {
        opacity: 1;
        filter: none;
    }

    .title-rule {
        transform: scaleX(1);
    }

    .scroll-caret {
        opacity: 1;
    }

    .text-field-inner,
    .specimen-frame,
    .margin-note,
    .closing-content {
        opacity: 1;
        transform: none;
    }

    .botanical-path {
        stroke-dashoffset: 0;
    }

    .pressed-leaf {
        transform: none !important;
    }
}

/* --- Responsive: Below 768px --- */
@media (max-width: 768px) {
    .spread-grid,
    .spread-grid.reverse {
        grid-template-columns: 1fr;
        padding: 0 24px;
        direction: ltr;
    }

    .spread-grid.reverse > * {
        direction: ltr;
    }

    .text-field,
    .spread-grid.reverse .text-field {
        grid-column: 1;
        padding: 40px 0 20px 0;
        order: 1;
    }

    .specimen-field,
    .spread-grid.reverse .specimen-field {
        grid-column: 1;
        padding: 20px 0 40px 0;
        order: 3;
    }

    .gutter {
        display: none;
    }

    .text-field-inner {
        max-width: 100%;
    }

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

    .margin-note {
        position: relative;
        width: 100%;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        padding: 0.75rem 0 0.75rem 1.5rem;
        border-left: 2px solid var(--leaf-amber);
        margin: 0.5rem 0;
        order: 2;
    }

    .margin-note p {
        font-style: italic;
    }

    .botanical-svg {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 1rem auto;
        display: block;
        width: 80px;
        height: 180px;
    }

    .pressed-leaf {
        display: none;
    }

    .site-title {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    .site-subtitle {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    }

    .title-rule {
        width: 80vw;
    }

    h2 {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .pull-quote-mark {
        display: none;
    }

    .folio-progress {
        max-width: 120px;
    }

    .spread {
        min-height: auto;
        padding-bottom: 2rem;
    }
}

/* --- Responsive: Below 480px --- */
@media (max-width: 480px) {
    .spread-grid,
    .spread-grid.reverse {
        padding: 0 16px;
    }

    .folio-bar {
        padding: 0 16px;
    }

    .folio-domain {
        display: none;
    }

    .folio-progress {
        max-width: 80px;
    }
}

/* --- Body padding for folio bar --- */
body {
    padding-bottom: 40px;
}