:root {
    --font-size-xxs: 0.625rem; /* 10px */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-s: 0.875rem; /* 14px */
    --font-size-m: 1rem; /* 16px */
    --font-size-l: 2.25rem; /* 36px */

    --vh-100: 100vh;
    --page-padding: 1.25rem; /* 20px */

    --global-accent-color: #D54062;
    --color-red: #e94445;
    --color-yellow: #F1D900;
    --color-white: #fff;
    --color-black: #000;
    --color-gray: #F4F4F4;
    --color-gray-dark: #d3d3d3;

    --color-gradient-top: transparent;
    --color-gradient-bottom: transparent;
    --color-sunce: transparent;
    --color-theme-invert: transparent;

    --sab: 18px;
    --sat: env(safe-area-inset-top);
}

body {
    position: fixed;
    height: var(--vh-100);
    width: 100%;
    font-family: "Theinhardt";
    font-size: var(--font-size-s);
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--vh-100);
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
}

.scrolling-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 3;
}

.scrollbar-track.scrollbar-track-y {
    display: none!important;
}

.state--home-active .scrolling-container {
    z-index: 5;
}

.scrollbar-track {
    background-color: transparent !important;
}

.state--modal-open .scrollbar-track {
    display: none!important;
    pointer-events: none!important;
}

.scrollbar-thumb {
    left: -2px !important;
}

.frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.button {
    display: block;
    font-size: var(--font-size-m);
    padding: 0.75rem;
    border: 2px solid var(--global-accent-color);
    background-color: var(--global-accent-color);
    color: var(--color-white);
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    transition: opacity 100ms ease;
}

.button:active {
    opacity: 0.7;
}

.button--inverted {
    background-color: transparent;
    border: 2px solid var(--color-black);
    color: var(--color-black);
}

/* Text Bubble */

.text-bubble {
    display: inline-block;
    background-color: var(--color-white);
    padding: 1rem;
    border-radius: 20px;
    position: relative;
    max-width: 100%;
    font-size: var(--font-size-xs);
}

.text-bubble::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6.5px 10px 6.5px;
    border-color: transparent transparent var(--color-white) transparent;
    position: absolute;
    left: 2rem;
    top: -10px;
}

/* Loader */
.loader {
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
    position: absolute;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    color: var(--color-theme-invert);
    transition: opacity 300ms ease;
}

.state--loader-hidden.loader {
    opacity: 0;
}

.loader__spin {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid var(--color-theme-invert);
    border-left: 2px solid var(--color-theme-invert);
    border-radius: 50%;
    margin-bottom: 1rem;
    animation: loader 800ms linear infinite;
}

@keyframes loader {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader__text {
    font-size: var(--font-size-xs);
}

/* Update Overlay */
.update-overlay {
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    color: var(--color-theme-invert);
    transition: opacity 300ms ease;
}

.state--update.update-overlay {
    opacity: 1;
    pointer-events: auto;
}

.update-overlay__title {
    font-size: var(--font-size-l);
    margin-bottom: 1rem;
}

/* Navigation */

.nav {
    position: fixed;
    top: var(--sat);
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 4;
    transform: translate3d(0,0,0);
    transition: transform 300ms ease 200ms;
}

.state--home-active .nav {
    transform: translate3d(0,calc(-100% - var(--sat)),0);
    transition: transform 300ms ease;
}

.nav__inner {
    width: 100%;
    height: 100%;
    transform: translate3d(0,calc(-100% - var(--sat)),0);
    transition: transform 600ms ease 600ms;
}

.state--loaded .nav__inner {
    transform: translate3d(0,0,0);
}

.nav__sunce {
    position: absolute;
    width: 110vw;
    height: 110vw;
    left: 50%;
    top: 0;
    border-radius: 50%;
    transform: translate3d(-50%, -80%, 0);
    background: var(--color-sunce);
    transition: transform 600ms ease;
}

.state--nav-active .nav__sunce {
    transform: translate3d(-50%, -50%, 0);
}

.nav__logo {
    position: absolute;
    bottom: var(--page-padding);
    left: 50%;
    transform: translate3d(-50%,0,0);
}

.nav__trigger {
    position: absolute;
    top: 11px;
    left: 50%;
    padding: 6px 20px 5px;
    font-size: var(--font-size-s);
    border: 1px solid var(--color-white);
    border-radius: 50%;
    color: var(--color-white);
    text-decoration: none;
    z-index: 1;
    background-color: var(--color-black);
    transform: translate3d(-50%,0,0) scale(1);
    transition: transform 200ms ease;
}

.state--nav-active .nav__trigger {
    transform: translate3d(-50%,0,0) scale(0);
}


.nav__close {
    display: block;
    border: 1px solid var(--color-white);
    background-color: var(--color-black);
    width: 31px;
    height: 31px;
    position: absolute;
    top: -5px;
    left: 48%;
    margin: 15px 10px 5px;
    border-radius: 50%;
    z-index: 1;
    transform: translate3d(-50%,0,0) scale(0);
    transition: transform 200ms ease;
}

.state--nav-active .nav__close {
    transform: translate3d(-50%,0,0) scale(1);
}

.nav__close::after,
.nav__close::before {
    content: '';
    display: block;
    width: 17px;
    height: 1px;
    position: absolute;
    top: 14px;
    left: 6px;
    background-color: var(--color-white);
}

.nav__close::before {
    transform: rotate(45deg);
}

.nav__close::after {
    transform: rotate(-45deg);
}

.nav__list {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--vh-100);
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease 200ms;
}

