/* scientific.quest - Zen Horizontal-Scroll Journey */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --dawn-mist: #E8E4DF;
    --ocean-fog: #C5D5DB;
    --twilight-slate: #4A5568;
    --deep-ink: #1A202C;
    --coastal-blue: #4A8C9F;
    --starlight-gold: #D4A843;
    --fog-white: #F7FAFC;
    --mist-gray: #718096;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    background: var(--dawn-mist);
    color: var(--deep-ink);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 2;
}

/* Progress Bar */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(74,140,159,0.15);
    z-index: 100;
}
.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--coastal-blue), var(--starlight-gold));
    transition: width 0.1s ease;
}

/* Scroll Container */
.scroll-container {
    display: flex;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Panels */
.panel {
    flex: 0 0 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;
}
.panel-1 { background: var(--dawn-mist); }
.panel-2 { background: linear-gradient(135deg, var(--dawn-mist) 0%, #D8D4CF 100%); }
.panel-3 { background: linear-gradient(135deg, #D0D8DD 0%, var(--ocean-fog) 100%); }
.panel-4 { background: var(--ocean-fog); }
.panel-5 { background: linear-gradient(135deg, var(--ocean-fog) 0%, #7A8E9B 100%); }
.panel-6 { background: var(--twilight-slate); }

/* Contemplation Circles */
.contemplation-circle {
    position: absolute;
    width: 50vh;
    height: 50vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}
.circle-draw {
    stroke-dasharray: 754;
    stroke-dashoffset: 754;
    animation: drawCircle 2s ease 0.5s forwards;
}
@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}

/* Bokeh */
.bokeh {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
}
.b1 { width: 200px; height: 200px; background: radial-gradient(circle, var(--coastal-blue), transparent); top: 15%; left: 20%; }
.b2 { width: 120px; height: 120px; background: radial-gradient(circle, var(--starlight-gold), transparent); bottom: 20%; right: 25%; }
.b3 { width: 160px; height: 160px; background: radial-gradient(circle, var(--coastal-blue), transparent); top: 10%; right: 15%; }
.b4 { width: 180px; height: 180px; background: radial-gradient(circle, var(--starlight-gold), transparent); bottom: 15%; left: 10%; }
.b5 { width: 140px; height: 140px; background: radial-gradient(circle, var(--coastal-blue), transparent); top: 20%; left: 30%; }
.b6 { width: 200px; height: 200px; background: radial-gradient(circle, var(--starlight-gold), transparent); bottom: 10%; right: 20%; opacity: 0.05; }

/* Panel Content */
.panel-content {
    position: relative;
    z-index: 1;
    max-width: 500px;
    padding: 0 15%;
    text-align: center;
}
.stage-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--mist-gray);
    display: block;
    margin-bottom: 1rem;
}
.light-label { color: rgba(247,250,252,0.5); }
.main-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
}
.panel-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--deep-ink);
    margin-bottom: 1rem;
}
.light-title { color: var(--fog-white); }
.panel-subtitle {
    font-size: 1rem;
    color: var(--mist-gray);
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}
.panel-body {
    font-size: 1rem;
    line-height: 2;
    color: var(--deep-ink);
}
.light-body { color: rgba(247,250,252,0.8); }

/* Responsive */
@media (max-width: 600px) {
    .panel-content { padding: 0 2rem; }
    .contemplation-circle { width: 40vh; height: 40vh; }
}