/* gabs.boo - Faded Daguerreotype / Watercolor Atmosphere */
:root {
    --phantom-violet: #1E1A2B;
    --bone-paper: #F2EDE4;
    --dried-lavender: #5B4A6A;
    --bruised-rose: #8C5E6F;
    --ink-bleed: #2E2640;
    --ghost-mauve: #A88FA3;
    --candlelight: #D4A96A;
    --deep-bottom: #0F0C18;
    --depth-shift: #171320;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', serif;
    background-color: var(--phantom-violet);
    color: var(--bone-paper);
    overflow-x: hidden;
    line-height: 1.75;
    font-size: clamp(1.05rem, 1.5vw, 1.15rem);
    font-weight: 400;
}

.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
}

/* Grain Overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Scroll Progress */
.scroll-progress {
    position: fixed;
    right: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background-color: var(--dried-lavender);
    opacity: 0.3;
    z-index: 999;
    transition: height 0.1s linear;
}

/* Chambers */
.chamber {
    position: relative;
    overflow: hidden;
}

.chamber-content {
    position: relative;
    z-index: 2;
}

/* Reading Channel - Asymmetric margins */
.reading-channel {
    margin-left: 25%;
    margin-right: 15%;
    max-width: 55ch;
}

/* Watercolor Washes */
.wash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.wash-surface {
    background: radial-gradient(ellipse 80vw 80vh at 60% 40%, rgba(168, 143, 163, 0.10) 0%, transparent 70%);
}

.wash-void-1 {
    background: radial-gradient(ellipse 60vw 50vh at 40% 50%, rgba(46, 38, 64, 0.12) 0%, transparent 65%);
    animation: washDrift 20s ease-in-out infinite alternate;
}

.wash-stillness {
    background: radial-gradient(ellipse 70vw 60vh at 50% 50%, rgba(46, 38, 64, 0.12) 0%, transparent 60%);
    animation: washDrift 20s ease-in-out infinite alternate;
}

.wash-void-deep {
    background: radial-gradient(ellipse 50vw 40vh at 55% 50%, rgba(168, 143, 163, 0.08) 0%, transparent 55%);
    animation: washDrift 25s ease-in-out infinite alternate-reverse;
}

@keyframes washDrift {
    0% { background-position: 0% 50%; }
    100% { background-position: 5% 50%; }
}

/* Ghost Watermarks */
.ghost-watermark {
    position: absolute;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--bone-paper);
    pointer-events: none;
    z-index: 1;
    user-select: none;
}

.ghost-g {
    font-size: 50vw;
    top: 10%;
    left: -10%;
    opacity: 0.04;
}

.ghost-b {
    font-size: 50vw;
    top: -5%;
    right: -15%;
    opacity: 0.04;
}

.ghost-o {
    font-size: 45vw;
    top: 5%;
    right: -10%;
    opacity: 0.03;
}

.ghost-full {
    font-size: 30vw;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.02;
    white-space: nowrap;
}

/* Chamber 1: The Surface */
.chamber-surface {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 25%;
    padding-right: 15%;
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: -0.03em;
    color: var(--bone-paper);
    line-height: 1;
    margin-bottom: 0;
}

.surface-tagline {
    position: absolute;
    bottom: 15vh;
    left: 25%;
    right: 15%;
    z-index: 2;
}

.tagline-text {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.1rem;
    color: var(--bone-paper);
    opacity: 0.7;
    max-width: 50ch;
}

/* Void Sections */
.void-section {
    position: relative;
    height: 50vh;
    overflow: hidden;
}

.void-deep {
    height: 40vh;
}

/* Ink Border */
.ink-border-top {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--dried-lavender) 20%, var(--dried-lavender) 50%, var(--ghost-mauve) 75%, transparent 100%);
    opacity: 0.15;
    filter: url(#inkBleed);
    z-index: 3;
}

/* Chamber 2: The Whisper */
.chamber-whisper {
    min-height: 80vh;
    padding: 10vh 0;
    position: relative;
}

.chamber-whisper .body-text {
    margin-bottom: 2rem;
}

/* Body Text */
.body-text {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1.05rem, 1.5vw, 1.15rem);
    line-height: 1.75;
    color: var(--bone-paper);
    opacity: 0.85;
}

/* Chamber 3: The Stillness */
.chamber-stillness {
    height: 60vh;
    position: relative;
}

/* Spectral Dots */
.spectral-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 33%;
    z-index: 2;
    pointer-events: none;
}

/* Chamber 4: The Depth */
.chamber-depth {
    min-height: 80vh;
    padding: 10vh 0;
    background-color: var(--depth-shift);
    position: relative;
}

.dual-columns {
    display: flex;
    margin-left: 25%;
    margin-right: 10%;
    gap: 8vw;
}

.column-left {
    flex: 0 0 35ch;
    max-width: 35ch;
}

.column-left .body-text {
    margin-bottom: 1.5rem;
}

.column-right {
    flex: 0 0 30ch;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mono-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dried-lavender);
    opacity: 0.5;
    margin-top: 1rem;
}

.mono-label:first-child {
    margin-top: 0;
}

.mono-entry {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--bone-paper);
    opacity: 0.6;
    line-height: 1.6;
}

/* Chamber 5: The Bottom */
.chamber-bottom {
    min-height: 100vh;
    background-color: var(--deep-bottom);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20vh;
    position: relative;
}

.bottom-word {
    z-index: 2;
}

.bottom-phrase {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--ghost-mauve);
    letter-spacing: 0.05em;
}

.bottom-silence {
    height: 60vh;
}

/* Blur-Focus Animation System */
.blur-target {
    filter: blur(12px);
    opacity: 0;
    transition: filter 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0), opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.blur-target.focused {
    filter: blur(0px);
    opacity: 1;
}

.blur-target[data-blur="4"] {
    filter: blur(4px);
}

.blur-target[data-blur="6"] {
    filter: blur(6px);
}

.blur-target[data-blur="8"] {
    filter: blur(8px);
}

.blur-target[data-blur="3"] {
    filter: blur(3px);
}

.blur-target[data-blur="12"] {
    filter: blur(12px);
}

/* Responsive */
@media (max-width: 768px) {
    .reading-channel {
        margin-left: 8%;
        margin-right: 8%;
    }
    .chamber-surface {
        padding-left: 8%;
        padding-right: 8%;
    }
    .surface-tagline {
        left: 8%;
        right: 8%;
    }
    .dual-columns {
        flex-direction: column;
        margin-left: 8%;
        margin-right: 8%;
        gap: 4vh;
    }
    .column-left,
    .column-right {
        flex: none;
        max-width: none;
    }
}