.state--nav-active .nav__list {
    pointer-events: auto;
    opacity: 1;
    transition: opacity 400ms ease;
}

.nav__link {
    display: inline-block;
    background-color: var(--color-white);
    padding: 2rem 5rem;
    border-radius: 0 9999px 9099px 0;
    margin-bottom: 2rem;
    font-size: var(--font-size-m);
    text-decoration: none;
    text-align: center;
    align-self: flex-start;
    color: var(--color-black);
    transform: translate3d(-100%,0,0);
    transition: background-color 100ms ease, transform 200ms ease;
}

.nav__link:active {
    background-color: var(--color-gray);
}

.nav__item:nth-child(2n + 1) {
    align-self: flex-end;
}

.nav__item:nth-child(2n + 1) .nav__link {
    border-radius: 9999px 0 0 9999px;
    transform: translate3d(100%,0,0);
}

.state--nav-active .nav__link,
.state--nav-active .nav__item:nth-child(2n + 1) .nav__link {
    transform: translate3d(0,0,0);
    transition: background-color 100ms ease, transform 300ms ease 200ms;
}

/* Home */

.home {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    opacity: 1;
    transform: scale(2.5);
    transition: opacity 1ms ease, transform 1000ms cubic-bezier(.14,.78,.18,.93);
}

.state--loaded .home {
    transform: scale(1);
}

.state--home-active .home {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1ms ease 500ms;
}

.home__background {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: var(--sat);
    width: 100%;
    height: calc(100% - var(--sat));

    --intro-scroll-percentage: 0
}

.home__background::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(-1 * var(--sat));
    z-index: 2;
    width: calc(300vw + 10px);
    height: calc(51px + var(--sat));
    background-color: var(--color-black);
}

.home__background-inner {
    height: 100%;
    width: calc(300vw + 10px);
    z-index: 1;
    display: flex;
    align-items: flex-end;
    position: relative;
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
}

.home__clouds {
    pointer-events: none;
    position: absolute;
    width: 75%;
    top: 0;
    left: 0;
    height: 100%;
}
  
.home__cloud {
    position: absolute;
    cursor: pointer;
}

.home__cloud-inner {
    height: 40px;
    width: 300px;
    background-color: var(--color-white);
    border-radius: 150px;
    transform: scale(1);
    transition: width 200ms ease, height 200ms ease;
}
  
.home__window {
    position: relative;
    z-index: 1;
    flex: 0 0 calc(100vw + 20px);
    border-left: 20px solid var(--color-black);
    border-right: 40px solid var(--color-black);
    height: calc(var(--vh-100) - 50px - var(--sat));
    margin-left: -10px;
}

.home__window::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 12px);
    margin-left: -6px;
    margin-top: -5px;
    height: 100%;
    background-image: url(/images/window-top.svg);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 2;
}

.home__window:nth-child(2) {
    border-left: 20px solid var(--color-black);
    margin-left: 0;
}

.home__sunce {
    position: absolute;
    width: 280px;
    height: 280px;
    left: 50vw;
    top: 0;
    transform: translate3d(-50%, -30rem, 0);
    transition: transform 1000ms cubic-bezier(.34,.63,.24,.86);
}

.state--loaded .home__sunce {
    transform: translate3d(-50%, -4rem, 0);
}

.home__sunce-inner {
    background: var(--color-sunce);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: translate3d(0,calc(var(--intro-scroll-percentage) * -200px),0);
}

