/* ============================================
   continuum.quest — Styles
   McBling aesthetic filtered through deep time
   Split-screen duotone narrative experience
   ============================================ */

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

:root {
    /* Color Palette — strict duotone with single chromatic accent */
    --obsidian: #0B0B0F;
    --platinum-mist: #E2DFD8;
    --liquid-silver: #B8B8C0;
    --champagne-flash: #D4AF37;
    --soft-chrome: #C0C0C0;
    --ghost-white: #E8E8E8;
    --ivory-smoke: #F0EDE6;
    --deep-graphite: #1A1A22;
    --pure-black: #000000;

    /* Typography Scale */
    --hero-size: clamp(2.2rem, 5vw, 4.8rem);
    --section-title-size: clamp(1.4rem, 3vw, 2.4rem);
    --body-size: clamp(0.95rem, 1.2vw, 1.15rem);
    --metadata-size: clamp(0.7rem, 0.9vw, 0.85rem);
    --convergence-size: clamp(4rem, 10vw, 8rem);

    /* Split Ratios (default section 1) */
    --origin-ratio: 55%;
    --horizon-ratio: 45%;
}

html {
    scroll-behavior: auto;
    overflow-x: hidden;
    background: var(--obsidian);
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ivory-smoke);
    background: var(--obsidian);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide cursor during intro */
body.intro-active {
    cursor: none;
}

/* --- Intro Overlay --- */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--obsidian);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
}

#intro-overlay.fade-out {
    opacity: 0;
    transition: opacity 800ms ease;
    pointer-events: none;
}

#intro-overlay.hidden {
    display: none;
}

/* Left and right fields for the intro wipe */
#intro-left-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--obsidian);
    z-index: 0;
}

#intro-right-field {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: var(--obsidian);
    z-index: 0;
    transition: none;
}

#intro-right-field.wipe {
    background: var(--platinum-mist);
    transition: background 1500ms ease;
}

#intro-divider-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--soft-chrome), var(--ghost-white), var(--soft-chrome));
    opacity: 0;
    transition: opacity 1200ms ease;
    z-index: 1;
}

#intro-divider-line.visible {
    opacity: 0.5;
}

#intro-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: var(--hero-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2em;
    opacity: 0;
    transition: opacity 600ms ease;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

#intro-title.visible {
    opacity: 1;
    letter-spacing: 0.08em;
    transition: opacity 600ms ease, letter-spacing 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#intro-title-left {
    color: var(--ivory-smoke);
}

#intro-title-right {
    color: var(--deep-graphite);
}

#intro-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 300;
    color: var(--champagne-flash);
    letter-spacing: 0.15em;
    opacity: 0;
    margin-top: 1rem;
    transition: opacity 400ms ease;
    position: relative;
    z-index: 2;
}

#intro-subtitle.visible {
    opacity: 1;
}

/* --- Chrome Divider (Persistent) --- */
#chrome-divider {
    position: fixed;
    top: 0;
    left: 55%;
    transform: translateX(-50%);
    width: 2px;
    height: 100vh;
    background: linear-gradient(180deg,
        var(--soft-chrome),
        var(--ghost-white) 30%,
        var(--soft-chrome) 50%,
        var(--ghost-white) 70%,
        var(--soft-chrome)
    );
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    will-change: left, opacity, width;
}

#chrome-divider.visible {
    animation: divider-breathe 4s ease-in-out infinite;
}

#chrome-divider.convergence-expand {
    width: 100vw;
    left: 50% !important;
    background: linear-gradient(90deg,
        var(--obsidian),
        var(--soft-chrome) 20%,
        var(--ghost-white) 50%,
        var(--soft-chrome) 80%,
        var(--obsidian)
    );
    opacity: 0.3;
    animation: none;
    transition: width 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
                left 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 600ms ease;
}

@keyframes divider-breathe {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* --- Scroll Progress Bar --- */
#scroll-progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(11, 11, 15, 0.6);
    z-index: 9999;
    cursor: pointer;
}

#scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--champagne-flash);
    transition: width 100ms linear;
}

/* --- Floating Elements --- */
#floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
    overflow: hidden;
}

.floating-numeral {
    position: absolute;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    color: var(--liquid-silver);
    user-select: none;
    will-change: transform;
}

.chrome-dot {
    position: absolute;
    background: radial-gradient(circle at 40% 35%, var(--ghost-white), transparent 70%);
    will-change: transform;
}

.thin-line {
    position: absolute;
    height: 1px;
    background: var(--champagne-flash);
    opacity: 0.1;
    will-change: transform;
}

.diamond-glint {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 0;
    will-change: opacity;
}

.diamond-glint::before,
.diamond-glint::after {
    content: '';
    position: absolute;
    background: var(--champagne-flash);
}

.diamond-glint::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
}

.diamond-glint::after {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
}

.diamond-glint.flash {
    opacity: 1;
    animation: glint-flash 800ms ease-out forwards;
}

@keyframes glint-flash {
    0% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Floating Words (Horizon panel) --- */
.floating-word-container {
    position: relative;
    height: 20vh;
    overflow: visible;
    margin-bottom: 12vh;
}

.floating-word {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--deep-graphite);
    opacity: 0.08;
    will-change: transform;
    user-select: none;
}

.floating-word:nth-child(1) {
    left: 10%;
    top: 15%;
}

.floating-word:nth-child(2) {
    left: 45%;
    top: 50%;
}

.floating-word:nth-child(3) {
    left: 20%;
    top: 80%;
}

/* --- Main Container --- */
#continuum-container {
    position: relative;
    width: 100%;
}

/* --- Split Sections --- */
.split-section {
    display: flex;
    width: 100%;
    min-height: 200vh;
    position: relative;
}

