* {
    box-sizing: border-box;
}

body, html {
    margin:0;
    padding:0;
}

html {
    height: 100vh;
}

body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: monospace;
}

gl-scene {
    width: 100%; height: 100%;
}

@font-face {
    font-family: 'Whyte Inktrap';
    src: url('/assets/fonts/ABCWhyteInktrap-Regular.woff') format('woff');
}
    
.poi {
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 30px;
    margin-left: -15px;
    margin-top:  -15px;
    z-index: 10;
    border-radius: 100%;
    transition: 0.4s cubic-bezier(0.430, 0.195, 0.020, 1.000);
    transition-property: background-color;
}
.poi svg {
    width: 100%;
    height: 100%;
}
.poi svg [dot] {
    opacity: 0.5;
}
.poi svg [circle],
.poi svg [progress] {
    opacity: 0;
}
.poi.is-active svg [circle] {
    opacity: 0.5;
}
.poi.is-active svg [progress] {
    opacity: 1;
}
.poi.is-checked svg [circle],
.poi.is-checked svg [circle] {
    opacity: 1;
}

.cursor {
    position: absolute;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border-radius: 100%;
    margin-left: -10px;
    margin-top:  -10px;
    box-shadow: 0px 0px 3px;
    z-index: 20;
    border: solid 1px #fff;
    pointer-events: none;
}
.cursor__inner {
    position: absolute;
    top: 50%; left: 50%;
    width: 3px; height: 3px;
    border-radius: 100%;
    background: #fff;
    transform: translate(-50%, -50%);
}
.checklist {
    position: absolute;
    bottom: 20px; left: 20px;
    color: #fff;
    font-family: monospace;
    list-style: none;
    font-size: 13px;
    padding: 0;
    padding-bottom: 20px;
}
.checklist li {
    display: flex;
    align-items: center;
}
.checklist li:not(:last-child) {
    margin-bottom: 4px;
}
.checklist li span {
    display: inline-block;
    border: solid 1px #fff;
    width: 14px;
    height: 14px;
    margin-right: 5px;
}
.checklist li.is-checked span {
    background: green;
}

button.cta {
    font-size: 14px;
    color: #fff;
    background: #000000ad;
    border-radius: 30px;
    padding: 8px 16px;
    border: solid 1px #fabe1d;
    backdrop-filter: blur(20px);
}

.inspect-btn {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-out;
}


.caption {
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 100%;
    padding: 0px 20%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 3px #000;

}

.title-screen {
    display: flex;
    align-items:center; 
    justify-content: center;
    height: 100%;
    top: 0; left: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    background: rgba(0,0,0,0.4);
    transition: opacity 1.1s cubic-bezier(0.430, 0.195, 0.020, 1.000);
}
.title-screen.is-leaving {
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.1s 0.3s cubic-bezier(0.430, 0.195, 0.020, 1.000);
}

.title {
    font-family: 'Whyte Inktrap';
    width: 100%;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}
.title .line {
    display: block;
    overflow: hidden;
    transform: translateZ(0);
    font-size: 0;
}
.title .line .word {
    font-size: 70px;
    display: inline-block;
    transform: translateY(100%) translateZ(0);
}

.title-screen.is-ready .title .line:nth-child(1) .word {
    transition: transform 1.3s cubic-bezier(0.430, 0.195, 0.020, 1.000);
}
.title-screen.is-ready .title .line:nth-child(2) .word {
    transition: transform 1.3s 0.1s cubic-bezier(0.430, 0.195, 0.020, 1.000);
}


.title  .line .word.headline {
    font-size: 18px;
}
.title-screen.is-ready .title  .line  .word {
    transform: translateY(0%) translateZ(0);
}
.title-screen.is-leaving .title  .line  .word {
    transform: translateY(-100%) translateZ(0);
}



.start-btn {
    opacity: 0;
}
.title-screen.is-ready .start-btn {
    opacity: 1;
    transition: opacity 1.3s 0.2s cubic-bezier(0.430, 0.195, 0.020, 1.000);
}
.title-screen.is-leaving .start-btn {
    opacity: 0;
    transition: opacity 1.3s cubic-bezier(0.430, 0.195, 0.020, 1.000);
}


.quality-nav {
    position: absolute;
    bottom: 0; right: 0;
    padding: 20px;
}
.quality-btn {
    font-size: 16px;
    color: #fff;
    opacity: 0.6;
    -webkit-appearence: none;
    border:none;
    background: none;
}
.quality-btn.is-selected {
    opacity: 1;
}