.home__title {
    font-size: 1.25rem;
    max-width: 200px;
    color: var(--color-white);
}

.home__image-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translate3d(0,100%,0);
    transition: transform 1000ms cubic-bezier(.34,.63,.24,.86);
}

.state--loaded .home__image-wrapper {
    transform: translate3d(0,0,0);
}

.home__image {
    width: 110%;
    margin-bottom: -10px;
    transform: translate3d(-5%,calc(var(--intro-scroll-percentage) * 60px),0);
}

.home__image-spacer {
    background-color: var(--color-black);
    width: 110%;
    transform: translate3d(-5%,calc(var(--intro-scroll-percentage) * 60px),0);
    height: 100px;
}

.home__content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: calc(var(--page-padding) + var(--sab));
}

.home__cards {
    position: relative;
    z-index: 1;
    padding-top: calc(3rem + var(--sat));
    display: flex;
    transform: translate3d(0,0,0);
}

.home__card-spacer {
    flex: 0 0 90vw;
}

.home__card-wrapper {
    padding: 0 var(--page-padding) 1rem;
    flex: 0 0 100vw;
    margin-right: 15vw;
    height: calc(calc(var(--vh-100) * 0.9) - var(--sat));
}

.home__card-wrapper:last-child {
    margin-right: 0;
}

.home__card-inner {
    height: 100%;
    padding: 2rem 0;
}

.home__card {
    display: block;
    height: 100%;
    background-color: var(--color-white);
    padding: var(--page-padding);
    border-radius: 5px;
    text-decoration: none;
    color: var(--color-black);
    transform: rotate(10deg);
    transition: background-color 100ms ease;
}

.state--card-transition .home__card {
    transition: background-color 100ms ease, transform 300ms ease;
}

.state--card-transition.state--card-active .home__card {
    transition: background-color 100ms ease, transform 500ms cubic-bezier(.3,-0.2,.9,.42);
}

.state--card-active .home__card {
    transform: scale(4.6) rotate(0)!important;
}

.home__card:active {
    background-color: var(--color-gray);
}

.home__card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 200ms ease;
}

.state--card-active .home__card-content {
    opacity: 0;
    transition: opacity 200ms ease 300ms;
}

.home__card-title {
    font-size: var(--font-size-l);
}

.home__card-thumbnail-wrapper {
    flex: 1;
    padding: 1rem 0;
    position: relative;
}

.home__card-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

.home__card-footer {
    display: flex;
    justify-content: space-between;
    --progress-color: #000;
}

.home__card-progress-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.home__card-progress {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-black);
    opacity: 0.1;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.home__card-progress.state--progress-start {
    display: flex;
}

.home__card-progress.state--progress-done {
    background-color: var(--progress-color);
    opacity: 1;
}

.home__card-progress-icon {
    width: 70%;
    height: 60%;
}

/* Tour */

.tour {
    --tour-accent-color: #e94445;
    --tour-background-color: #000;
    --tour-invert-color: #ffffff;

    --tour-background-image: none;

    --tour-border-color: #ffffff;
    --tour-border-image: none;

    --back-section-delay: 0;

    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--tour-background-color);
    background-image: var(--tour-background-image);
    background-size: cover;
    padding-top: var(--sat);
    opacity: 0;
    transition: opacity 200ms ease 100ms;
}

.state--active-tour.tour {
    opacity: 1;
    transition: opacity 200ms ease 150ms;
}

.tour__content {
    position: relative;
    flex: 1;
    transform: translate3d(0,-100%,0);
    transition: transform 400ms ease;
}

.state--active-tour .tour__content {
    transform: translate3d(0,0,0);
}

.tour__footer {
    padding: 0 10px;
    overflow: hidden;
    transform: translate3d(0,100%,0);
    transition: transform 300ms ease 150ms;
}

.state--active-tour .tour__footer {
    transform: translate3d(0,0,0);
}

.tour__nav {
    background-color: var(--color-white);
    border-radius: 5px;
}

.tour__nav-pagination {
    flex: 1;
    transform: translate3d(0,0,0);
    transition: transform 200ms ease;
}

.state--tour-down .tour__nav-pagination {
    transform: translate3d(0,100%,0);
}

.tour__nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.tour__nav-item {
    --transition-delay: 0ms;

    display: block;
    transform: translate3d(0,120%,0) scale(0.7);
    transition: transform 250ms cubic-bezier(.17,.27,.3,1.4) var(--transition-delay);
}

.state--active-tour .tour__nav-item {
    transform: translate3d(0,0,0) scale(1);
}

