html, body { height:100%;  font-size: 10px; }
html { transition: font-size 0.3s; }


body { 
    overflow:hidden; 
    margin:0; padding:0; 
    background-color:#000000; 

    --transition-duration: 0.5s;

    /* Color Variables */
    --color-cream: rgb(247, 244, 229 );
    --color-cream-opaque: rgb(247, 244, 229, 0.87 );
    --color-cream-grey: #E6E3D2;
    --color-gold: #A06E47;
    --color-gold-opaque: rgba(160, 110, 71, 0.87);
    --color-gold-light: #E0C474;
}

* {
    user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.hide-scrollbars,
[data-scrollbar-scroller] {
    -ms-overflow-style: none;  /* Hide native scrollbars IE and Edge */
    scrollbar-width: none;  /* Hide native scrollbars Firefox */
}

.hide-scrollbars::-webkit-scrollbar,
[data-scrollbar-scroller]::-webkit-scrollbar {
    display: none; width: 0; height: 0;  /* Hide native scrollbars Webkit */
}

scroll-bar {
    position: absolute;
    width: 2rem; height: 2rem; 
    --track-color: rgba(0,0,0,0.2);
    --track-width: 0.1rem;
    --thumb-color: var(--color-gold);
    --thumb-width: 0.4rem;
    --thumb-radius: 0px;
}

scroll-bar:not([data-horizontal]) { right: 0rem; top: 1rem; height: calc(100% - 2rem); }
scroll-bar[data-horizontal] { left: 1rem; bottom: 0rem; width: calc(100% - 2rem); }




[data-ui="vr-app"] {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 10;
    overflow: hidden;
}

[data-ui="pano-viewer"] {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 0;
    transform: none;
    transition: transform var(--transition-duration), opacity var(--transition-duration);
    opacity: 1;
}

[data-ui="vr-app"].main-menu-open [data-ui="pano-viewer"] {
    transform: scale(1.02);
}

[data-ui="main-menu-overlay-blur"] {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 1;
    transition: transform var(--transition-duration), backdrop-filter var(--transition-duration), opacity var(--transition-duration);
    pointer-events: none;
    opacity: 0;
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.3);
}

[data-ui="vr-app"].main-menu-open [data-ui="main-menu-overlay-blur"] {
    pointer-events: all;
    opacity: 1;
    backdrop-filter: blur(5px)
}

[data-ui="scene-info-overlay-blur"] {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 1;
    transition: transform var(--transition-duration), backdrop-filter var(--transition-duration), opacity var(--transition-duration);
    pointer-events: none;
    opacity: 0;
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 100;
}

[data-ui="vr-app"]:has(scene-info.visible) [data-ui="scene-info-overlay-blur"] {
    pointer-events: all;
    opacity: 1;
    backdrop-filter: blur(5px)
}

[data-ui="ui"] {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 1;
    transform: scale(1);
}

[data-ui="gradient"] {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    transition: opacity calc(var(--transition-duration) * 5);
}

main.intro [data-ui="gradient"] {
    opacity: 0;
}

[data-ui="gradient"]::before {
    content: '';
    position: absolute;
    left: -50%; top: -100%; width: 200%; height: 100%;
    box-shadow: 0 0 30rem rgba(0, 0, 0, 1), 0 0 15rem rgba(0, 0, 0, 0.5);
}

[data-ui="gradient"]::after {
    content: '';
    position: absolute;
    left: -50%; top: 100%; width: 200%; height: 100%;
    box-shadow: 0 0 20rem rgba(0, 0, 0, 1), 0 0 10rem rgba(0, 0, 0, 0.3);
}


[data-ui="vr-app"].ui-hidden [data-ui="ui"] {
    opacity: 0;
    transform: scale(1.5);
    pointer-events: none;
}


[data-ui="logo"] {
    /* display: none; */
    position: absolute;
    left: 50%; top: 2rem; transform: translate(-50%, 0);
    width: auto; height: auto;
    opacity: 1;
    z-index: 1000;
    transition: opacity var(--transition-duration), transform calc(var(--transition-duration) * 3);
}

