:root {
    --font-ui:"Manrope", "Segoe UI", Arial, sans-serif;
    --font-display:"Cormorant Garamond", "Times New Roman", serif;
}

html {
    background:#0f172a;
}

body {
    margin:0;
    background:#0f172a;
    font-family:var(--font-ui);
    overflow:hidden;
}

button,
input,
textarea,
select {
    font:inherit;
}
.wrapper {
	display:flex;
	height:100vh;
	overflow-x:auto;
	overflow-y: hidden;
	scroll-behavior:smooth;
	scroll-snap-type:x mandatory;
    opacity:0;
    transition:opacity 0.4s ease;
}

.wrapper.ready {
    opacity:1;
}

/* Scenes */
.scene {
    min-width:100vw;
    height:100vh;
    position:relative;
    flex-shrink:0;
    background-color:#0f172a;
    background-image:url('../img/scenes/newhall1.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
	scroll-snap-align:start;
    opacity:0;
    transition:opacity 0.35s ease;
}

.scene.ready {
    opacity:1;
}

.scene.scene-second {
    background-image:url('../img/scenes/newhall3.jpg');
}

.scene::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

/* Timeline */
.path {
    --timeline-left:15%;
    --timeline-center:50%;
    --timeline-right:86%;
    position:absolute;
    bottom:90px;
    left:10%;
    width:80%;
    height:6px;
    border-radius:10px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    opacity:0.7;
    overflow:visible;
}

.path::after {
    content:"";
    position:absolute;
    top:-10px;
    left:0;
    width:140px;
    height:26px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(255,214,102,0.08), rgba(255,255,255,0.95), rgba(255,214,102,0.08), transparent);
    filter:blur(8px);
    opacity:0;
    transform:translateX(-140px);
}

/* Timeline markers */
.path .timeline-date.left { left:var(--timeline-left); }
.path .timeline-date.center { left:var(--timeline-center); }
.path .timeline-date.right { left:var(--timeline-right); }

.path .timeline-date {
    position:absolute;
    top:22px;
    color:rgba(255,255,255,0.88);
    font-size:14px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    text-shadow:0 4px 14px rgba(0,0,0,0.45);
    white-space:nowrap;
    transform:translateX(-50%);
}

.scene.active .path::after {
    opacity:0.95;
    animation:timelineTravel 2.8s ease-in-out infinite;
}

.scene.active .path .timeline-date {
    color:white;
}

@keyframes timelineTravel {
    0% {
        opacity:0;
        transform:translateX(-140px);
    }
    10% {
        opacity:0.95;
    }
    90% {
        opacity:0.95;
    }
    100% {
        opacity:0;
        transform:translateX(calc(100% + 900px));
    }
}

/* Exhibits */
.artifact {
    --artifact-lift:-135px;
    --info-gap:78px;
    position:absolute;
    cursor:pointer;
    opacity:0;
    transform:translateY(40px);
    transition:0.6s ease;
    z-index:2;
}

.artifact-3d-badge {
    position:absolute;
    top:calc(var(--artifact-lift) - var(--info-gap) - 8px);
    right:8px;
    z-index:4;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(15,23,42,0.9);
    color:#e5f3ff;
    font-family:var(--font-ui);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    box-shadow:0 10px 24px rgba(0,0,0,0.65);
}

.artifact.visible {
    opacity:1;
    transform:translateY(0);
}

.artifact picture {
    width:340px;
    display:block;
    position:relative;
    z-index:1;
}

.artifact img,
.artifact model-viewer {
    width:340px;
    display:block;
    position:relative;
    z-index:1;
    filter:drop-shadow(0 25px 40px rgba(0,0,0,0.8));
    transition:0.3s;
    transform:translateY(var(--artifact-lift));
    animation:pulse 3s infinite;
}

.artifact picture img {
    width:100%;
}

.artifact-bust {
    left:66%;
    top:54%;
    --artifact-lift:-170px;
    --info-gap:88px;
}

.artifact img.lift-small {
    --artifact-lift:var(--artifact-lift-small, -170px);
}

.artifact-statue {
	left:66%;
	top:54%;
	--artifact-lift:-170px;
	--artifact-lift-small:-170px;
	--info-gap:88px;
}

.artifact:hover img.lift-small {
    transform:translateY(var(--artifact-lift)) scale(1.2);
}

.artifact:hover img {
    transform:translateY(var(--artifact-lift)) scale(1.2);
}

.artifact::before {
    content:"";
    position:absolute;
    top:62%;
    left:50%;
    width:360px;
    height:155px;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(0,0,0,0.78) 0 22%, rgba(0,0,0,0.48) 44%, transparent 76%);
    filter:blur(28px);
    z-index:-1;
}

.artifact::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-50px;
    width:200px;
    height:210px;
    transform:translateX(-50%);
    clip-path:polygon(12% 0, 88% 0, 100% 8%, 100% 100%, 0 100%, 0 8%);
    background:
        linear-gradient(180deg, rgba(205,201,196,0.98) 0 8%, rgba(171,167,162,0.98) 8% 18%, rgba(131,127,123,0.98) 18% 100%),
        linear-gradient(90deg, rgba(153,149,145,0.98), rgba(112,108,104,0.98));
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 36px 64px rgba(0,0,0,0.58),
        0 10px 20px rgba(0,0,0,0.28),
        inset 18px 0 22px rgba(255,255,255,0.06),
        inset -30px 0 38px rgba(0,0,0,0.28),
        inset 0 -28px 34px rgba(0,0,0,0.22),
        inset 0 8px 12px rgba(255,255,255,0.04);
}