.tour__nav-item:nth-child(1) {
    --transition-delay: 250ms;
}

.tour__nav-item:nth-child(2) {
    --transition-delay: 100ms;
}

.tour__nav-item:nth-child(3) {
    --transition-delay: 300ms;
}

.tour__nav-item:nth-child(4) {
    --transition-delay: 200ms;
}

.tour__nav-link {
    display: block;
    padding: 4px;
    text-align: center;
    font-size: var(--font-size-xxs);
    position: relative;
    width: 50px;
    height: 50px;
    transition: color 100ms ease;
}

.tour__nav-icon {
    display: block;
    fill: var(--color-black);
    position: absolute;
    left: 3px;
    top: 3px;
    width: 40px;
    height: 46px;
    transition: transform 100ms ease;
}

.state--nav-active .tour__nav-icon {
    transform: scale(0);
}

.tour__nav-icon-close {
    transform: scale(0);
    transition: transform 100ms ease;
}

.state--nav-active .tour__nav-icon-close {
    transform: scale(1) translate3d(-50%,-50%,0);
}

.tour__nav-icon-close {
    display: block;
    border: 1px solid var(--color-black);
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: scale(0) translate3d(-50%,-50%,0);
    transition: transform 100ms ease;
}

.tour__nav-icon-close::after,
.tour__nav-icon-close::before {
    content: '';
    display: block;
    width: 14px;
    height: 1px;
    position: absolute;
    top: 12px;
    left: 5px;
    background-color: var(--color-black);
}

.tour__nav-icon-close::before {
    transform: rotate(45deg);
}

.tour__nav-icon-close::after {
    transform: rotate(-45deg);
}

.tour__nav-icon-guide {
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    transform: scale(1);
    transition: transform 100ms ease;
}

.state--nav-active .tour__nav-icon-guide {
    transform: scale(0);
}

.state--nav-notification .tour__nav-icon-guide {
    animation: wiggle 1s ease 1s;
}

.state--nav-active.state--nav-notification .tour__nav-icon-guide {
    animation: none;
}

@keyframes wiggle {
    0% {
        transform: rotate(0)  scale(1);
    }
    25% {
        transform: rotate(-4deg)  scale(1);
    }
    50% {
        transform: rotate(4deg)  scale(1.3);
    }
    75% {
        transform: rotate(-4deg)  scale(1);
    }
    100% {
        transform: rotate(0)  scale(1);
    }
}

.tour__nav-guide-bubble {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 200ms cubic-bezier(.45,.61,.31,1.3);
}

.state--nav-notification .tour__nav-guide-bubble {
    transform: scale(1);
}

.tour__reveal-next {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 100%;
    background: var(--tour-accent-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-m);
    transform: translate3d(0,100%,0);
    text-decoration: none;
    transition: transform 200ms ease;
}

.state--footer-reveal .tour__reveal-next {
    transform: translate3d(0,0,0);
}

/* Tour Slider */

.tour__slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-bottom: 2rem;
}

.state--active-tour .tour__slider {
    transform: translate3d(0,0,0);
}

.state--tour-down .tour__slider {
    pointer-events: none;
}

.tour__close {
    display: block;
    position: relative;
    margin: 15px 10px 0px;
    transform: translate3d(0,0,0);
    transition: transform 300ms ease;
}

.state--tour-down .tour__close {
    transform: translate3d(0,calc(-200% - var(--sat)),0);
}

.tour__slider-inner {
    height: 100%;
    transform: translate3d(0,0,0);
    transition: transform 300ms ease;
}

.state--tour-down .tour__slider-inner {
    transform: translate3d(0, 120%,0);
}

