/* ============================================
   Digital Telomere - Specimen Book
   Ethereal / Ma-Negative-Space / Burnt Orange
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --color-bone-white: #F6F1EA;
    --color-warm-umber: #5A4A3A;
    --color-burnt-sienna: #C4693D;
    --color-terracotta-deep: #9E4A2F;
    --color-muted-gold: #A0845C;
    --color-pale-apricot: #F0D8C4;
    --color-ochre-dark: #6B3A1E;
    --color-faded-rose: #D4A089;

    --font-display: 'EB Garamond', serif;
    --font-annotation: 'Cormorant Garamond', serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --margin-phase: 0vw;
}

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    font-size: 16px;
}

body {
    background-color: var(--color-bone-white);
    color: var(--color-warm-umber);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.85;
    overflow-x: hidden;
    position: relative;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Noise Background Layer --- */
.noise-background {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    filter: url(#noiseFilter);
    background: var(--color-bone-white);
    animation: noiseDensityMorph 30s ease-in-out infinite;
}

@keyframes noiseDensityMorph {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.06; }
}

/* --- Parallax Botanical Ghost Layer --- */
.botanical-ghost-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.root-network {
    position: absolute;
    opacity: 0.08;
}

.root-network-1 {
    top: 5%;
    right: 3%;
    width: 25vw;
    max-width: 400px;
}

.root-network-2 {
    bottom: 10%;
    left: 2%;
    width: 30vw;
    max-width: 500px;
}

.pressed-flower {
    position: absolute;
    opacity: 0.12;
}

.flower-rosemary {
    top: 20%;
    left: 5%;
    width: 8vw;
    max-width: 120px;
}

.flower-thyme {
    top: 50%;
    right: 8%;
    width: 6vw;
    max-width: 100px;
}

.flower-forget-me-not {
    top: 65%;
    left: 10%;
    width: 9vw;
    max-width: 140px;
}

.flower-helichrysum {
    top: 82%;
    right: 12%;
    width: 7vw;
    max-width: 120px;
}

/* --- Navigation --- */
.site-nav {
    position: fixed;
    top: 3vh;
    right: calc(4vw + var(--margin-phase));
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    text-align: right;
}

.nav-link {
    font-family: var(--font-annotation);
    font-weight: 300;
    font-size: 11px;
    color: var(--color-warm-umber);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    letter-spacing: 0.05em;
}

.nav-link:hover {
    opacity: 1;
    color: var(--color-burnt-sienna);
}

/* --- Specimen Book Main Container --- */
.specimen-book {
    position: relative;
    z-index: 10;
}

/* --- Specimen Pages (General) --- */
.specimen-page {
    position: relative;
    min-height: 100vh;
    padding: calc(8vh + var(--margin-phase)) calc(12vw + var(--margin-phase));
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5vw;
    scroll-snap-align: start;
    animation: breathingMargin 12s ease-in-out infinite;
}

@keyframes breathingMargin {
    0%, 100% { --margin-phase: 0vw; }
    50% { --margin-phase: 0.5vw; }
}

/* --- Page Number Ghosts --- */
.page-number {
    position: absolute;
    bottom: 3vh;
    right: 5vw;
    font-family: var(--font-annotation);
    font-weight: 300;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--color-warm-umber);
    opacity: 0.06;
    pointer-events: none;
}

/* --- Decorative Circles (Microscope Slide Marks) --- */
.decorative-circle {
    position: absolute;
    border: 0.5px solid var(--color-burnt-sienna);
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}

.circle-1 {
    width: 18px;
    height: 18px;
    top: 25%;
    left: 30%;
    animation: circleMorph1 10s ease-in-out infinite;
}

.circle-2 {
    width: 14px;
    height: 14px;
    top: 60%;
    right: 20%;
    animation: circleMorph2 13s ease-in-out infinite;
}

.circle-3 {
    width: 20px;
    height: 20px;
    top: 15%;
    right: 25%;
    animation: circleMorph3 8s ease-in-out infinite;
}

.circle-4 {
    width: 12px;
    height: 12px;
    bottom: 20%;
    left: 20%;
    animation: circleMorph1 15s ease-in-out infinite;
}

.circle-5 {
    width: 16px;
    height: 16px;
    top: 20%;
    right: 15%;
    animation: circleMorph2 9s ease-in-out infinite;
}

.circle-6 {
    width: 14px;
    height: 14px;
    top: 55%;
    left: 25%;
    animation: circleMorph3 12s ease-in-out infinite;
}

