:root {
    --bg: #01289c;
    --fg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.35);
    --stroke: rgba(255, 255, 255, 0.55);
    --stroke-strong: rgba(255, 255, 255, 0.78);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
}

/* Background placeholder (you'll replace later) */
.bg-placeholder {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.concepts-header.is-hidden,
.print-header.is-hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.concepts-header,
.print-header {
    transition: opacity 300ms ease, transform 300ms ease;
}

@media (min-width: 769px) {
    body.museum-walk {
        overflow-y: hidden;
    }

    .horizontal {
        display: flex;
        width: 100vw;
        height: 100vh;

        overflow-x: auto; /* show horizontal scrollbar */
        overflow-y: hidden;
        scroll-behavior: auto; /* do NOT smooth wheel-driven scroll */
    }

    .room {
        width: 100vw;
        height: 100vh;
        flex: 0 0 100vw;
        position: relative;
        background: var(--bg);
        overflow: hidden;
    }

    /* Visual “Wall” between rooms */
    .room::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 12px;
        height: 100%;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06)
        );
        box-shadow: -12px 0 30px rgba(0, 0, 0, 0.15);
        pointer-events: none;
    }

    /* =========================================================
       SCROLLBAR VISIBILITY (affordance for horizontal scrolling)
       ========================================================= */
    .horizontal::-webkit-scrollbar {
        height: 12px;
    }

    .horizontal::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.18);
    }

    .horizontal::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 999px;
    }

    .horizontal::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.55);
    }

    .horizontal {
        scrollbar-color: rgba(255, 255, 255, 0.35) rgba(0, 0, 0, 0.18);
        scrollbar-width: thin;
    }
}

@media (max-width: 768px) {
    .room {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: #01289c;
    }

    .room::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;

        width: 100%;
        height: 1px;

        background: rgba(255, 255, 255, 0.35);
        z-index: 40; /* above imagery, below UI */
        pointer-events: none;
    }

    .bg-placeholder,
    .foyer-foreground,
    .headline-block,
    .start-callout {
        position: absolute;
        left: 0;
        right: 0;
    }

    .bg-placeholder {
        inset: 0;
        z-index: 0;
    }

    /* ---------- PAGE / SCROLL ---------- */
    html, body {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .museum-walk {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }


    .wall {
        width: 100%;
        height: 10vh;
    }

    .shadow-text{
        text-shadow:
            1px  0   0 rgba(0,0,0,0.75),
            -1px  0   0 rgba(0,0,0,0.75),
            0    1px  0 rgba(0,0,0,0.75),
            0   -1px  0 rgba(0,0,0,0.75),
            0 18px 48px rgba(0,0,0,0.45);
    }

}

/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}