.tour__slider-container {
    z-index: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.tour__slider-wrapper {
    flex: 1;
}

.tour__slider-pagination {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-pagination-bullet {
    border: 2px solid var(--color-black);
    border-radius: 50%;
    background-color: transparent;
    width: 4px;
    height: 4px;
    margin: 0 3px;
    opacity: 1;
    transition: width 100ms ease, height 100ms ease;
}

.swiper-pagination-bullet-active {
    border: 1px solid var(--color-black);
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.tour__slider-slide {
    padding: 10px;
    perspective: 1000px;
}

.tour__card,
.tour__card-flip {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 8px;
    background-size: cover;
    transform: rotateY(0);
    background-color: var(--tour-border-color);
    background-image: var(--tour-border-image);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 300ms ease;
}

.tour__card {
    position: relative;
}

.state--card-flip .tour__card {
    transform: rotateY(180deg);
    pointer-events: none;
}

.tour__card-flip {
    transform: rotateY(180deg);
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    pointer-events: none;
}

.state--card-flip .tour__card-flip {
    transform: rotateY(360deg);
    pointer-events: auto;
}

.tour__card .button {
    margin-bottom: 10px;
    border: 2px solid var(--tour-accent-color);
    background-color: var(--tour-accent-color);
}

.tour__card .button--inverted {
    margin-bottom: 10px;
    background-color: transparent;
    border: 2px solid var(--color-black);
}

.tour__card .button:last-child {
    margin-bottom: 0;
}

.tour__card-inactive-overlay {
    display: none;   
}

.state--card-disabled .tour__card-inactive-overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 5px;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tour__card-inactive-image {
    display: block;
    width: 50%;
    margin: 0 auto 2rem;
}

.tour__card-inactive-bubble {
    background-color: var(--color-gray);
}

.tour__card-inactive-bubble::after {
    border-color: transparent transparent var(--color-gray) transparent;
}

.tour__card-text {
    font-size: var(--font-size-m);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.tour__card-fact-item {
    display: block;
    font-size: var(--font-size-m);
    border-bottom: 2px solid var(--color-black);
    padding: 5px 0;
}

.tour__card-fact-item:first-child {
    border-top: 2px solid var(--color-black);
}

.tour__card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.state--active-card .tour__card-inner {
    overflow: hidden;
}

.tour__card-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
}

.state--active-card .tour__card-top {
    overflow: visible;
}

.tour__card-flip .tour__card-top {
    overflow: hidden;
    position: relative;
    padding: 10px 10px 0;
}


.tour__card-scrolling {
    flex: 1;
    overflow: auto;
}

.state--overflow.tour__card-scrolling::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.tour__card-scrolling-inner {
    padding-bottom: 20px;
}

.tour__card-title-wrapper {
    position: relative;
    width: 80%;
}

.tour__card-title {
    font-size: var(--font-size-l);
    margin-bottom: 1rem;
}

.tour__card-title--hidden {
    transform: translate3d(0, 0, 0);
    transition: transform 200ms ease;
}

.state--active-card .tour__card-title--hidden {
    transform: translate3d(0, -120%, 0);
}

.tour__card-title--visible {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, -120%, 0);
    transition: transform 500ms ease 2200ms;
    font-size: var(--font-size-l);
}

.state--active-card .tour__card-title--visible {
    transform: translate3d(0, 0, 0);
}

.tour__card-count {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 4px 15px;
    font-size: var(--font-size-xxs);
    border: 1px solid var(--color-black);
    background-color: var(--color-white);
    border-radius: 50%;
}

.tour__card-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour__card-image-inner {
    height: 100%;
    width: 100%;
}

.tour__card-image-blobbs {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 200ms ease 200ms;
}

.state--blobb .tour__card-image-blobbs {
    opacity: 1;
}

.tour__card-image-blobb {
  display: block;
  border-radius: 50%;
  background-color: var(--color-yellow);
  transform: translate(-50%,-50%) translate3d(0, 0, 0) scale(1);
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 1;
  visibility: hidden;
  transition: transform 2500ms cubic-bezier(.25,1,.95,.99) 200ms, opacity 500ms ease 2200ms;
}

.state--blobb .tour__card-image-blobb {
    visibility: visible;
    opacity: 0;
}

.tour__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    left: 0;
    top: 0;
}

.tour__card-image-hidden {
    transform: scale(1);
    transition: transform 200ms cubic-bezier(.95,.42,.75,.65);
}

.state--blobb .tour__card-image-hidden {
    transform: scale(0);
}

.tour__card-image-visible {
    transform: scale(0);
    transition: transform 2200ms cubic-bezier(.25,1,.95,.99) 300ms;
}

.state--blobb .tour__card-image-visible {
    transform: scale(1);
}

.tour__card-congrats-text {
    position: absolute;
    left: 50%;
    bottom: 6rem;
    width: 90%;
    text-align: center;
    transform: translate3d(-50%,0,0) scale(0.3);
    font-size: var(--font-size-l);
    opacity: 0;
}

@keyframes congrats-text {
    0% {
        opacity: 0;
        transform: translate3d(-50%,0,0) scale(0);
    }
    10% {
        opacity: 1;
        transform: translate3d(-50%,0,0) scale(0.7);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(-50%,0,0) scale(1);
    }
}

.state--active-card:not(.state--no-transition) .tour__card-congrats-text {
    animation: congrats-text 2000ms cubic-bezier(.25,1,.95,.99) 300ms;
}

.tour__card-code {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--color-gray);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    transition: transform 200ms ease;
}

