#experience {
    overflow: hidden;
    background: none !important;
}

@keyframes scanning {
    from { top: 0; }
    to { top:100%; }
}

#experience .scanner {
    position: absolute;
    z-index: 3;
    top:0;
    left:0;
    width: 100%;
    border-bottom: 6px solid rgba(255,255,255,0.2);
    //animation: 3s ease-in-out infinite alternate scanning;
}

#experience:not([_scan-state="scan"]) .scanner { display:none; animation: none; }

#experience .loader {
    position: absolute;
    z-index: 3;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #3a3a3a;
    transition: 0.3s ease-out opacity;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#experience[_load-state="loaded"] .loader { opacity: 0; pointer-events: none; }

#experience .loader .progress { width: 60%; height: 18px; border: 1px solid gray; border-radius: 9px; padding: 2px; box-shadow: 0 0 2px 6px inset rgba(0,0,0,0.1) }
#experience .loader .progress .bar .value { transition: 0.3s width ease-out; background-color: #9ab173; height: 12px; border-radius: 6px; }
#experience .loader .progress .percent { margin-top: 1rem; color: whitesmoke; text-align: center; }

@keyframes pulsate {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
#experience .warning { position: absolute; z-index: 3; top:3rem; right:3rem; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid red;
    //animation: pulsate 0.4s infinite ease-in-out;
}
#experience:not([_scan-state="warning"]) .warning { display:none; animation: none; }
#experience .warning img { width: 100%; height: 100%; border-radius: 50%; }

#experience #stream {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
}

#experience #webgl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /*transition: 0.3s ease-out opacity;*/
}

#experience[_scan-state="scan"] #webgl { opacity: 0; pointer-events: none; }


#arjs-video {

    image-rendering:optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering:crisp-edges;

    /*transition-delay: 1s;
    transition-duration: 0.5s;
    transition-property: opacity;
    transition-timing-function: ease-out;*/
}

body:not([_board="experience"]) #arjs-video { opacity: 0; }

/*SETTINGS*/

#settings {
    position: absolute;
    top:0;
    left: 0;
    z-index: 6;
    width: 100%;
    overflow: hidden;
    padding: 1rem;
    text-align: center;
    max-height: 100%;
}

body:not([_board="experience"])  #settings { display: none; }

#settings.open {background-image:url("../../../../../../media/static/background.jpg"); background-size: 100%; background-position: top center; overflow-y: auto; }
#settings:not(.open) { width: 4rem; height: 4rem; }

#settings > .indicator {
    position: absolute;
    top:0.5rem;
    left: 1rem;
    border-radius: 50%;
    border: 1px solid #505050;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    align-items: center;
    color: white;
    width: 24px;
    height: 24px;
    background: #3a3a3a;
}

#settings.open > .indicator { display: none; }

#settings > .close {
    position: fixed;
    top:1rem;
    right: 1rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    align-items: center;
    color: white;
    width: 24px;
    height: 24px;
}

#settings:not(.open) > .close { display: none; }

#settings section {
    margin-bottom: 4rem;
}

#settings:not(.open) section { display: none; }

#settings section .options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

#settings button {
    position: unset !important;
    top: unset !important;
    left: unset !important;
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

#settings button.selected {
    background-color: #616b4f;
}

#settings:not([_supported]) > section.detection { display: none; }
#settings:not([_supported*="exposureTime"]) section.exposureTime { display: none; }
#settings:not([_supported*="exposureCompensation"]) section.exposureCompensation { display: none; }
#settings:not([_supported*="contrast"]) section.contrast { display: none; }
#settings:not([_supported*="brightness"]) section.brightness { display: none; }
#settings:not([_supported*="sharpness"]) section.sharpness { display: none; }


/*#experience #calibrate {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

body[state="calibrate"] #experience >*:not(#calibrate):not(#stream) { display: none; }
body:not([state="calibrate"]) #experience #calibrate { display: none; }

#experience .marker { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }*/

/*#experience:not(.marker) a-scene { opacity: 0; }*/

/*a-scene { z-index: 1; }*/
/*#arjs-video { z-index: 0 !important; }*/