main.intro [data-ui="logo"] {
    opacity: 0;
    transform: translate(-50%, calc(50vh));
    transition: none;
}

[data-ui="logo"] img {
    width: 11rem; height: auto;
    object-fit: contain;
}




@media screen and (max-width: 500px) {
 
}



.border-pattern-star {
    border: 20px solid transparent;            
    border-image-source: url(images/pattern-star2.svg);
    border-image-slice: 20;
    border-image-repeat: repeat round;
    background-clip: padding-box;
}


#message1 {
    position: absolute;
    box-sizing: border-box;
    left: 50%; bottom: 0; transform: translate(-50%,0%);
    width: 57rem; height: auto; 
    border-width: 2rem 2rem 0 2rem;
    background-color: var(--color-cream);
    pointer-events: all;
    padding: 4rem;
    text-align: center;
}

#message1 h2 {
    width: 100%;
    text-align: center;
    font-family: 'Playfair Display Regular', Arial, Helvetica, sans-serif;
    font-size: 3.2rem;
    color: #000000;
    letter-spacing: 2%;
    margin: 0; padding: 0;
    margin-bottom: 2rem;
}

#message1 p {
    width: 100%;
    text-align: center;
    font-family: National;
    font-size: 1.6rem;
    color: #000000;
    letter-spacing: 2%;
    margin: 0; padding: 0;
    margin-bottom: 2rem;
}

#message1 button {
    width: 22rem;
    text-align: center;
    font-family: 'Playfair Display Regular', Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    color: #ffffff;
    line-height: 5.6rem;
    background-color: var(--color-gold);
    border: 0;
    cursor: pointer;
}

#intro {
    position: fixed;
    width: 100vw; height: 100vh;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s;
    object-fit: cover;
    z-index: 1;
}

#intro.visible {
    opacity: 1;
}

main.intro [data-ui="pano-viewer"] {
    opacity: 0;
}


main.font-small { font-size: 9px; }
main.font-norm { font-size: 10px; }
main.font-big { font-size: 11px; }
main.font-huge { font-size: 12px !important; }

[data-ui="loading"] {
    position: fixed;
    left: 0; top: 0; width: 100%;
    height: 0.2rem;
    --loading-progress: 50%;
    background: linear-gradient(90deg,var(--color-gold) var(--loading-progress), rgba(255,255,255,0.5) var(--loading-progress), rgba(255,255,255,0.5) 100%);
    opacity: 0;
    transition: opacity var(--transition-duration);
    pointer-events: none;
    z-index: 1000;
    transition-delay: var(--transition-duration);
}

main.loading [data-ui="loading"] {
    opacity: 1;
    transition-delay: 0s;
}

my-btn[data-role="ui-switcher"] {
    position: absolute;
    right: 2rem; bottom: 2rem; width: 4rem; height: 4rem;
    z-index: 1000;
    cursor: pointer;
    border: 0.1rem solid var(--color-gold);
    transition: background-color var(--transition-duration), transform var(--transition-duration), opacity var(--transition-duration);
    opacity: 0;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.1);
}

my-btn[data-role="ui-switcher"] svg {
    transition: background-color var(--transition-duration), transform var(--transition-duration), opacity var(--transition-duration);
}

my-btn[data-role="ui-switcher"]:hover {
    background-color: rgba(255,255,255,0.11);
}

main.ui-hidden my-btn[data-role="ui-switcher"] svg {
    transform: scaleY(-1);
}

main.tour-started my-btn[data-role="ui-switcher"] {
    opacity: 1;
}


@media screen and (max-width: 500px) {
    
    [data-ui="logo"] {
        top: 1rem; transform: translate(-50%, 0) scale(0.8);
    }
    
    main.main-menu-open [data-ui="logo"] {
        opacity: 0; pointer-events: none;
    }

}