.state--active-card .tour__card-code {
    transform: translate3d(0, 100%, 0);
}

.tour__card-input-wrapper {
    height: 100%;
    position: relative;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.tour__card-input-wrapper.state--bubble-error {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.tour__card-input {
    display: block;
    height: 100%;
    background-color: transparent;
    -webkit-appearance: none;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 20px);
    height: 100%;
    font-family: "Theinhardt";
    font-size: var(--font-size-m);
    padding: 0 0 0 11px;
    letter-spacing: 29.3px;
    font-variant-numeric: tabular-nums;
    caret-color: var(--tour-accent-color);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.tour__card-input.state--input-full {
    caret-color: transparent;
}

.tour__card-input-bubbles {
    height: 100%;
    display: flex;
}

.tour__card-input-bubble {
    display: inline-block;
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    height: 100%;
    width: 30px;
    border-radius: 5px;
    margin-right: 9px;
}

.tour__card-input-bubble:last-child {
    margin-right: 0;
}

.state--focused .tour__card-input-bubble.state--bubble-active {
    border: 1px solid var(--color-black);
}

.state--bubble-error .tour__card-input-bubble {
    border: 1px solid var(--color-red);
}

.tour__card-footer {
    padding: 60px 10px 10px;
    overflow: hidden;
    pointer-events: none;
}

.tour__card-flip .tour__card-footer {
    pointer-events: auto;
    padding: 10px;
}

.tour__card--intro .tour__card-footer {
    pointer-events: auto;
}

.tour__card-footer-inner {
    pointer-events: auto;
    transform: translate3d(0,200%,0);
    transition: transform 500ms ease 2100ms;
}

.tour__card:not(.state--card-flip) .tour__card-footer-inner {
    pointer-events: hidden;
}

.state--active-card .tour__card-footer-inner {
    transform: translate3d(0,0,0);
}

.tour__card-footer-facts {
    margin-bottom: 10px;
    font-size: var(--font-size-s);
    display: block;
    width: 90%;
}

.tour__card-footer-catalog {
    font-size: var(--font-size-xs);
    position: absolute;
    right: 0;
    bottom: 3.7rem;
    transform: rotate(-90deg) translate(40px, 45px);
    width: 96px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.tour__card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 5px 0;
    border-top: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
}

.tour__card-avatar {
    flex: 1;
    position: relative;
    margin-bottom: 1rem;
}

.tour__card-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    left: 0;
    top: 0;
}

.tour__card--intro .tour__card-footer {
    padding: 10px;
}

/* Tour Guide */
.tour__guide {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    opacity: 0;
    display: flex;
    flex-direction: column;
    transform: translate3d(0,20px,0);
    transition: opacity 150ms ease, transform 150ms ease;
}

.state--active-back-section.tour__guide {
    pointer-events: auto;
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity 300ms ease, transform 300ms ease;
}

.tour__guide-title {
    color: var(--color-white);
    font-size: var(--font-size-l);
}

.tour__guide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.tour__guide-image {
    display: block;
    width: 70%;
    margin-bottom: 2rem;
}

.tour__guide-text {
    font-size: var(--font-size-m);
}

/* Tour Map */

.tour__map {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    opacity: 0;
    display: flex;
    flex-direction: column;
    transform: translate3d(0,20px,0);
    transition: opacity 150ms ease, transform 150ms ease ;
}

.state--active-back-section.tour__map {
    pointer-events: auto;
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity 300ms ease, transform 300ms ease;
}

.tour__map-title {
    color: var(--color-white);
    font-size: var(--font-size-l);
}

.tour__map-image-wrapper {
    flex: 1;
    position: relative;
}

.tour__map-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    left: 0;
    top: 0;
}

.tour__slide-last {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.tour__slide-last-text {
    font-size: var(--font-size-m);
}

.tour__slide-last-text p {
    margin-bottom: 1rem;
}

/* Tour Modal */

.tour__modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.tour__modal.state--active-modal {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 200ms ease;
}

.tour__modal-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 50px);
    transform: translate3d(-50%,calc(-70% + 50px),0);
    background-color: var(--color-white);
    padding: 1rem;
    border-radius: 5px;
    transition: transform 200ms ease;
}

.state--active-modal .tour__modal-inner {
    transform: translate3d(-50%,-70%,0);
}