.circle-7 {
    width: 18px;
    height: 18px;
    bottom: 25%;
    right: 30%;
    animation: circleMorph1 11s ease-in-out infinite;
}

.circle-8 {
    width: 15px;
    height: 15px;
    top: 35%;
    left: 40%;
    animation: circleMorph2 14s ease-in-out infinite;
}

@keyframes circleMorph1 {
    0%, 100% { border-radius: 50%; transform: scale(1, 1); }
    33% { border-radius: 50%; transform: scale(1.2, 0.85); }
    66% { border-radius: 50%; transform: scale(0.9, 1.15); }
}

@keyframes circleMorph2 {
    0%, 100% { border-radius: 50%; transform: scale(1, 1); }
    25% { border-radius: 50%; transform: scale(0.85, 1.2); }
    50% { border-radius: 50%; transform: scale(1.1, 0.9); }
    75% { border-radius: 50%; transform: scale(0.95, 1.1); }
}

@keyframes circleMorph3 {
    0%, 100% { border-radius: 50%; transform: scale(1, 1); }
    50% { border-radius: 50%; transform: scale(1.15, 0.88); }
}

/* --- Global Slide Marks --- */
.microscope-marks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.slide-mark {
    position: absolute;
    border: 0.5px solid var(--color-burnt-sienna);
    border-radius: 50%;
    opacity: 0.1;
}

.slide-mark-1 {
    width: 16px;
    height: 16px;
    top: 12%;
    left: 8%;
    animation: circleMorph2 11s ease-in-out infinite;
}

.slide-mark-2 {
    width: 20px;
    height: 20px;
    top: 38%;
    right: 6%;
    animation: circleMorph1 14s ease-in-out infinite;
}

.slide-mark-3 {
    width: 14px;
    height: 14px;
    top: 55%;
    left: 15%;
    animation: circleMorph3 9s ease-in-out infinite;
}

.slide-mark-4 {
    width: 18px;
    height: 18px;
    top: 72%;
    right: 18%;
    animation: circleMorph1 12s ease-in-out infinite;
}

.slide-mark-5 {
    width: 12px;
    height: 12px;
    top: 88%;
    left: 25%;
    animation: circleMorph2 10s ease-in-out infinite;
}

/* --- Typography --- */
.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    letter-spacing: 0.04em;
    color: var(--color-warm-umber);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.section-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-variant: small-caps;
    color: #8B5E3C;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.body-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.85;
    color: var(--color-warm-umber);
    max-width: 38em;
}

.body-text em {
    font-style: italic;
    color: var(--color-burnt-sienna);
}

.annotation {
    font-family: var(--font-annotation);
    font-weight: 300;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-muted-gold);
    display: block;
    margin-top: 0.8rem;
}

.mono-accent {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-burnt-sienna);
    letter-spacing: 0.05em;
}

