/* ══════════════════════════════════════════════════════
   YOU ARE NATURE: Cinematic dark theme
   Photography-driven. Full-bleed. Atmospheric.
   ══════════════════════════════════════════════════════ */

:root {
    --bg:          #0a0e18;
    --text:        #f0ece6;
    --text-dim:    #a09a90;
    --text-bright: #ffffff;
    --accent:      #c9a96e;
    --accent-glow: rgba(201, 169, 110, 0.15);
}

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}

#particles-canvas { display: none; }

/* ── Typography ────────────────────────────────────── */

.fact-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.85rem);
    line-height: 1.85;
    font-weight: 400;
    color: var(--text);
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.fact-text strong {
    color: var(--text-bright);
    font-weight: 600;
}

.fact-number {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.8rem, 9vw, 6.5rem);
    font-weight: 200;
    letter-spacing: -0.03em;
    color: var(--text-bright);
    margin-bottom: 2rem;
    display: block;
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════════════
   SECTIONS: Full-bleed photography backgrounds
   ══════════════════════════════════════════════════════ */

.fact-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}

.fact-section .section-bg {
    position: absolute;
    top: -10%; left: 0;
    width: 100%; height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
}

.fact-section .section-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 15, 25, 0.5);
    z-index: 1;
}

.fact-section:has(.section-bg)::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(10,14,24,0.7) 0%, transparent 15%, transparent 85%, rgba(10,14,24,0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

.scene-3d {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
}

.scene-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.fact-content {
    max-width: 640px;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fact-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Section-specific number accent colours ────────── */

.fact-section[data-theme="heartbeat"] .fact-number { color: #f5a0a0; }
.fact-section[data-theme="space"] .fact-number { color: #b0b8f0; }
.fact-section[data-theme="breath"] .fact-number { color: #90dbb8; }
.fact-section[data-theme="sunrise"] .fact-number { color: #f0d080; }
.fact-section[data-theme="cells"] .fact-number { color: #80e0d0; }
.fact-section[data-theme="blink"] .fact-number { color: #d0d8e0; }
.fact-section[data-theme="moon"] .fact-number { color: #e8e0c8; }
.fact-section[data-theme="forest"] .fact-number { color: #90d090; }
.fact-section[data-theme="star"] .fact-number { color: #f0b878; }
.fact-section[data-theme="water"] .fact-number { color: #88c8f0; }
.fact-section[data-theme="joy"] .fact-number { color: #f0e070; }
.fact-section[data-theme="dream"] .fact-number { color: #c8a8e8; }
.fact-section[data-theme="cohort"] .fact-number { color: #e8d098; }
.fact-section[data-theme="orbit"] .fact-number { color: #a8a0e8; }

.breathing-space { height: 0; }

.fact-illustration { display: none; }
.ambient-canvas { display: none !important; }

/* ── Reduced Motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fact-content { opacity: 1; transform: none; }
    .fact-section .section-bg { transform: none; transition: none; }
}

::selection { background: rgba(201, 169, 110, 0.3); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.2); border-radius: 2px; }