/* reasr.one - Nocturnal Herbarium */
/* CSS Custom Properties for palette */
:root {
    --deep-bg: #1A0610;
    --plate-bg: #2B0A12;
    --plate-bg-warm: #331018;
    --interactive-default: #4A0E1B;
    --interactive-active: #6B1E2E;
    --text-primary: #F5EDE3;
    --text-secondary: #D4C5B0;
    --accent-gold: #C4A87C;
    --annotation-brown: #8B6F5A;
    --aurora-green: #3AE8A0;
    --aurora-violet: #7B5EA7;
    --aurora-gold: #E8D44D;
    --ghost-line: rgba(245, 237, 227, 0.15);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--deep-bg);
    color: var(--text-secondary);
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 2.0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Stipple texture overlay on body */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--text-primary) 0.5px, transparent 0.5px);
    background-size: 6px 6px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* ===== AURORA LAYERS ===== */
.aurora-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    will-change: transform, opacity;
}

.aurora-layer--1 {
    background: radial-gradient(ellipse 80% 50% at 20% 30%, var(--aurora-green), transparent);
    opacity: 0;
    animation: aurora-drift-1 45s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.aurora-layer--2 {
    background: radial-gradient(ellipse 70% 60% at 70% 20%, var(--aurora-violet), transparent);
    opacity: 0;
    animation: aurora-drift-2 55s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.aurora-layer--3 {
    background: radial-gradient(ellipse 60% 40% at 50% 60%, var(--aurora-gold), transparent);
    opacity: 0;
    animation: aurora-drift-3 38s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.aurora-layer--4 {
    background: radial-gradient(ellipse 90% 45% at 30% 70%, var(--aurora-green), transparent);
    opacity: 0;
    animation: aurora-drift-4 50s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.aurora-layer--5 {
    background: radial-gradient(ellipse 65% 55% at 80% 50%, var(--aurora-violet), transparent);
    opacity: 0;
    animation: aurora-drift-5 60s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

/* Aurora will be faded in via JS after 600ms delay */
.aurora-visible .aurora-layer--1 { opacity: 0.10; }
.aurora-visible .aurora-layer--2 { opacity: 0.08; }
.aurora-visible .aurora-layer--3 { opacity: 0.09; }
.aurora-visible .aurora-layer--4 { opacity: 0.07; }
.aurora-visible .aurora-layer--5 { opacity: 0.08; }

@keyframes aurora-drift-1 {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(15vw, -8vh, 0); }
    50% { transform: translate3d(-10vw, 12vh, 0); }
    75% { transform: translate3d(8vw, -5vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes aurora-drift-2 {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-12vw, 10vh, 0); }
    50% { transform: translate3d(18vw, -6vh, 0); }
    75% { transform: translate3d(-5vw, 8vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes aurora-drift-3 {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(10vw, 12vh, 0); }
    50% { transform: translate3d(-15vw, -10vh, 0); }
    75% { transform: translate3d(12vw, 5vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes aurora-drift-4 {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-8vw, -12vh, 0); }
    50% { transform: translate3d(12vw, 8vh, 0); }
    75% { transform: translate3d(-15vw, -4vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes aurora-drift-5 {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(20vw, 5vh, 0); }
    50% { transform: translate3d(-8vw, -15vh, 0); }
    75% { transform: translate3d(5vw, 10vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* ===== OPENING VOID ===== */
.opening-void {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: clamp(2rem, 5vw, 6rem);
    z-index: 2;
}

.domain-name {
    font-family: 'Playfair Display SC', serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 12vw, 10rem);
    letter-spacing: 0.15em;
    color: var(--text-primary);
    line-height: 1;
    text-align: right;
}

.domain-name .letter {
    display: inline-block;
    opacity: 0;
}

.domain-name .letter.visible {
    opacity: 1;
}

/* Ghost botanical illustration in upper-left void */
.ghost-illustration {
    position: absolute;
    top: 5vh;
    left: 5vw;
    width: clamp(180px, 25vw, 350px);
    opacity: 0;
    transition: opacity 1.5s ease-out;
    z-index: 1;
}

.ghost-illustration.visible {
    opacity: 0.15;
}

.ghost-illustration .botanical-svg {
    width: 100%;
    height: auto;
    color: var(--text-primary);
}

.ghost-illustration .specimen-label {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
}

/* ===== SPECIMEN LABELS ===== */
.specimen-label {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    color: var(--annotation-brown);
    line-height: 1.5;
}

.specimen-label--ghost {
    color: rgba(139, 111, 90, 0.5);
}

.specimen-label--void {
    display: block;
    margin-top: 1rem;
    text-align: center;
}

/* ===== INTERSTITIAL VOIDS ===== */
.interstitial-void {
    position: relative;
    width: 100%;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: clamp(2rem, 4vw, 4rem);
}

.void-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(150px, 30%, 300px);
}

.void-illustration .botanical-svg {
    width: 100%;
    height: auto;
    color: var(--text-primary);
    opacity: 0.15;
}

.void-illustration .botanical-svg .draw-path {
    opacity: 0;
}

.void-illustration.drawing .botanical-svg .draw-path {
    opacity: 1;
}

/* ===== SPECIMEN PLATES ===== */
.specimen-plate {
    position: relative;
    width: 60vw;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem);
    background-color: var(--plate-bg);
    z-index: 2;
    transform: scale(0.96);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease-out;
    margin-top: clamp(8rem, 15vh, 16rem);
    margin-bottom: clamp(8rem, 15vh, 16rem);
    will-change: transform;
}

.specimen-plate.in-focus {
    transform: scale(1.0);
    background-color: var(--plate-bg-warm);
}

.specimen-plate.zoomed {
    transform: scale(1.03);
}

.specimen-plate .plate-number {
    display: block;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    color: var(--annotation-brown);
    margin-bottom: 1.5rem;
    opacity: 0.7;
    transition: opacity 0.6s ease-out;
}

.specimen-plate.in-focus .plate-number {
    opacity: 1.0;
}

.specimen-header {
    font-family: 'Stint Ultra Expanded', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 3vw, 2.4rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 2rem;
    line-height: 1.4;
}

.specimen-body {
    font-family: 'Crimson Pro', serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 2.0;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    text-align: left;
    opacity: 0.7;
    transition: opacity 0.6s ease-out;
}

.specimen-plate.in-focus .specimen-body {
    opacity: 1.0;
}

.specimen-body em,
.specimen-body strong {
    font-weight: 500;
    color: var(--text-primary);
}

.specimen-annotation {
    display: block;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    color: var(--annotation-brown);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(139, 111, 90, 0.2);
}

/* ===== TERMINAL PLATE ===== */
.specimen-plate--terminal {
    width: 40vw;
    max-width: 600px;
    text-align: center;
    padding: clamp(4rem, 8vw, 8rem) clamp(3rem, 6vw, 6rem);
}

.terminal-text {
    font-family: 'Playfair Display SC', serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    letter-spacing: 0.15em;
    color: var(--text-primary);
    opacity: 0.7;
    transition: opacity 0.6s ease-out;
}

.specimen-plate--terminal.in-focus .terminal-text {
    opacity: 1.0;
}

.specimen-plate--terminal .specimen-annotation {
    border-top: none;
    margin-top: 1.5rem;
    padding-top: 0;
}

/* ===== FINAL VOID ===== */
.final-void {
    height: 30vh;
    position: relative;
    z-index: 2;
}

/* ===== INTERACTIVE STATES ===== */
/* Hover/click on plates triggers secondary zoom-focus */
.specimen-plate:hover {
    cursor: default;
}

/* When a plate is zoomed, nearby void illustrations brighten */
.specimen-plate.zoomed ~ .interstitial-void .void-illustration .botanical-svg,
.interstitial-void:has(+ .specimen-plate.zoomed) .void-illustration .botanical-svg {
    opacity: 0.4;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .specimen-plate {
        width: 90vw;
    }

    .specimen-plate--terminal {
        width: 90vw;
    }

    .interstitial-void {
        min-height: 35vh;
    }

    .opening-void {
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 15vh;
    }

    .domain-name {
        text-align: center;
    }

    .ghost-illustration {
        width: clamp(120px, 35vw, 200px);
        top: 8vh;
        left: 50%;
        transform: translateX(-50%);
    }

    .aurora-layer--4,
    .aurora-layer--5 {
        display: none;
    }
}

@media (max-width: 480px) {
    body {
        line-height: 1.75;
    }

    .specimen-body {
        line-height: 1.75;
    }

    .specimen-plate {
        padding: clamp(1.5rem, 4vw, 3rem);
        margin-top: clamp(4rem, 10vh, 8rem);
        margin-bottom: clamp(4rem, 10vh, 8rem);
    }

    .interstitial-void {
        min-height: 30vh;
    }
}