.tour__modal-title {
    font-size: var(--font-size-l);
    margin-bottom: 1rem;
}

.tour__modal-text {
    margin-bottom: 2rem;
}

.tour__modal .button {
    margin-bottom: 10px;
    border: 2px solid var(--tour-accent-color);
    background-color: var(--tour-accent-color);
}

.tour__modal .button--inverted {
    margin-bottom: 10px;
    background-color: transparent;
    border: 2px solid var(--color-black);
}

.tour__modal .button:last-child {
    margin-bottom: 0;
}

/* Install Overlay */
.install {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: calc(var(--page-padding) + var(--sat)) var(--page-padding) calc(var(--page-padding) + var(--sab));
    z-index: 4;
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
    flex-direction: column;
    justify-content: space-between;
    display: none;
}

.install.state--install-visible {
    display: flex;
}

.install.state--install-hide {
    display: none;
}

.install__title {
    font-size: var(--font-size-l);
    margin-bottom: 1.25rem;
    width: 75%;
    color: var(--color-theme-invert);
}

.install__content {
    margin-top: -60px;
}

.install__icon {
    width: 150px;
    margin: 0 auto 2rem;
    display: block;
}

.install__text-wrapper {
    position: relative;
}

.install__text {
    width: 100%;
    overflow: hidden;
    font-size: var(--font-size-m);
    color: var(--color-theme-invert);
    padding: 10px 0;
    border-top: 2px solid var(--color-theme-invert);
    border-bottom: 2px solid var(--color-theme-invert);
}

.install__text--active {
    opacity: 1;
    transition: transform 200ms ease, opacity 200ms ease;
}

.state--install-done .install__text--active {
    opacity: 0;
    transform: translate3d(-30px, -50%,0);
}

.install__text--done {
    opacity: 0;
    transform: translate3d(20px,-50%,0);
    transition: transform 200ms ease, opacity 200ms ease;
}

.state--install-done .install__text--done {
    opacity: 1;
    transform: translate3d(0,-50%,0);
}

.install__text--ios {
    line-height: 1.5;
}

.install__text img {
    width: 28px;
    vertical-align: bottom;
}

.install__button {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: transform 200ms ease, opacity 200ms ease;
}

.state--install-done .install__button {
    opacity: 0;
    transform: translate3d(-30px, 0,0);
}

.install__skip {
    text-align: center;
    font-size: var(--font-size-m);
    margin-top: 1rem;
    display: block;
    text-decoration: none;
    color: var(--color-black);
}


/* Tutorial */

.tutorial {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: calc(var(--page-padding) + var(--sat)) var(--page-padding) calc(var(--page-padding) + var(--sab));
    z-index: 2;
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
    display: flex;
    flex-direction: column;
    transform: translate3d(0,0,0);
    opacity: 1;
    transition: transform 300ms ease;
}

.tutorial.state--tutorial-finished {
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease 400ms, transform 300ms ease;
}

.tutorial.state--tutorial-transform {
    transform: translate3d(0,0,0);
    opacity: 1;
    padding-top: calc(4rem + var(--sat));
    transition: none;
}

.tutorial.state--tutorial-finished.state--tutorial-transform {
    transform: translate3d(0,100%,0);
}

.tutorial__title {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    width: 75%;
    color: var(--color-theme-invert);
}

.state--tutorial-finished .tutorial__title {
    transform: translate3d(0, -50px, 0);
    opacity: 0;
    transition: transform 300ms ease, opacity 300ms ease;
}

.tutorial__content {
    flex: 1;
    position: relative;
}

.state--tutorial-finished .tutorial__content {
    transform: translate3d(0, -50px, 0);
    opacity: 0;
    transition: transform 300ms ease 50ms, opacity 300ms ease 50ms;
}

.tutorial__slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.tutorial__slide.state--active-slide {
    pointer-events: auto;
}

.state--tutorial-finished .tutorial__slide.state--active-slide {
    pointer-events: none;
}

