/* Client load animations */

@keyframes logo-slide-down { 
    0% { transform: translateY(-100%); } 
    100% { transform: translateY(0); } 
}
@keyframes curtain-slide-down { 
    0% { transform: translateY(-100%); } 
    10% { transform: translateY(-100%); }
    100% { transform: translateY(100%); } 
}
@keyframes curtain-slide-up { 
    0% { transform: translateY(100%); } 
    10% { transform: translateY(100%); }
    100% { transform: translateY(-100%); } 
}

/*
@keyframes cloud-entry-left {
    100% { transform: translate(415px, -205px); }
}
@keyframes cloud-entry-right {
    100% { transform: rotateY(180deg) translate(-700px, 335px); }
}

@keyframes car-entry-left {
    50% { transform: translate(280px, -141px) rotateY(180deg); }
    100% { transform: translate(561px, 0px) rotateY(180deg); }
}

@keyframes taxi-entry-left {
    50% { transform: translate(279px, -140px) rotateY(180deg); }
    100% { transform: translate(560px, 0px) rotateY(180deg); }
}

@keyframes doubledecker-entry-left {
    50% { transform: translate(312px, -156px) rotateY(180deg); }
    100% { transform: translate(624px, 0px) rotateY(180deg); }
}

@keyframes car-entry-right {
    50% { transform: translate(-241px, -121px); }
    100% { transform: translate(-482px, 0px); }
}

@keyframes taxi-entry-right {
    0% { left: 720px; bottom: -16px; }
    50% { left: 478px; bottom: 104px; }
    100% { left: 237px; bottom: -16px; }
}

@keyframes doubledecker-entry-right {
    0% { left: 745px; bottom: -32px; }
    50% { left: 474px; bottom: 104px; }
    100% { left: 201px; bottom: -32px; }
}

@keyframes car-turn {
    to { background-position: -22px -33px;
        -webkit-mask-position: -22px -33px; 
        mask-position: -22px -33px; }
}

@keyframes taxi-turn {
    to { background-position: -23px -50px; 
        width: 22px; 
        height: 15px; }
}

@keyframes doubledecker-turn {
    to { background-position: -34px 0px; }
}

/* -- */

@keyframes waving-flags {
    0% { background-position: 0px -68px; }
    20% { background-position: -22px -68px; }
    40% { background-position: -44px -68px; }
    60% { background-position: 0px -85px; }
    80% { background-position: -22px -85px; }
    100% { background-position: -44px -85px; }
}

html {
    font-family: Volter;
    font-size: 62.5%;
    font-display: swap;
}

body {
    background-color: #000;
    margin: auto;
    image-rendering: pixelated;
}
.absolute {
    position: absolute;
}
.no-overflow {
    overflow: hidden;
}
.top {
    top: 0;
}
.bottom {
    bottom: 0;
}
.left {
    left: 0;
}
.wh-100 {
    width: 100%;
    height: 100%;
}
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

canvas {
    bottom: 0;
    z-index: 4;
}
.loops * {
    background-image: var(--sprite-country);
    background-repeat: no-repeat;
}

.black-box {
    min-height: 540px;
    display: flex;
    background-color: #000;
}
.black-box * {
    position: absolute;
}
.curtain {
    z-index: 5;
    height: 50%;
    background-color: #000;
    animation-duration: 3s;
}
.curtain.up {
    top: -50%;
    animation-name: curtain-slide-up;
}
.curtain.down {
    bottom: -50%;
    animation-name: curtain-slide-down;
}

.stage {
    min-width: 1072px;
    height: calc(100% - 109px);
    margin: auto;
    position: relative;
}
.stage-right {
    right: 0;
}
.logo {
    z-index: 6;
    animation-name: logo-slide-down;
    animation-duration: 2s;
    filter: drop-shadow(-5px 10px rgba(50, 50, 50, .3));
}
.sun.regular {
    width: 150px;
    height: 110px;
    top: -200px;
    right: 266px;
    border-radius: 50%;
    box-shadow: 0 0 75px 130px rgb(235, 255, 255), 0 0 160px 60px rgb(180, 255, 255), 0 0 40px 220px rgba(180, 255, 255, .3);
    z-index: 2;
}
.base {
    width: 1072px;
    height: 384px;
    background-repeat: no-repeat;
    z-index: 2;
}
.hotel {
    background-repeat: no-repeat;
    z-index: 3;
}

/*.cloud .tiny {
    width: 6px;
    height: 5px;
    background-position: -22px -48px;
}
.cloud .small {
    width: 14px;
    height: 13px;
    background-position: -23px -34px;
}
.cloud .medium {
    width: 21px;
    height: 22px;
    background-position: 0 -34px;
}
.cloud .large {
    width: 42px;
    height: 31px;
    background-position: 0 0;
}
.cloud .large-right {
    width: 42px;
    height: 34px;
    background-position: -43px 0;
    transform: rotateY(180deg);
}
.cloud.entry-left {
    animation-name: cloud-entry-left;
    animation-duration: 20s;
    animation-timing-function: linear;
    right: 0;
}
.cloud.entry-right {
    left: var(--cloud-turned-pos-x);
    bottom: var(--cloud-turned-pos-y);
    transform: rotateY(180deg);
    filter: opacity(0.6);
    animation-name: cloud-entry-right;
    animation-duration: 40s;
    animation-delay: 15s;
    animation-timing-function: linear;
    z-index: 1;
}

.animations .entry-left {
    z-index: 4;
    transform: rotateY(180deg);
}
.animations .entry-right {
    z-index: 5;
}

.car.entry-left {
    left: 199px; 
    bottom: -16px;
    animation-name: car-entry-left, car-turn;
}
.taxi.entry-left {
    left: 199px; 
    bottom: -16px;
    animation-name: taxi-entry-left, taxi-turn;
}
.doubledecker.entry-left {
    left: 162px; 
    bottom: -32px;
    animation-name: doubledecker-entry-left, doubledecker-turn;
}
.car.entry-right {
    left: 720px; 
    bottom: -16px;
    animation-name: car-entry-right, car-turn;
}
.taxi.entry-right {
    animation-name: taxi-entry-right, taxi-turn;
}
.doubledecker.entry-right {
    animation-name: doubledecker-entry-right, doubledecker-turn;
}*/

.uk-flags {
    width: 20px;
    height: 15px;
    bottom: 244px;
    left: 52px;
    animation-name: waving-flags;
    animation-duration: .65s;
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
    z-index: 3;
}

/* Media queries */

@media screen and (max-width: 719px) {
    .black-box {
        overflow-x: auto;
    }
}