.panel {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

.panel-origin {
    background: var(--obsidian);
    will-change: width;
}

/* Subtle blue undertone overlay on Origin panels — deep space effect */
.panel-origin::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(20, 20, 45, 0.08) 0%, transparent 50%, rgba(20, 20, 45, 0.04) 100%);
    pointer-events: none;
}

.panel-horizon {
    background: var(--platinum-mist);
    will-change: width;
}

/* --- Section-specific split ratios --- */
.split-section[data-section="1"] .panel-origin { width: 55%; }
.split-section[data-section="1"] .panel-horizon { width: 45%; }

.split-section[data-section="2"] .panel-origin { width: 50%; }
.split-section[data-section="2"] .panel-horizon { width: 50%; }

.split-section[data-section="3"] .panel-origin { width: 45%; }
.split-section[data-section="3"] .panel-horizon { width: 55%; }

.split-section[data-section="4"] .panel-origin { width: 35%; }
.split-section[data-section="4"] .panel-horizon { width: 65%; }

/* --- Panel Content --- */
.panel-content {
    padding: 15vh 3rem;
    position: relative;
    will-change: transform;
}

.origin-content {
    text-align: right;
    padding-right: 4rem;
    padding-left: 2rem;
    color: var(--ivory-smoke);
}

.horizon-content {
    text-align: left;
    padding-left: 4rem;
    padding-right: 2rem;
    color: var(--deep-graphite);
}

/* --- Typography --- */
.section-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: var(--section-title-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.body-text {
    font-family: 'Inter', sans-serif;
    font-size: var(--body-size);
    font-weight: 300;
    line-height: 1.75;
    max-width: 480px;
}

.origin-content .body-text {
    margin-left: auto;
}

.horizon-content .body-text {
    margin-right: auto;
}

.metadata-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--metadata-size);
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--liquid-silver);
    display: block;
    margin-bottom: 1.5rem;
}

.horizon-content .metadata-label {
    color: var(--liquid-silver);
}

/* --- Text Blocks --- */
.text-block {
    margin-bottom: 12vh;
}

/* --- Image Blocks --- */
.image-block {
    margin-bottom: 12vh;
}

.duotone-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.duotone-image svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Horizon images get subtle blur — softness of the not-yet-resolved future */
.horizon-blur {
    filter: blur(1px);
}

/* Gold overlay on hover for duotone images — McBling champagne flash at 15% */
.duotone-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--champagne-flash);
    mix-blend-mode: color;
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}

.duotone-image:hover::after {
    opacity: 0.15;
}

/* --- Reveal Animation (spring physics via CSS approximation) --- */
.reveal-element {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-element.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Convergence Sections --- */
.convergence-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--obsidian);
}

/* Chrome gradient field that appears when divider "widens" */
.convergence-chrome-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        var(--obsidian),
        var(--soft-chrome) 20%,
        var(--ghost-white) 50%,
        var(--soft-chrome) 80%,
        var(--obsidian)
    );
    opacity: 0;
    transition: opacity 800ms ease;
    z-index: 1;
}

.convergence-section.active .convergence-chrome-field {
    opacity: 0.25;
}

.convergence-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1200ms ease;
    z-index: 2;
}

.convergence-section.active .convergence-bg {
    opacity: 1;
}

.convergence-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.convergence-text {
    position: relative;
    z-index: 10;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease 400ms, transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms;
}

.convergence-section.active .convergence-text {
    opacity: 1;
    transform: translateY(0);
}

.convergence-word {
    font-family: 'Share Tech Mono', monospace;
    font-size: var(--convergence-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--champagne-flash);
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    display: block;
}

/* --- Interactive hover states (spring scale) --- */
.duotone-image {
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.duotone-image:hover {
    transform: scale(1.03);
}

/* --- Mobile Adaptation (< 768px) --- */
@media (max-width: 768px) {
    .split-section {
        flex-direction: column;
        min-height: auto;
    }

    .panel-origin,
    .panel-horizon,
    .split-section[data-section="1"] .panel-origin,
    .split-section[data-section="1"] .panel-horizon,
    .split-section[data-section="2"] .panel-origin,
    .split-section[data-section="2"] .panel-horizon,
    .split-section[data-section="3"] .panel-origin,
    .split-section[data-section="3"] .panel-horizon,
    .split-section[data-section="4"] .panel-origin,
    .split-section[data-section="4"] .panel-horizon {
        width: 100%;
    }

    .panel-content {
        padding: 10vh 1.5rem;
    }

    .origin-content {
        text-align: left;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .origin-content .body-text {
        margin-left: 0;
    }

    .horizon-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Horizontal chrome divider between stacked panels */
    .panel-horizon::before {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--soft-chrome), var(--ghost-white), var(--soft-chrome));
        opacity: 0.5;
    }

    #chrome-divider {
        display: none;
    }

    #floating-elements {
        display: none;
    }

    #intro-title {
        font-size: clamp(1.6rem, 8vw, 2.8rem);
    }

    .convergence-word {
        font-size: clamp(2.5rem, 10vw, 5rem);
    }

    .text-block {
        margin-bottom: 8vh;
    }

    .image-block {
        margin-bottom: 8vh;
    }

    .body-text {
        max-width: 100%;
    }

    .floating-word-container {
        height: 12vh;
        margin-bottom: 8vh;
    }
}

/* --- Selection styling --- */
::selection {
    background: var(--champagne-flash);
    color: var(--obsidian);
}

/* Hide scrollbar (WebKit) — the progress bar is the navigation */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Hide scrollbar (Firefox) */
html {
    scrollbar-width: none;
}

/* --- All corners are sharp per design (no border-radius anywhere) --- */
/* --- No drop shadows per design (depth via layering/opacity) --- */