@keyframes pulse {
    0%{transform:translateY(var(--artifact-lift)) scale(1);}
    50%{transform:translateY(var(--artifact-lift)) scale(1.06);}
    100%{transform:translateY(var(--artifact-lift)) scale(1);}
}

@keyframes heroOverlayIn {
    from { opacity:0; }
    to { opacity:1; }
}

@keyframes heroTitleIn {
    from {
        opacity:0;
        transform:translateY(24px) scale(0.985);
        filter:blur(8px);
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@keyframes heroBadgeIn {
    from {
        opacity:0;
        transform:translateY(18px);
        filter:blur(6px);
    }
    to {
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

@keyframes heroButtonIn {
    from {
        opacity:0;
        transform:translateX(var(--hero-btn-shift, 0)) translateY(20px);
        box-shadow:0 8px 18px rgba(0,0,0,0.08);
    }
    to {
        opacity:1;
        transform:translateX(var(--hero-btn-shift, 0)) translateY(0);
        box-shadow:0 18px 36px rgba(0,0,0,0.22);
    }
}

/* Exhibit labels */
.artifact .info {
    position:absolute;
    top:0;
    left:50%;
    z-index:3;
    transform:translate(-50%, calc(var(--artifact-lift) - var(--info-gap)));
    color:white;
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:0.01em;
    background:rgba(0,0,0,0.75);
    padding:8px 14px;
    border-radius:10px;
    opacity:0;
    transition:0.3s;
    white-space:nowrap;
    font-weight:500;
}

.artifact:hover .info { opacity:1; }

.artifact.center {
    --artifact-lift:-148px;
    --info-gap:82px;
    margin-left:-170px;
}

.artifact.center img.lift-small {
    --artifact-lift-small:-160px;
}

/* Scene positions */
.left { left:11%; top:51%; }
.center { left:49%; top:38%; }
.right { left:68%; top:51%; }

/* Navigation buttons */
.nav-btn {
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(5px);
    cursor:pointer;
    color:white;
    font-size:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
}

#prev-room { left:20px; }
#next-room { right:20px; }

/* Modal window */
.modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    z-index:1000;
}

.modal-content {
    width:80%;
    margin:5% auto;
    display:flex;
    gap:40px;
    color:white;
}

.modal-picture,
.modal img,
#modal-3d-wrap {
    width:50%;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,0.8);
}

.modal-3d-wrap {
    display:none;
    position:relative;
    overflow:hidden;
}

.modal-picture {
    display:block;
    position:relative;
    overflow:hidden;
}

.modal-picture img {
    width:100%;
    display:block;
    border-radius:inherit;
    box-shadow:none;
}

.modal.modal-chair-focus .modal-picture {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:visible;
}

.modal.modal-chair-focus #modal-img {
    width:82%;
    margin-top:-48px;
}

.modal-picture {
    cursor:zoom-in;
}

.modal-picture.is-zoomed {
    cursor:grab;
}

.modal-picture.is-zoomed:active {
    cursor:grabbing;
}

.modal-image-loading {
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:3;
    background:rgba(2,6,23,0.45);
    color:white;
    font-family:var(--font-ui);
    font-size:14px;
    font-weight:700;
    letter-spacing:0.02em;
}

.modal-image-loading::before {
    content:"";
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.35);
    border-top-color:rgba(255,214,102,0.95);
    animation:spin 0.9s linear infinite;
    margin-right:10px;
}

#modal-model {
    display:none;
    min-height:320px;
    height:min(70vh, 620px);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    width:100% !important;
    background:
        linear-gradient(125deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 12%, rgba(255,255,255,0) 28%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 18%, rgba(0,0,0,0.18) 100%),
        radial-gradient(circle at 50% 34%, rgba(248,250,252,0.1), rgba(15,23,42,0.12) 34%, rgba(2,6,23,0.72) 62%, rgba(0,0,0,0.94) 100%),
        linear-gradient(180deg, rgba(15,23,42,0.94), rgba(2,6,23,0.98));
    box-shadow:
        0 30px 60px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.05),
        inset 0 18px 28px rgba(255,255,255,0.05),
        inset 0 -28px 40px rgba(0,0,0,0.34);
    backdrop-filter:blur(10px);
    --poster-color: transparent;
}

.modal-3d-spinner {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    background:rgba(0,0,0,0.08);
    color:white;
    font-family:var(--font-ui);
    font-size:14px;
    font-weight:700;
    letter-spacing:0.02em;
}

.modal-3d-spinner::before {
    content:"";
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.35);
    border-top-color:rgba(255,214,102,0.95);
    animation:spin 0.9s linear infinite;
    margin-right:10px;
}

@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

.modal-text {
    width:50%;
    font-size:18px;
    line-height:1.6;
}

/* Сохраняем переносы в тексте описания (описание / историческая связь). */
.modal-text #modal-desc {
    white-space:pre-wrap;
}

.modal-text h2 {
    margin:0 0 15px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(34px, 4vw, 52px);
    line-height:1;
}

