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

/* ── Fonts: Inter and Playfair Display (SIL OFL 1.1, see static/fonts),
   served from here instead of Google Fonts so nothing blocks the first paint.
   Browsers fetch only the subsets a page uses. ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-cyrillic-ext.251d36f2b5a6.woff2") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-cyrillic.de93fdc85e3d.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-greek-ext.318d4ba568ac.woff2") format('woff2');
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-greek.8c7f6aea5e86.woff2") format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-vietnamese.9df17551da76.woff2") format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("../fonts/inter-latin.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/playfair-display-italic-cyrillic.8ccb20a30e6d.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/playfair-display-italic-vietnamese.f3be38befc4f.woff2") format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/playfair-display-italic-latin-ext.fbc900d5891b.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/playfair-display-italic-latin.4450ccfb7533.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/playfair-display-cyrillic.66a1a9a1a310.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/playfair-display-vietnamese.ec896614814e.woff2") format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/playfair-display-latin-ext.319e6b2aad48.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/playfair-display-latin.ef05b30d6e5c.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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; }