@font-face {
    font-family: 'UnityBold';
    src: url('../fonts/TCCC-UnityTextPC-Bold.ttf');
}

html,
body {
    margin: 0;
    overflow: hidden;
}

html {
    font-family: sans-serif;
}

#main-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#camera-video {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all 1s linear;
}
#camera-video.active-marker {
    /* filter: blur(2px); */
}

.marker-container {
    /* perspective: 1000px; */
    /* perspective-origin: center; */
}

.marker-asset {
    position: absolute;
    /* display: none; */
    opacity: 0;
    height: auto;
    /* transition: none; */
    transform-origin: center;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    transition: top .5s linear, left .5s linear, width .5s linear, height .5s linear, transform .5s linear, opacity .5s;
}
.marker-asset.show {
    /* display: block; */
    transition: top .5s linear, left .5s linear, width .5s linear, height .5s linear, transform .5s linear, opacity 1s;
    opacity: 1;
}
.marker-asset.disable-transition {
    transition: opacity 1s;
}

.marker-video {
    /* display: none; */
    /* transform: scale(1.2); */
    /* perspective: 300px; */
}

.tracking-canvas {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

#asset-buttons-container {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    padding-bottom: 20px;
    gap: 4vw;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s ease;
}
#asset-buttons-container.show {
    opacity: 1;
}

.asset-button {
    position: relative;
    max-width: 100px;
    max-height: 100px;
    width: 20vw;
    height: 20vw;
}

.asset-button-inactive, .asset-button-active {
    position: absolute;
    max-width: 100px;
    max-height: 100px;
    width: 20vw;
    height: 20vw;
    top: 0;
    left: 0;
}
.asset-button-active {
    display: none;
}
.asset-button.active .asset-button-inactive {
    display: none;
}
.asset-button.active .asset-button-active {
    display: block;
}

/* Loader */

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* background-color: rgba(0, 0, 0, .8); */
    background-color: #E03024;
    z-index: 99999;
    transition: opacity .5s ease;
}
#loading-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

#loading-animation {
    width: 100vw;
    height: var(--vh);
    background-image: url('../assets/images/bubble_loader.gif');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Prompt */

#prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
#prompt.show {
    opacity: 1;
}
#prompt.not-loaded {
    opacity: 0
}

#prompt-text {
    position: absolute;
    width: 70vw;
    top: 40px;
    left: 50vw;
    transform: translateX(-50%);
    font-family: 'UnityBold';
    font-size: 1.2em;
    text-align: center;
    color: white;
    background: black;
    padding: 12px;
    box-sizing: border-box;
}

#prompt img {
    position: absolute;
    left: 50vw;
    top: 50vh;
    width: 70vw;
    transform: translate(-50%, -50%);
    opacity: .4;
}