.modal-zoom-btn {
    margin-top:20px;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(15,23,42,0.85);
    color:white;
    font-size:14px;
    font-weight:500;
    letter-spacing:0.03em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-zoom-btn:hover {
    background:rgba(30,41,59,0.95);
    transform:translateY(-1px);
    box-shadow:0 16px 32px rgba(0,0,0,0.45);
}

.modal-zoom-btn:focus-visible {
    outline:2px solid rgba(248,250,252,0.95);
    outline-offset:2px;
}

.close {
    position:absolute;
    top:25px;
    right:40px;
    font-size:42px;
    color:white;
    cursor:pointer;
}

/* Landing screen */
.home {
    position:fixed;
    inset:0;
    background:url('../img/welcome/ghall.webp') center/cover no-repeat;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:space-between;
    z-index:2000;
    text-align:left;
    overflow:hidden;
}

.home::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(15,23,42,0.45);
    animation:heroOverlayIn 0.9s ease both;
}

.home > * {
    position:relative;
    z-index:1;
}

/* Нижняя панель CTA */
.home h1 {
    margin:0;
    width:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:12px;
}

.home-cta {
    position:relative;
    margin-top:auto;
    padding:14px clamp(24px, 6vw, 72px) max(20px, env(safe-area-inset-bottom) + 16px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:linear-gradient(180deg, rgba(10,22,56,0) 0%, rgba(12,32,82,0.76) 36%, rgba(10,30,74,0.92) 100%);
    backdrop-filter:blur(10px);
}

.home-title-main {
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(52px, 6vw, 88px);
    line-height:0.96;
    letter-spacing:0.02em;
    text-wrap:balance;
    text-shadow:0 10px 32px rgba(0,0,0,0.24);
    opacity:0;
    animation:heroTitleIn 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 0.12s forwards;
}

.home-title-sub {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    background:rgba(15,23,42,0.38);
    font-family:var(--font-ui);
    font-size:clamp(12px, 1.05vw, 15px);
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    box-shadow:0 14px 28px rgba(0,0,0,0.16);
    opacity:0;
    animation:heroBadgeIn 0.78s cubic-bezier(0.2, 0.9, 0.2, 1) 0.28s forwards;
}

.start-btn {
    --hero-btn-shift:0;
    position:relative;
    transform:translateX(var(--hero-btn-shift)) translateY(0);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:10px 22px;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#0f172a;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,0.96);
    cursor:pointer;
    margin-top:0;
    margin-bottom:0;
    opacity:0;
    will-change:transform;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    animation:heroButtonIn 0.76s cubic-bezier(0.2, 0.9, 0.2, 1) 0.42s forwards;
}

.start-btn:hover {
    transform:translateX(var(--hero-btn-shift)) translateY(-2px);
    background:#f8fafc;
    box-shadow:0 24px 44px rgba(0,0,0,0.28);
}

@media (prefers-reduced-motion: reduce) {
    .home::before,
    .home-title-main,
    .home-title-sub,
    .start-btn {
        animation:none !important;
        opacity:1 !important;
        transform:translateX(var(--hero-btn-shift, 0)) !important;
        filter:none !important;
    }
}

.catalog {
    display:none;
}

.catalog-toggle {
    position:fixed;
    top:24px;
    left:24px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border:none;
    border-radius:999px;
    background:rgba(15,23,42,0.86);
    color:white;
    font-size:16px;
    cursor:pointer;
    z-index:2100;
    box-shadow:0 18px 40px rgba(0,0,0,0.28);
    backdrop-filter:blur(10px);
}

.catalog-toggle:hover {
    background:rgba(30,41,59,0.95);
}

.home-btn {
    position:fixed;
    top:24px;
    right:24px;
    padding:12px 18px;
    border:none;
    border-radius:999px;
    background:rgba(15,23,42,0.86);
    color:white;
    font-size:16px;
    cursor:pointer;
    z-index:2100;
    box-shadow:0 18px 40px rgba(0,0,0,0.28);
    backdrop-filter:blur(10px);
}

.hidden {
		display:none;
	}

.home-btn:hover {
    background:rgba(30,41,59,0.95);
}

.catalog-panel {
    position:fixed;
    top:0;
    left:0;
    width:min(380px, 88vw);
    height:100vh;
    padding:88px 20px 24px;
    box-sizing:border-box;
    background:linear-gradient(180deg, rgba(15,23,42,0.98), rgba(30,41,59,0.96));
    color:white;
    transform:translateX(-102%);
    transition:transform 0.35s ease;
    z-index:2050;
    box-shadow:24px 0 50px rgba(0,0,0,0.32);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.catalog-panel.open {
    transform:translateX(0);
}

.catalog-panel h2 {
    margin:0;
    font-family:var(--font-display);
    font-weight:700;
    font-size:32px;
    line-height:1;
    letter-spacing:0.01em;
}

.catalog-panel p {
    margin:0;
    color:rgba(255,255,255,0.72);
    line-height:1.5;
}

.catalog-search {
    width:100%;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:12px;
    background:rgba(255,255,255,0.08);
    color:white;
    font-size:15px;
    outline:none;
    box-sizing:border-box;
}

.catalog-search::placeholder {
    color:rgba(255,255,255,0.5);
}

.catalog-list {
    min-height:0;
    overflow-y:auto;
    padding:4px 8px 0 0;
    display:flex;
    flex-direction:column;
    gap:14px;
    scroll-behavior:smooth;
}

.catalog-group {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.catalog-group-title {
    margin:0;
    color:rgba(255,255,255,0.72);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
}

.catalog-group-items {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.catalog-item {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 14px;
    background:rgba(255,255,255,0.1);
    cursor:pointer;
    border-radius:10px;
    transition:background 0.2s ease, transform 0.2s ease;
}

.catalog-item:hover {
    background:rgba(255,255,255,0.3);
    transform:translateX(4px);
}

.catalog-empty {
    display:none;
    padding:14px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.72);
    line-height:1.5;
}

.catalog-empty.visible {
    display:block;
}

.catalog-list.is-empty {
    overflow-y:hidden;
    padding-top:0;
}

.catalog-overlay {
    position:fixed;
    inset:0;
    background:rgba(2,6,23,0.45);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.25s ease, visibility 0.25s ease;
    z-index:2040;
}

.catalog-overlay.visible {
    opacity:1;
    visibility:visible;
}

@media (max-width: 768px) {
    .catalog-toggle {
        top:16px;
        left:16px;
        padding:10px 14px;
        font-size:14px;
    }

    .home-btn {
        top:16px;
        right:16px;
        padding:10px 14px;
        font-size:14px;
    }

    .catalog-panel {
        width:min(340px, 92vw);
        padding-top:78px;
    }

}

@media (max-width: 1024px) {
    .scene {
        background-size: cover;
        background-position: center;
    }

    .path {
        left: 8%;
        width: 84%;
        bottom: 82px;
    }

    .path .timeline-date {
        font-size: 12px;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 900px) {
    body {
        min-height: 100svh;
    }

    .wrapper,
    .scene,
    .home {
        height: 100svh;
    }

    .home h1 {
        position:relative;
        left:auto;
        top:auto;
        width:min(92vw, 16ch);
        max-width:none;
        padding:0 10px;
        align-items:center;
        text-align:center;
        gap:10px;
    }

    .home {
        justify-content:flex-start;
        align-items:stretch;
        padding-top:max(18px, env(safe-area-inset-top) + 10px);
        padding-left:0;
        text-align:center;
    }

    .home-cta {
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .home-title-main {
        font-size:clamp(28px, 8vw, 44px);
        line-height:1.04;
        letter-spacing:0.01em;
        text-wrap:pretty;
    }

    .home-title-sub {
        padding:7px 14px;
        font-size:clamp(10px, 2.3vw, 12px);
        letter-spacing:0.12em;
    }

    .start-btn {
        min-height:44px;
        padding:10px 18px;
        font-size:14px;
        letter-spacing:0.03em;
    }

    .scene::before {
        background: rgba(0,0,0,0.62);
    }

    .path {
        --timeline-left: 9%;
        --timeline-center: 50%;
        --timeline-right: 91%;
        bottom: 72px;
        left: 7%;
        width: 86%;
    }

    .path::after {
        top: -8px;
        width: 110px;
        height: 22px;
    }

    .path .timeline-date {
        top: 18px;
        font-size: 10px;
        letter-spacing: 0.05em;
    }

    .artifact {
        --artifact-lift: -102px;
        --info-gap: 70px;
        --artifact-size: clamp(104px, 23vw, 156px);
        --pedestal-width: 84px;
        --pedestal-height: 98px;
        --shadow-width: 176px;
        --shadow-height: 72px;
    }

    .artifact-3d-badge {
        top:calc(var(--artifact-lift) - var(--info-gap) - 4px);
        right:4px;
        font-size:9px;
        padding:3px 7px;
        letter-spacing:0.1em;
    }

    .artifact img {
        width: var(--artifact-size);
    }

    .artifact picture {
        width: var(--artifact-size);
    }

    .artifact.center {
        --artifact-lift: -118px;
        --info-gap: 76px;
        --artifact-size: clamp(122px, 29vw, 184px);
        --pedestal-width: 96px;
        --pedestal-height: 112px;
        --shadow-width: 192px;
        --shadow-height: 82px;
        margin-left: -78px;
    }

    .artifact-bust,
    .artifact-statue {
        left: 65%;
        top: 55%;
        --artifact-lift: -98px;
        --artifact-lift-small: -98px;
        --info-gap: 72px;
    }

    .artifact::before {
        top: 74%;
        width: var(--shadow-width);
        height: var(--shadow-height);
        filter: blur(18px);
    }

    .artifact::after {
        bottom: -18px;
        width: var(--pedestal-width);
        height: var(--pedestal-height);
    }

    .artifact .info {
        opacity: 1;
        padding: 6px 9px;
        font-size: 11px;
        line-height: 1.3;
        white-space: normal;
        width: min(30vw, 140px);
        text-align: center;
    }

    .left { left: 4%; top: 54%; }
    .center { left: 48%; top: 39%; }
    .right { left: 65%; top: 54%; }

    .nav-btn {
        top: auto;
        bottom: max(18px, env(safe-area-inset-bottom));
        transform: none;
        width: 48px;
        height: 48px;
        font-size: 22px;
        background: rgba(15,23,42,0.78);
    }

    #prev-room { left: 14px; }
    #next-room { right: 14px; }

    .catalog-toggle,
    .home-btn {
        top: max(14px, env(safe-area-inset-top));
        font-size: 14px;
        padding: 10px 14px;
    }

    .catalog-toggle { left: 14px; }
    .home-btn { right: 14px; }

    .catalog-panel {
        width: 100%;
        max-width: 100%;
        padding: 78px 16px 20px;
        gap: 14px;
    }

    .catalog-panel h2 {
        font-size: 22px;
    }

    .catalog-search,
    .catalog-item {
        font-size: 15px;
    }

    .modal {
        overflow-y: auto;
        padding: 72px 16px 28px;
        box-sizing: border-box;
    }

    .modal-content {
        width: min(100%, 560px);
        margin: 0 auto;
        flex-direction: column;
        gap: 18px;
    }

    .modal-picture,
    .modal img,
    #modal-3d-wrap,
    .modal-text {
        width: 100%;
    }

    #modal-model {
        min-height: 260px;
        height: min(42svh, 360px);
    }

    .modal-text {
        font-size: 16px;
    }

    .modal.modal-chair-focus #modal-img {
        width:76%;
        margin-top:-34px;
    }

    .close {
        top: max(16px, env(safe-area-inset-top));
        right: 18px;
        font-size: 34px;
    }
}

@media (max-width: 600px) {
    .path {
        --timeline-left: 8%;
        --timeline-center: 50%;
        --timeline-right: 92%;
        bottom: 64px;
        left: 6%;
        width: 88%;
    }

    .path::after {
        top: -7px;
        width: 90px;
        height: 20px;
    }

    .artifact {
        --artifact-lift: -92px;
        --info-gap: 62px;
        --artifact-size: clamp(92px, 26vw, 132px);
        --pedestal-width: 68px;
        --pedestal-height: 84px;
        --shadow-width: 146px;
        --shadow-height: 62px;
    }

    .artifact.center {
        --artifact-lift: -106px;
        --info-gap: 68px;
        --artifact-size: clamp(108px, 31vw, 156px);
        --pedestal-width: 82px;
        --pedestal-height: 96px;
        --shadow-width: 164px;
        --shadow-height: 70px;
        margin-left: -60px;
    }

    .artifact-bust,
    .artifact-statue {
        --artifact-lift: -112px;
        --artifact-lift-small: -112px;
        --info-gap: 64px;
    }

    .artifact::before {
        filter: blur(16px);
    }

    .artifact::after {
        bottom: -14px;
    }

    .artifact .info {
        width: min(32vw, 124px);
        font-size: 10px;
        padding: 5px 8px;
    }

    .left { left: 2%; top: 52%; }
    .center { left: 48%; top: 37%; }
    .right { left: 66%; top: 52%; }

    .path .timeline-date {
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .nav-btn {
        width: 42px;
        height: 42px;
        font-size: 18px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .catalog-toggle span:last-child {
        display: none;
    }

    .home-btn {
        font-size: 13px;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .path {
        --timeline-left: 10%;
        --timeline-center: 50%;
        --timeline-right: 90%;
        bottom: 26px;
        left: 10%;
        width: 80%;
    }

    .path::after {
        width: 76px;
        height: 16px;
        top: -5px;
    }

    .path .timeline-date {
        top: 12px;
        font-size: 9px;
        letter-spacing: 0.03em;
    }

    .artifact {
        --artifact-lift: -62px;
        --info-gap: 42px;
        --artifact-size: clamp(76px, 15vw, 110px);
        --pedestal-width: 54px;
        --pedestal-height: 64px;
        --shadow-width: 120px;
        --shadow-height: 50px;
    }

    .artifact.center {
        --artifact-lift: -70px;
        --info-gap: 46px;
        --artifact-size: clamp(90px, 18vw, 126px);
        --pedestal-width: 64px;
        --pedestal-height: 76px;
        --shadow-width: 132px;
        --shadow-height: 56px;
        margin-left: -50px;
    }

    .artifact-bust,
    .artifact-statue {
        left: 66%;
        top: 56%;
        --artifact-lift: -68px;
        --artifact-lift-small: -68px;
        --info-gap: 44px;
    }

    .artifact::before {
        top: 76%;
        filter: blur(14px);
    }

    .artifact::after {
        bottom: -8px;
    }

    .artifact .info {
        width: min(18vw, 100px);
        font-size: 9px;
        padding: 4px 6px;
    }

    .left { left: 6%; top: 53%; }
    .center { left: 48%; top: 38%; }
    .right { left: 67%; top: 53%; }

    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        bottom: 10px;
    }

    .modal {
        padding: 56px 14px 20px;
    }

    .modal-content {
        width: min(100%, 720px);
        gap: 14px;
    }

    .modal-text {
        font-size: 14px;
    }

    .modal.modal-chair-focus #modal-img {
        width:74%;
        margin-top:-24px;
    }

    #modal-model {
        min-height: 180px;
        height: min(48vh, 240px);
    }

    .close {
        top: 12px;
        right: 14px;
        font-size: 28px;
    }
}
.scene-era {
    display:none;
}

.scene.scene-thematic::before {
    background:
        linear-gradient(180deg, rgba(14, 26, 54, 0.36), rgba(10, 18, 40, 0.72)),
        radial-gradient(circle at 15% 18%, rgba(255,214,102,0.14), transparent 36%),
        radial-gradient(circle at 85% 84%, rgba(56,189,248,0.12), transparent 34%);
}

.scene.scene-thematic .path {
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    opacity:0.7;
}

.scene.scene-thematic .timeline-date {
    color:rgba(255,255,255,0.88);
}

.scene.scene-thematic .scene-era {
    position:absolute;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:min(72vw, 420px);
    padding:12px 22px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.28);
    background:linear-gradient(180deg, rgba(15,23,42,0.82), rgba(2,6,23,0.62));
    color:#fff7e8;
    font-family:var(--font-display);
    font-size:clamp(18px, 2vw, 26px);
    font-weight:700;
    letter-spacing:0.02em;
    z-index:3;
    box-shadow:0 18px 42px rgba(0,0,0,0.34);
    backdrop-filter:blur(10px);
}

.scene-note {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(520px, 72%);
    padding: 22px 24px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    background: rgba(15,23,42,0.78);
    color: white;
    text-align: center;
    line-height: 1.6;
    box-shadow: 0 24px 48px rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
}

.scene-empty .path {
    opacity: 0.45;
}

.scene-single-artifact .artifact,
.scene-single-artifact .artifact.artifact-bust,
.scene-single-artifact .artifact.artifact-statue {
    left:50%;
    top:40%;
    margin-left:-170px;
}

.artifact.slot-left {
    left: 11%;
    top: 51%;
}

.artifact.slot-center {
    left: 50%;
    top: 40%;
    --artifact-lift: -148px;
    --info-gap: 82px;
    margin-left: -170px;
}

.artifact.slot-center img.lift-small {
    --artifact-lift-small: -160px;
}

.artifact.slot-right {
    left: 68%;
    top: 51%;
}

.artifact-frame-chair {
    --artifact-lift:-214px;
    --artifact-lift-small:-214px;
    --info-gap:98px;
}

.artifact-frame-chair::after {
    display:none;
}

.artifact-frame-chair picture {
    position:relative;
    overflow:visible;
}

.artifact-frame-chair picture::after {
    content:none;
}

.artifact-frame-chair img {
    border-radius:6px;
    border:1px solid rgba(229,213,182,0.44);
}

.scene-two-artifacts-compact .artifact.slot-left {
    left: 24%;
    top: 49%;
}

.scene-two-artifacts-compact .artifact.slot-right {
    left: 56%;
    top: 49%;
}

@media (max-width: 900px) {
    .scene-era {
        top: max(70px, env(safe-area-inset-top) + 42px);
        right: 14px;
        padding: 8px 12px;
        font-size: 10px;
    }

    .scene.scene-thematic .scene-era {
        top:max(54px, env(safe-area-inset-top) + 44px);
        left:50%;
        right:auto;
        transform:translateX(-50%);
        min-width:min(86vw, 320px);
        font-size:clamp(14px, 4vw, 18px);
        padding:8px 14px;
    }

    .scene-note {
        width: min(88%, 420px);
        padding: 18px 16px;
        font-size: 14px;
    }

    .artifact.slot-left {
        left: 4%;
        top: 57%;
    }

    .artifact.slot-center {
        left: 48%;
        top: 43%;
        --artifact-lift: -132px;
        --info-gap: 76px;
        --artifact-size: clamp(122px, 29vw, 184px);
        --pedestal-width: 96px;
        --pedestal-height: 112px;
        --shadow-width: 192px;
        --shadow-height: 82px;
        margin-left: -78px;
    }

    .artifact.slot-right {
        left: 65%;
        top: 57%;
    }

    .scene-two-artifacts-compact .artifact.slot-left {
        left: 20%;
        top: 55%;
    }

    .scene-two-artifacts-compact .artifact.slot-right {
        left: 54%;
        top: 55%;
    }

    .artifact-frame-chair {
        --artifact-lift:-186px;
        --artifact-lift-small:-186px;
        --info-gap:90px;
    }

    .scene-single-artifact .artifact,
    .scene-single-artifact .artifact.artifact-bust,
    .scene-single-artifact .artifact.artifact-statue {
        left:48%;
        top:43%;
        margin-left:-78px;
    }
}

@media (max-width: 600px) {
    .scene.scene-thematic .scene-era {
        top:max(58px, env(safe-area-inset-top) + 48px);
    }

    .scene-note {
        width: min(90%, 360px);
        padding: 16px 14px;
        font-size: 13px;
    }

    .artifact.slot-left {
        left: 2%;
        top: 55%;
    }

    .artifact.slot-center {
        left: 48%;
        top: 41%;
        --artifact-lift: -120px;
        --info-gap: 68px;
        --artifact-size: clamp(108px, 31vw, 156px);
        --pedestal-width: 82px;
        --pedestal-height: 96px;
        --shadow-width: 164px;
        --shadow-height: 70px;
        margin-left: -60px;
    }

    .artifact.slot-right {
        left: 66%;
        top: 55%;
    }

    .scene-two-artifacts-compact .artifact.slot-left {
        left: 18%;
        top: 53%;
    }

    .scene-two-artifacts-compact .artifact.slot-right {
        left: 54%;
        top: 53%;
    }

    .artifact-frame-chair {
        --artifact-lift:-166px;
        --artifact-lift-small:-166px;
        --info-gap:82px;
    }

    .scene-single-artifact .artifact,
    .scene-single-artifact .artifact.artifact-bust,
    .scene-single-artifact .artifact.artifact-statue {
        left:48%;
        top:41%;
        margin-left:-60px;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .home {
        align-items:stretch;
        padding-top:max(10px, env(safe-area-inset-top) + 6px);
        padding-left:0;
        text-align:left;
    }

    .home-cta {
        padding-inline:clamp(18px, 4vw, 36px);
        gap:14px;
    }

    .home-title-main {
        font-size:clamp(24px, 5.4vw, 36px);
        line-height:1.02;
    }

    .home-title-sub {
        padding:6px 12px;
        font-size:clamp(9px, 1.7vw, 11px);
        letter-spacing:0.1em;
    }

    .start-btn {
        --hero-btn-shift:-50%;
        left:50%;
        right:auto;
        transform:translateX(var(--hero-btn-shift)) translateY(0);
        bottom:max(8px, env(safe-area-inset-bottom) + 6px);
    }

    .scene-note {
        width: min(62%, 360px);
        padding: 14px 16px;
        font-size: 12px;
    }

    .scene-single-artifact .artifact,
    .scene-single-artifact .artifact.artifact-bust,
    .scene-single-artifact .artifact.artifact-statue {
        left:46.5%;
        top:43%;
        margin-left:-50px;
    }

    .scene.scene-thematic .scene-era {
        top:max(34px, env(safe-area-inset-top) + 28px);
    }

    .artifact.slot-left {
        left: 6%;
        top: 58%;
    }

    .artifact.slot-center {
        left: 48%;
        top: 43%;
        --artifact-lift: -84px;
        --info-gap: 46px;
        --artifact-size: clamp(90px, 18vw, 126px);
        --pedestal-width: 64px;
        --pedestal-height: 76px;
        --shadow-width: 132px;
        --shadow-height: 56px;
        margin-left: -50px;
    }

    .artifact.slot-right {
        left: 67%;
        top: 58%;
    }
}

.catalog-item-title {
    font-weight:600;
}

.catalog-item-meta {
    font-size:12px;
    color:rgba(255,255,255,0.62);
    letter-spacing:0.04em;
    text-transform:uppercase;
}

@media (max-width: 900px) {
    .catalog-item-meta {
        font-size:11px;
    }
}
@media (max-height: 540px) and (orientation: landscape) {
    .artifact.slot-left {
        left: 14%;
        top: 59%;
    }

    .artifact.slot-center {
        left: 46.5%;
        top: 46%;
    }

    .artifact.slot-right {
        left: 63%;
        top: 59%;
    }

    .artifact.slot-center.artifact-bust {
        left: 46.5%;
        top: 55%;
        --artifact-size: clamp(74px, 14vw, 96px);
        margin-left: -34px;
        --artifact-lift: -38px;
        --artifact-lift-small: -38px;
        --info-gap: 76px;
    }
}


/* Mobile view: one active exhibit per period */
.scene-mobile-picker {
    display:none;
}

.scene-mobile-chip {
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(15,23,42,0.72);
    color:white;
    padding:8px 12px;
    font:inherit;
    cursor:pointer;
    backdrop-filter:blur(10px);
    box-shadow:0 14px 28px rgba(0,0,0,0.24);
    transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.scene-mobile-chip:hover,
.scene-mobile-chip:focus-visible {
    outline:none;
    transform:translateY(-1px);
    border-color:rgba(255,214,102,0.45);
}

.scene-mobile-chip.active {
    background:rgba(255,214,102,0.18);
    border-color:rgba(255,214,102,0.6);
}

.scene-mobile-chip-number {
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    font-size:11px;
    font-weight:700;
    line-height:1;
}

.scene-mobile-chip-label {
    max-width:170px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:12px;
    font-weight:600;
}

@media (max-width: 900px), (max-height: 540px) and (orientation: landscape) {
    .scene.mobile-focus-mode .scene-mobile-picker {
        position:absolute;
        left:16px;
        right:16px;
        z-index:4;
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:4px 2px 2px;
        scrollbar-width:none;
    }

    .scene.mobile-focus-mode .scene-mobile-picker::-webkit-scrollbar {
        display:none;
    }

    .scene.mobile-focus-mode .artifact {
        left:50% !important;
        top:var(--mobile-focus-top) !important;
        width:var(--mobile-focus-size);
        margin-left:calc(var(--mobile-focus-size) / -2) !important;
        opacity:0 !important;
        visibility:hidden;
        pointer-events:none;
    }

    .scene.mobile-focus-mode .artifact.mobile-active {
        opacity:1 !important;
        visibility:visible;
        pointer-events:auto;
        --artifact-size:var(--mobile-focus-size);
        --artifact-lift:var(--mobile-focus-lift);
        --artifact-lift-small:var(--mobile-focus-lift);
        --info-gap:var(--mobile-focus-info-gap);
        --pedestal-width:var(--mobile-focus-pedestal-width);
        --pedestal-height:var(--mobile-focus-pedestal-height);
        --shadow-width:var(--mobile-focus-shadow-width);
        --shadow-height:var(--mobile-focus-shadow-height);
    }

    .scene.mobile-focus-mode .artifact.mobile-hidden .info,
    .scene.mobile-focus-mode .artifact.mobile-hidden::before,
    .scene.mobile-focus-mode .artifact.mobile-hidden::after {
        opacity:0 !important;
    }

    .scene.mobile-focus-mode .artifact.mobile-active .info {
        opacity:1;
        width:min(64vw, 240px);
        text-align:center;
    }
}

@media (max-width: 900px) {
    .scene.mobile-focus-mode {
        --mobile-focus-size:clamp(148px, 40vw, 220px);
        --mobile-focus-top:42%;
        --mobile-focus-lift:-124px;
        --mobile-focus-info-gap:50px;
        --mobile-focus-pedestal-width:108px;
        --mobile-focus-pedestal-height:124px;
        --mobile-focus-shadow-width:204px;
        --mobile-focus-shadow-height:88px;
    }

    .scene.mobile-focus-mode .scene-mobile-picker {
        bottom:128px;
    }

    .scene.mobile-focus-mode .path {
        bottom:72px;
    }
}

@media (max-width: 600px) {
    .scene.mobile-focus-mode {
        --mobile-focus-size:clamp(138px, 46vw, 188px);
        --mobile-focus-top:43%;
        --mobile-focus-lift:-108px;
        --mobile-focus-info-gap:80px;
        --mobile-focus-pedestal-width:94px;
        --mobile-focus-pedestal-height:108px;
        --mobile-focus-shadow-width:182px;
        --mobile-focus-shadow-height:76px;
    }

    .scene.mobile-focus-mode .scene-mobile-picker {
        bottom:112px;
        gap:6px;
    }

    .scene.mobile-focus-mode .scene-mobile-chip {
        padding:7px 10px;
    }

    .scene.mobile-focus-mode .scene-mobile-chip-label {
        max-width:138px;
        font-size:11px;
    }

    .scene.mobile-focus-mode .artifact.mobile-active .info {
        width:min(70vw, 220px);
        font-size:11px;
    }

    .scene.mobile-focus-mode .path {
        bottom:58px;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .scene.mobile-focus-mode {
        --mobile-focus-size:clamp(112px, 22vw, 154px);
        --mobile-focus-top:47%;
        --mobile-focus-lift:-80px;
        --mobile-focus-info-gap:60px;
        --mobile-focus-pedestal-width:80px;
        --mobile-focus-pedestal-height:94px;
        --mobile-focus-shadow-width:156px;
        --mobile-focus-shadow-height:66px;
    }

    .scene.mobile-focus-mode .scene-mobile-picker {
        left:50%;
        right:auto;
        width:min(560px, calc(100vw - 144px));
        transform:translateX(-50%);
        justify-content:center;
        bottom:58px;
        gap:8px;
    }

    .scene.mobile-focus-mode .scene-mobile-chip {
        padding:6px 10px;
    }

    .scene.mobile-focus-mode .scene-mobile-chip-number {
        width:18px;
        height:18px;
        font-size:10px;
    }

    .scene.mobile-focus-mode .scene-mobile-chip-label {
        max-width:120px;
        font-size:10px;
    }

    .scene.mobile-focus-mode .artifact.mobile-active .info {
        width:min(30vw, 170px);
        font-size:9px;
    }

    .scene.mobile-focus-mode .path {
        bottom:24px;
    }
}


@media (max-height: 760px) and (min-width: 901px) {
    .path {
        bottom: 32px;
        left: 9%;
        width: 82%;
    }

    .path .timeline-date {
        top: 18px;
        font-size: 12px;
        letter-spacing: 0.1em;
    }

    .artifact {
        --artifact-lift: -136px;
        --info-gap: 74px;
        --artifact-size: clamp(120px, 17vw, 188px);
    }

    .artifact img,
    .artifact model-viewer {
        width: var(--artifact-size);
    }

    .artifact picture {
        width: var(--artifact-size);
    }

    .artifact::before {
        top: 60%;
        width: 320px;
        height: 136px;
        filter: blur(22px);
    }

    .artifact::after {
        bottom: -42px;
        width: 170px;
        height: 176px;
    }

    .artifact.slot-left {
        top: 45%;
    }

    .artifact.slot-center {
        top: 33%;
        --artifact-lift: -152px;
        --info-gap: 80px;
        margin-left: -150px;
    }

    .artifact.slot-center img.lift-small {
        --artifact-lift-small: -160px;
    }

    .artifact.slot-right {
        top: 45%;
    }
}

/* Mobile view: hide labels above exhibits */
@media (max-width: 900px), (max-height: 540px) and (orientation: landscape) {
    .artifact .info,
    .scene.mobile-focus-mode .artifact.mobile-active .info {
        display:none !important;
    }
}

.scene-transition .scene-era {
    margin-bottom: 10px;
}

.scene-transition-label {
    position: absolute;
    top: 84px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 20, 44, 0.72);
    border: 1px solid rgba(195, 173, 116, 0.58);
    color: rgba(255, 246, 225, 0.94);
    font: 600 11px/1.25 "Manrope", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    max-width: min(84vw, 820px);
    z-index: 7;
}

@media (max-width: 900px), (max-height: 540px) and (orientation: landscape) {
    .scene-transition-label {
        top: 74px;
        padding: 7px 10px;
        font-size: 9px;
        max-width: min(92vw, 680px);
    }
}