.tutorial__image-wrapper {
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 1.25rem;
    background-color: var(--color-white);
    opacity: 0;
    transform: translate3d(80px,0,0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.state--active-slide .tutorial__image-wrapper {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity 300ms ease 200ms, transform 300ms ease 200ms;
}

.state--slide-left .tutorial__image-wrapper {
    opacity: 0;
    transform: translate3d(-80px,0,0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.tutorial__image {
    display: block;
    width: 100%;
}

.tutorial__text-wrapper { 
    flex: 1;
}

.tutorial__text {
    padding: 10px 0;
    border-top: 2px solid var(--color-theme-invert);
    border-bottom: 2px solid var(--color-theme-invert);
    color: var(--color-theme-invert);
    font-size: var(--font-size-m);
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translate3d(80px,0,0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.state--active-slide .tutorial__text {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity 300ms ease 300ms, transform 300ms ease 300ms;
}

.state--slide-left .tutorial__text {
    opacity: 0;
    transform: translate3d(-80px,0,0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.tutorial__footer {
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    transform: translate3d(80px,0,0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.state--active-slide .tutorial__footer {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity 300ms ease 350ms, transform 300ms ease 350ms;
}

.state--slide-left .tutorial__footer {
    opacity: 0;
    transform: translate3d(-80px,0,0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.tutorial__footer .button {
    flex: 1;
    background-color: var(--color-black);
    border: 2px solid var(--color-black);
}

.tutorial__back-link {
    border: 2px solid var(--color-theme-invert);
    width: 47px;
    border-radius: 5px;
    margin-right: 5px;
    position: relative;
}

.tutorial__back-link::after {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8px 5px 0;
    border-color: transparent var(--color-theme-invert) transparent transparent;
}

.tutorial__skip-link {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
    color: var(--color-theme-invert);
}

.state--tutorial-transform .tutorial__skip-link {
    display: none;
}

.tutorial__intro {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: calc(var(--page-padding) + var(--sat)) var(--page-padding) calc(var(--page-padding) + var(--sab));
    z-index: 1;
    background: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%);
    display: flex;
    flex-direction: column;
    transform: translate3d(0,0,0);
    opacity: 1;
    transition: opacity 500ms ease 300ms;
}

.state--tutorial-intro-hidden.tutorial__intro {
    opacity: 0;
}

.tutorial__intro-logo {
    margin-bottom: 1.5rem;
    transform: translate3d(0,0,0);
    opacity: 1;
    transition: transform 300ms ease, opacity 300ms ease;
}

.state--tutorial-intro-hidden .tutorial__intro-logo {
    opacity: 0;
    transform: translate3d(-150px,0,0);
}

.tutorial__intro-logo svg {
    width: 75%;
}

.tutorial__intro-logo path {
    fill: var(--color-theme-invert);
}

.tutorial__intro-sunce-wrapper {
    flex: 1;
    position: relative;
    z-index: -1;
    margin-bottom: 1.5rem;
    transform: translate3d(0,0,0);
    opacity: 1;
    transition: transform 300ms ease 50ms, opacity 300ms ease 50ms;
}

.state--tutorial-intro-hidden .tutorial__intro-sunce-wrapper {
    opacity: 0;
    transform: translate3d(-150px,0,0);
}

.tutorial__intro-sunce {
    width: calc(100vw - 40px);
    height: calc(100vw - 40px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,50%,0);
    border-radius: 50%;
    background-color: var(--color-sunce);
    opacity: 0;
    transition: transform 2500ms ease, opacity 500ms ease;
}

.state--tutorial-intro-sunce .tutorial__intro-sunce {
    transform: translate3d(-50%,-50%,0);
    opacity: 1;
}

.tutorial__intro-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    transform: translate3d(0,0,0);
    opacity: 1;
    transition: transform 300ms ease 100ms, opacity 300ms ease 100ms;
}

.state--tutorial-intro-hidden .tutorial__intro-footer {
    opacity: 0;
    transform: translate3d(-150px,0,0);
}


.tutorial__intro-title {
    font-size: 1.25rem;
    max-width: 180px;
    color: var(--color-theme-invert);
}

.tutorial__intro-link {
    width: 100%;
    margin-top: 1rem;
    background-color: var(--color-black);
    border-color: var(--color-black);
}

/* About */
.about {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: calc(4rem + var(--sat)) var(--page-padding) calc(var(--page-padding) + var(--sab));
    z-index: 2;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    transform: translate3d(0,0,0);
    opacity: 0;
    pointer-events: none;
    font-size: var(--font-size-m);
    line-height: 1.4;
}

.state--about-visible.about {
    opacity: 1;
    pointer-events: auto;
}

.about__title {
    padding: 5px 0;
    color: var(--color-white);
    border-top: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    margin-bottom: 10px;
}

.about__text {
    padding: 5px 0;
    color: var(--color-white);
    margin-bottom: 1.25rem;
}

.about__text a {
    color: var(--color-white);
    text-decoration: underline;
}

.about__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--page-padding) var(--page-padding) calc(var(--page-padding) + var(--sab));
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}