/* main.css */

/* ── Sections ──────────────────────────────────────────────────── */
.section {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* sections animate in/out via JS — never transition via CSS */
}

.section--active {
    opacity: 1;
    pointer-events: all;
}

/* ── Page content revealed after the globe intro ───────────────── */
[data-intro] {
    opacity: 0;
    translate: -8px 0;
    transition: opacity 0.6s ease, translate 0.8s cubic-bezier(.22, 1, .36, 1);
}

body.is-ready [data-intro] {
    opacity: 1;
    translate: 0 0;
}

/* ── Globe stage───────────────────────────────────────────────── */
.globe-stage {
    width: 100vw;
    height: 100vh;
    position: relative;
    /* No CSS perspective — globe-home.js does manual projection */
}

/* ── Detail overlay ────────────────────────────────────────────── */
.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #fff;
    overflow-y: auto;
}

.detail-content {
    width: 100%;
    min-height: 100%;
}