/* --- Annotation Lines --- */
.annotation-line {
    position: absolute;
    height: 2px;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.annotation-line line {
    vector-effect: non-scaling-stroke;
}

/* --- Noise Transition Zones --- */
.noise-transition-zone {
    position: relative;
    height: 30vh;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(212, 160, 137, 0.04) 30%,
        rgba(212, 160, 137, 0.08) 50%,
        rgba(212, 160, 137, 0.04) 70%,
        transparent 100%
    );
    filter: url(#noiseFilterDense);
    pointer-events: none;
    z-index: 5;
}

.noise-transition-wide {
    height: 45vh;
}

/* ============================================
   Section Composition Types
   ============================================ */

/* --- Specimen Card --- */
.specimen-card .page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.page-content-hero {
    grid-column: 2 / span 5;
    align-self: center;
    padding: 2rem 0;
}

.annotation-line-hero {
    width: min(200px, 20vw);
    position: relative;
    opacity: 0;
    margin-top: 1.5rem;
}

.annotation-hero {
    margin-top: 1.2rem;
}

/* --- Paired Fragments --- */
.paired-fragments {
    align-content: center;
}

.fragment {
    position: relative;
}

.fragment-upper {
    grid-column: 2 / span 4;
    grid-row: 1;
    align-self: start;
    padding-top: 8vh;
}

.fragment-lower {
    grid-column: 7 / span 4;
    grid-row: 1;
    align-self: end;
    padding-bottom: 8vh;
}

.fragment-connector {
    position: absolute;
    left: 50%;
    top: 25%;
    height: 50%;
    width: 2px;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.annotation-line-left {
    width: min(180px, 18vw);
    position: relative;
    margin-top: 1rem;
}

.annotation-fragment {
    margin-top: 1rem;
}

/* --- Specimen Card (Hybrid) --- */
.page-content-specimen {
    grid-column: 3 / span 8;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.chromosome-flower-hybrid {
    width: min(300px, 40vw);
    height: auto;
    margin-bottom: 2rem;
}

.specimen-label {
    margin-top: 1rem;
}

.annotation-specimen {
    text-align: center;
}

.annotation-line-specimen {
    width: min(180px, 18vw);
    position: relative;
    margin-top: 1rem;
}

/* --- Field Page --- */
.field-page {
    align-content: start;
    padding-top: 12vh;
    padding-bottom: 12vh;
}

.field-element {
    position: relative;
}

.field-element-1 {
    grid-column: 2 / span 3;
    grid-row: 1;
    padding-top: 5vh;
}

.field-element-2 {
    grid-column: 6 / span 5;
    grid-row: 1;
    padding-top: 12vh;
}

.field-element-3 {
    grid-column: 3 / span 6;
    grid-row: 2;
    text-align: center;
    padding: 6vh 0;
    opacity: 0.7;
}

.field-element-4 {
    grid-column: 4 / span 5;
    grid-row: 3;
    padding-top: 4vh;
}

.field-element-5 {
    grid-column: 8 / span 3;
    grid-row: 4;
    padding-top: 4vh;
    text-align: right;
}

.annotation-line-field1 {
    width: min(160px, 15vw);
    position: relative;
    margin-top: 0.8rem;
}

/* --- Final Specimen Card --- */
.page-content-final {
    grid-column: 4 / span 6;
    align-self: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-content-final .body-text {
    text-align: center;
    margin-bottom: 1.5rem;
}

.page-content-final .mono-accent {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.annotation-line-final {
    width: min(300px, 30vw);
    position: relative;
    margin-top: 1rem;
}

.annotation-final {
    text-align: center;
}

/* ============================================
   Content Entry Morph Animations
   ============================================ */

.specimen-page .page-content,
.specimen-page .fragment,
.specimen-page .field-element {
    opacity: 0;
    transform: scaleX(1.3) scaleY(0.7);
    transition: opacity 1200ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 1200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.specimen-page .page-content.visible,
.specimen-page .fragment.visible,
.specimen-page .field-element.visible {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
}

/* Stagger field elements slightly */
.field-element-2 {
    transition-delay: 150ms;
}

.field-element-3 {
    transition-delay: 300ms;
}

.field-element-4 {
    transition-delay: 450ms;
}

.field-element-5 {
    transition-delay: 600ms;
}

/* --- Annotation Line Growth --- */
.annotation-line.visible {
    opacity: 1;
}

.annotation-line.visible line {
    animation: lineGrow 800ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes lineGrow {
    from { stroke-dashoffset: 200; stroke-dasharray: 200; }
    to { stroke-dashoffset: 0; stroke-dasharray: 200; }
}

/* --- Fragment Connector Visibility --- */
.fragment-connector.visible {
    opacity: 1;
}

/* ============================================
   Chromosome-Flower Morph Animation
   ============================================ */

.telomere-vine-bio,
.telomere-vine-botanical {
    transition: opacity 10s ease-in-out;
}

.chromosome-flower-hybrid.morph-botanical .telomere-vine-bio {
    opacity: 0;
}

.chromosome-flower-hybrid.morph-botanical .telomere-vine-botanical {
    opacity: 1;
}

/* ============================================
   Element Noise Halos
   ============================================ */

.page-content::before,
.fragment::before,
.field-element::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background: radial-gradient(
        ellipse at center,
        rgba(240, 216, 196, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .specimen-page {
        padding: 6vh 6vw;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .page-content-hero,
    .fragment-upper,
    .fragment-lower,
    .page-content-specimen,
    .page-content-final,
    .field-element-1,
    .field-element-2,
    .field-element-3,
    .field-element-4,
    .field-element-5 {
        grid-column: 1 / -1;
    }

    .fragment-upper {
        padding-top: 4vh;
    }

    .fragment-lower {
        padding-bottom: 4vh;
    }

    .site-nav {
        top: 2vh;
        right: 3vw;
    }

    .hero-title {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }

    .noise-transition-zone {
        height: 20vh;
    }

    .noise-transition-wide {
        height: 30vh;
    }

    .botanical-ghost-layer {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .specimen-page {
        padding: 4vh 5vw;
    }

    .site-nav {
        flex-direction: row;
        gap: 1em;
        top: auto;
        bottom: 2vh;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- Selection styling --- */
::selection {
    background: var(--color-pale-apricot);
    color: var(--color-warm-umber);
}