/* ============================================================
   continua.quest v2 -- Surreal Dreamscape Styles
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --abyss-indigo: #0B0E2A;
    --drift-fog: #2C3058;
    --horizon-haze: #4A4E7A;
    --luminous-ether: #7B82B8;
    --pale-smoke: #B8BCD8;
    --ember-glow: #D4956B;
    --threshold-gold: #E8C87A;
    --deep-void: #050714;

    --depth-1: 0;
    --depth-2: 0;
    --depth-3: 0;
    --depth-4: 0;
    --depth-5: 0;
}

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

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

body {
    background: var(--deep-void);
    color: var(--pale-smoke);
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.85;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Full-page background gradient (color temperature narrative) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        var(--abyss-indigo) 0%,
        var(--drift-fog) 25%,
        var(--horizon-haze) 50%,
        var(--drift-fog) 75%,
        var(--abyss-indigo) 100%
    );
    z-index: -10;
    pointer-events: none;
}

/* --- Warm Overlay (color temperature shift) --- */
#warm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 60%,
        rgba(212, 149, 107, 0.12) 0%,
        rgba(232, 200, 122, 0.06) 40%,
        transparent 70%
    );
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* --- Fog Layers --- */
.fog-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

#fog-layer-1 {
    background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(44, 48, 88, 0.35) 0%, transparent 70%);
    z-index: 1;
}

#fog-layer-2 {
    background: radial-gradient(ellipse 70% 50% at 70% 30%, rgba(44, 48, 88, 0.25) 0%, transparent 65%);
    z-index: 2;
}

#fog-layer-3 {
    background: radial-gradient(ellipse 90% 70% at 50% 60%, rgba(74, 78, 122, 0.2) 0%, transparent 60%);
    z-index: 3;
}

/* --- Progress Indicator --- */
#progress-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease;
}

#progress-indicator.visible {
    opacity: 0.4;
}

#progress-track {
    width: 1px;
    height: 80px;
    background: rgba(123, 130, 184, 0.15);
    position: relative;
    border-radius: 1px;
}

#progress-fill {
    width: 1px;
    height: 0%;
    background: var(--luminous-ether);
    border-radius: 1px;
    transition: height 0.15s ease;
}

#progress-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--luminous-ether);
    margin-top: 6px;
}

/* --- Threshold Portal --- */
#threshold-portal {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        to bottom,
        var(--abyss-indigo) 0%,
        var(--drift-fog) 60%,
        var(--horizon-haze) 100%
    );
    z-index: 5;
    overflow: hidden;
}

#portal-word {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18vw;
    color: var(--pale-smoke);
    opacity: 0;
    letter-spacing: 0.08em;
    user-select: none;
    will-change: transform;
}

/* --- Breathing Animation --- */
@keyframes breathe {
    0%, 100% { transform: scale(1.0); }
    50% { transform: scale(1.02); }
}

@keyframes breathe-subtle {
    0%, 100% { transform: scale(1.0); }
    50% { transform: scale(1.015); }
}

.breathing-text {
    animation: breathe 8s ease-in-out infinite;
}

.chapter-title.breathing-text {
    animation: breathe-subtle 6s ease-in-out infinite;
}

/* --- Interstitial Voids --- */
.interstitial-void {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    overflow: hidden;
}

.impossible-geometry {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.impossible-geometry.visible {
    opacity: 1;
}

.impossible-geometry path {
    transition: stroke-dashoffset linear;
}

/* --- Chapters --- */
.chapter {
    position: relative;
    width: 100%;
    min-height: 150vh;
    display: flex;
    align-items: center;
    z-index: 5;
    overflow: hidden;
}

.chapter-content {
    max-width: 42ch;
    padding: 2em;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0),
                transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.chapter-content.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Chapter horizontal positions */
.chapter-content[data-x-position="15"] {
    margin-left: 15%;
}

.chapter-content[data-x-position="55"] {
    margin-left: 55%;
}

.chapter-content[data-x-position="25"] {
    margin-left: 25%;
}

.chapter-content[data-x-position="65"] {
    margin-left: 65%;
}

/* Responsive adjustments for narrow viewports */
@media (max-width: 768px) {
    .chapter-content[data-x-position="55"],
    .chapter-content[data-x-position="65"] {
        margin-left: 10%;
        margin-right: 10%;
    }
    .chapter-content[data-x-position="15"],
    .chapter-content[data-x-position="25"] {
        margin-left: 8%;
        margin-right: 8%;
    }
}

.chapter-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(32px, 5vw, 72px);
    letter-spacing: 0.08em;
    color: var(--pale-smoke);
    margin-bottom: 0.6em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0),
                transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.chapter-content.revealed .chapter-title {
    opacity: 1;
    transform: translateY(0);
}

.chapter-body {
    color: var(--pale-smoke);
    margin-bottom: 1.4em;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0.4s,
                transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0.4s;
}

.chapter-content.revealed .chapter-body {
    opacity: 0.85;
    transform: translateY(0);
}

.chapter-annotation {
    font-family: 'Inconsolata', monospace;
    font-weight: 400;
    font-size: clamp(10px, 1vw, 13px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--luminous-ether);
    opacity: 0;
    transition: opacity 1.5s ease 0.8s;
    display: block;
    margin-top: 2em;
}

.chapter-content.revealed .chapter-annotation {
    opacity: 0.45;
}

/* --- Chapter-specific warm color accents --- */
#chapter-3 .chapter-title {
    color: var(--ember-glow);
}

#chapter-3 .chapter-annotation {
    color: var(--ember-glow);
}

#chapter-4 .chapter-title {
    color: var(--threshold-gold);
}

#chapter-4 .chapter-annotation {
    color: var(--threshold-gold);
}

/* --- The Loop Zone --- */
#loop-zone {
    position: relative;
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#loop-chevron {
    opacity: 0;
    transition: opacity 1s ease;
}

#loop-chevron.visible {
    opacity: 1;
}

@keyframes pulse-chevron {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-6px); opacity: 1; }
}

#loop-chevron svg {
    animation: pulse-chevron 2.5s ease-in-out infinite;
}

/* --- Loop Overlay --- */
#loop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--deep-void);
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

#loop-overlay.active {
    opacity: 1;
}

#loop-overlay.fading-out {
    transition: opacity 1.2s ease;
    opacity: 0;
}

/* --- Opening Animation Overlay --- */
#opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--deep-void);
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

#opening-overlay.phase-1 {
    background: var(--abyss-indigo);
    opacity: 1;
}

#opening-overlay.phase-2 {
    opacity: 0;
}

/* --- Depth layer transforms (parallax) --- */
.depth-layer-1 {
    transform: translateY(calc(var(--depth-1) * 1px));
    will-change: transform;
}

.depth-layer-2 {
    transform: translateY(calc(var(--depth-2) * 1px));
    will-change: transform;
}

.depth-layer-3 {
    transform: translateY(calc(var(--depth-3) * 1px));
    will-change: transform;
}

.depth-layer-4 {
    transform: translateY(calc(var(--depth-4) * 1px));
    will-change: transform;
}

.depth-layer-5 {
    transform: translateY(calc(var(--depth-5) * 1px));
    will-change: transform;
}

/* --- Selection styling --- */
::selection {
    background: rgba(123, 130, 184, 0.25);
    color: var(--pale-smoke);
}

/* --- Scrollbar styling (WebKit) --- */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

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