@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/Unbounded/Unbounded-VariableFont_wght.ttf) format("truetype");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    box-sizing: border-box;
    font-family: "Unbounded", sans-serif;
    padding: 0;
    margin: 0;
}

html {
    font-size: 2vmin;
}

:root {
    --quirky-skate-width: calc(16rem * 2);
    --quirky-skate-height: calc(22rem * 2);
    --quirky-wheel-size: calc(var(--quirky-skate-width) * 0.25);
    --skate-rotation: 0deg;
    --skate-transform-x: 0%;
    --skate-transform-y: 0%;
    --skate-opacity: 1;
    --skate-left: 50%;
    --background-color: rgb(255, 0, 255);
    --skate-scale: 1;

    --face-1-eyes-scale: 1;
    --face-1-eyes-rotation: -60;
    --face-1-eyes-skew-x: 0deg;
    --face-1-eyes-skew-y: 0deg;
    --face-1-mouth-translate-x: -300%;
    --face-1-mouth-scale: 1;
    --face-1-rotation: -20deg;

    --face-2-eyes-scale: 1;
    --face-2-eyes-rotation: -60;
    --face-2-eyes-skew-x: 0deg;
    --face-2-eyes-skew-y: 0deg;
    --face-2-mouth-translate-x: -300%;
    --face-2-mouth-scale: 1;
    --face-2-rotation: -20deg;
}

body {
    margin: 0;
    background-color: var(--background-color);
    overflow-x: hidden;
}

/* -------- Lenis -------- */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* -------- Lenis -------- */

.section-half-width {
    width: 50%;
}

.section-right {
    margin-left: 50%;
}

.section-m {
    height: 150vmin;
}

.section-l {
    height: 100vmin;
}

.section-xl {
    height: 400vmin;
}

section {
    position: relative;
}

#quirky {
    top: 0;
    height: 100vh;
}

.title-slogan {
    font-size: 10rem;
    line-height: 12rem;
    width: 100%;
    text-align: center;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slogan-small {
    font-size: 5rem;
    line-height: 6rem;
    text-align: center;
    padding: 2rem;
}

#quirky-slogan {
    color: yellow;
    mix-blend-mode: plus-lighter;
    z-index: 11;
}

#container-quirky {
    position: fixed;
    transform: rotate(var(--skate-rotation)) scale(var(--skate-scale)) translate(var(--skate-transform-x), var(--skate-transform-y));
    left: calc(50% - var(--quirky-skate-width) / 2);
    top: calc(50% - var(--quirky-skate-height) / 2);
    width: var(--quirky-skate-width);
    height: var(--quirky-skate-height);
    margin: 0 auto;
    z-index: 10;
    opacity: var(--skate-opacity);
}

.quirky-wheel {
    width: var(--quirky-wheel-size);
    height: var(--quirky-wheel-size);
    background-color: cyan;
    border-radius: calc(var(--quirky-wheel-size) *0.25);
    position: absolute;
}

.quirky-wheel::before,
.quirky-wheel::after {
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: color;
    animation-name: quirky-wheels;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.quirky-wheel::before {
    background-color: magenta;
}

.quirky-wheel::after {
    background-color: cyan;
    animation-direction: reverse;
}

@keyframes quirky-wheels {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(0, 0.5rem);
    }

    75% {
        transform: translate(0, -0.5rem);
    }

    100% {
        transform: translate(0, 0);
    }
}

.quirky-wheel-top-left {
    top: 1rem;
    left: 0;
}

.quirky-wheel-top-right {
    top: 1rem;
    right: 0;
}

.quirky-wheel-bottom-left {
    top: 35em;
    left: 0;
}

.quirky-wheel-bottom-right {
    top: 35rem;
    right: 0;
}

.quirky-board {
    background-color: cyan;
    width: var(--quirky-skate-width);
    height: var(--quirky-skate-height);
    border-radius: 100% 100% 80% 80%;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: quirky-board;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.quirky-board::before,
.quirky-board::after {
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    top: inherit;
    left: inherit;
    mix-blend-mode: darken;
    animation-name: quirky-board-shift;
    animation-timing-function: linear;
    animation-duration: .5s;
    animation-iteration-count: infinite;
}

.quirky-board::before {
    background-color: magenta;
}

.quirky-board::after {
    background-color: yellow;
    animation-direction: reverse;
}

@keyframes quirky-board-shift {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(.2rem);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-.2rem);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes quirky-board {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    25% {
        transform: rotate(1deg) translateY(0.2rem);
    }

    50% {
        transform: rotate(0deg) translateY(0);
    }

    75% {
        transform: rotate(-1deg) translateY(0.2rem);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}

.quirky-handle {
    background-color: cyan;
    width: calc(var(--quirky-skate-width) * 0.1);
    height: calc(var(--quirky-skate-height) * 0.25);
    border-radius: calc(var(--quirky-skate-width) * 0.1);
    z-index: 10;
    position: absolute;
    top: 42%;
}

.quirky-handle::before,
.quirky-handle::after {
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: darken;
    animation-name: quirky-handle;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.quirky-handle::before {
    background-color: magenta;
}

.quirky-handle::after {
    background-color: yellow;
    animation-direction: reverse;
}

@keyframes quirky-handle {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-.2rem);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(.2rem);
    }

    100% {
        transform: translateY(0);
    }

}

.quirky-handle-left {
    left: calc(var(--quirky-skate-width) * 0.07);
}

.quirky-handle-right {
    right: calc(var(--quirky-skate-width) * 0.07);
}

.quirky-bolts {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.quirky-bolts-top {
    top: 1rem;
}

.quirky-bolts-bottom {
    bottom: 10rem;
}

.quirky-bolt {
    width: 1rem;
    height: 1rem;
    background-color: yellow;
    border-radius: 50%;
    position: absolute;
}

.quirky-bolt-top-left {
    left: -2rem;
    top: 2rem;
}

.quirky-bolt-top-right {
    left: 2rem;
    top: 2rem;
}

.quirky-bolt-bottom-left {
    left: -2rem;
    top: 6rem;
}

.quirky-bolt-bottom-right {
    left: 2rem;
    top: 6rem;
}

/* Timesaver */

#container-timesaver {
    --indicator-width: calc(var(--clock-width) * 0.1);
    --hand-width: calc(var(--clock-width) * 0.05);
    --clock-width: 40rem;
    --duration-hour: 6s;
    --duration-minute: 1s;
    width: var(--clock-width);
    height: var(--clock-width);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
}

#timesaver-slogan {
    z-index: 20;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#timesaver-slogan-container {
    position: relative;
    height: 100%;
}

.clock-container-inner {
    position: relative;
    height: 100%;
}

#small-clock-1 {
    left: 17%;
    top: 15%;
    --duration-hour: 3s;
    --duration-minute: .5s;
}

#small-clock-2 {
    right: 10%;
    top: 60%;
    --duration-hour: 18s;
    --duration-minute: 3s;
}

.container-small-clock {
    --clock-width: 10rem;
    --indicator-width: calc(var(--clock-width) * 0.1);
    --hand-width: calc(var(--clock-width) * 0.05);
    width: var(--clock-width);
    height: var(--clock-width);
    position: absolute;

}

#middle-clock-1 {
    left: 10%;
    bottom: 10%;
    --duration-hour: 1.5s;
    --duration-minute: .25s;
}

#middle-clock-2 {
    right: 10%;
    top: 5%;
    --duration-hour: 9s;
    --duration-minute: 1.5s;
}

.container-middle-clock {
    --clock-width: 15rem;
    --indicator-width: calc(var(--clock-width) * 0.1);
    --hand-width: calc(var(--clock-width) * 0.05);
    width: var(--clock-width);
    height: var(--clock-width);
    position: absolute;
}

#tiny-clock-1 {
    left: 10%;
    top: 2.5%;
    --duration-hour: 12s;
    --duration-minute: 2s;
}

#tiny-clock-2 {
    left: 65%;
    bottom: 2%;
    --duration-hour: 24s;
    --duration-minute: 4s;
}

.container-tiny-clock {
    --clock-width: 7.5rem;
    --indicator-width: calc(var(--clock-width) * 0.1);
    --hand-width: calc(var(--clock-width) * 0.05);
    width: var(--clock-width);
    height: var(--clock-width);
    position: absolute;
}

.clockface {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--clock-width);
    height: var(--clock-width);
    background-image: conic-gradient(from 0deg at 50% 50%, cyan 0%, magenta 33%, violet 66%, cyan 100%);
    border-radius: calc(var(--clock-width) * 0.5);
    z-index: 1;
}

.hour-hand {
    width: var(--hand-width);
    height: calc(var(--clock-width) * 0.3);
    border-radius: calc(var(--hand-width) * 0.5);
    background-color: yellow;
    position: absolute;
    top: calc(var(--clock-width) * 0.2);
    left: 50%;
    z-index: 9;
    mix-blend-mode: luminosity;
    animation-name: rotate-hand;
    animation-duration: var(--duration-hour);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}

.minute-hand {
    width: var(--hand-width);
    height: calc(var(--clock-width) * 0.45);
    border-radius: calc(var(--hand-width) * 0.5);
    background-color: yellow;
    position: absolute;
    top: calc(var(--clock-width) * 0.05);
    left: 50%;
    z-index: 5;
    mix-blend-mode: luminosity;
    animation-name: rotate-hand;
    animation-duration: var(--duration-minute);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}

.indicator {
    width: var(--indicator-width);
    height: var(--indicator-width);
    background-color: beige;
    border-radius: calc(var(--indicator-width) * 0.5);
    position: absolute;
    z-index: 9;
    display: none;
}

.indicator-12-oclock {
    top: calc(var(--clock-width) / 30);
    left: 50%;
    transform: translateX(-50%);
}

.indicator-3-oclock {
    top: 50%;
    right: calc(var(--clock-width) / 30);
    transform: translateY(-50%);
}

.indicator-9-oclock {
    top: 50%;
    left: calc(var(--clock-width) / 30);
    transform: translateY(-50%);
}

.indicator-6-oclock {
    bottom: calc(var(--clock-width) / 30);
    left: 50%;
    transform: translateX(-50%);
}

.center-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
    background-color: cyan;
    filter: blur(1rem);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

@keyframes rotate-hand {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Looks */

#turn-heads,
#snag-smiles,
#spark-whispers {
    color: white;
    font-size: 4rem;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    width: fit-content;
    z-index: 1;
    padding: 2rem;
    background: linear-gradient(magenta 0%, magenta 20%, transparent 90%);
    border-radius: 2rem;
}

#turn-heads {
    left: 30%;
    top: 25%;
}

#snag-smiles {
    left: 50%;
    top: 50%;
}

#spark-whispers {
    left: 70%;
    top: 75%;
}

#face-1 {
    position: absolute;
    top: 5%;
    left: calc(95% - 20rem);
    transform: scale(-1, 1) rotate(var(--face-1-rotation));
    height: 20rem;
    width: 20rem;
    z-index: 1;
    --mouth-scale: var(--face-1-mouth-scale);
    --eyes-scale: var(--face-1-eyes-scale);
    --eyes-rotation: var(--face-1-eyes-rotation);
    --eyes-skew-x: var(--face-1-eyes-skew-x);
    --eyes-skew-y: var(--face-1-eyes-skew-y);
}

#face-2 {
    position: absolute;
    top: 85%;
    left: 5%;
    height: 20rem;
    transform: rotate(var(--face-2-rotation));
    width: 20rem;
    z-index: 1;
    --mouth-scale: var(--face-2-mouth-scale);
    --eyes-scale: var(--face-2-eyes-scale);
    --eyes-rotation: var(--face-2-eyes-rotation);
    --eyes-skew-x: var(--face-2-eyes-skew-x);
    --eyes-skew-y: var(--face-2-eyes-skew-y);
}

.looks-face {
    position: relative;
    width: 100%;
    height: 100%;
}

.looks-face-skin {
    position: absolute;
    width: 14rem;
    height: 14rem;
    background-color: magenta;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -40%);
    border-radius: 50%;
}

.looks-mouth {
    width: 5rem;
    height: 2.5rem;
    border-radius: 5rem;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translateX(-50%) scale(var(--mouth-scale));
    background-color: white;
    transition: all .1s;
    z-index: 1;
}

.looks-mouth-tongue {
    width: 30%;
    height: 30%;
    position: absolute;
    bottom: 10%;
    left: 30%;
    border-radius: 50% 50% 10% 10%;
    background-color: cyan;
}

.looks-eye {
    width: 2.5rem;
    height: 2.2rem;
    background-color: white;
    position: absolute;
    top: 22.5%;
    border-radius: 1.25rem;
    transform-origin: top center;
    transform: scale(var(--eyes-scale), var(--eyes-scale)) rotate(var(--eyes-rotation)) skew(var(--eyes-skew-x), var(--eyes-skew-y));
    transition: transform 0.1s;
    z-index: 1;
}

.looks-eye::before {
    content: "";
    display: inline-block;
    background-color: black;
    border-radius: inherit;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;

}

.looks-eye-left {
    left: 27.5%;
}

.looks-eye-right {
    left: 52.5%;
}

/* Wet */

#lake {
    overflow: hidden;
    height: 100vh;
}

#wave {
    position: relative;
    opacity: 0;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.2rem;
    height: 0.1rem;
    border: #FFF 0.5rem solid;
    border-radius: 15rem / 7.5rem;
}

#wave:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.1rem;
    height: 0.1rem;
    border: #FFF 0.2rem solid;
    border-radius: 5rem / 2.5rem;

}

.wave-animated {
    animation-name: ripple;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1.5s;
}

.wave-animated::after {
    animation-name: ripple-2;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1.5s;
}

@keyframes ripple {
    from {
        opacity: 1;
    }

    to {
        width: 30rem;
        height: 15rem;
        border-width: 1rem;
    }
}

@keyframes ripple-2 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        width: 10rem;
        height: 5rem;
        border-width: 1rem;
    }
}


/* Connect */

#connect-slogan {
    color: yellow;
    z-index: 10;
    font-size: 6rem;
    text-align: center;
    width: 100%;
}

footer {
    text-align: center;
    padding: 1rem 0 1rem 0;
}

.attribution-small {
    font-size: 0.6rem;
}

#attributions-container {
    margin: 1rem auto 0 auto;
    padding: 1rem;
    background-color: #ffff0c;
    mix-blend-mode: lighten;
    color: black;
    width: max-content;
    border-radius: 1rem;
}

#attributions-container a {
    color: magenta;
}

#attributions {
    height: 0;
    opacity: 0;
    transition: all .3s;
    overflow: hidden;
}

.show-attributions {
    height: 2.5rem !important;
    opacity: 1 !important;
}

#attributions-title {
    cursor: pointer;
}

.crow-icon {
    width: 1rem;
    height: 1rem;
}

#attributions-icon {
    display: inline-block;
    transition: all .3s;
    height: 1rem;
}

.rotate-attributions-icon {
    transform: rotate(180deg);
}

.pavement-section {
    display: grid;
}

.pavement-section {
    grid-template-columns: repeat(9, 9vw);
    grid-auto-rows: 9vw;
    gap: 1vw;
    padding-left: 4.5vw;
    padding-right: 4.5vw;
    padding-top: 1vw;
}

.colored-pavement-section :nth-child(-n+9),
.colored-pavement-section :nth-child(-n+226):nth-child(n+216) {
    opacity: 0.2;
}

.colored-pavement-section :nth-child(-n+18):nth-child(n+10),
.colored-pavement-section :nth-child(-n+217):nth-child(n+208) {
    opacity: 0.4;
}

.colored-pavement-section :nth-child(-n+27):nth-child(n+19),
.colored-pavement-section :nth-child(-n+209):nth-child(n+200) {
    opacity: 0.6;
}

.colored-pavement-section-1 :nth-child(-n+36):nth-child(n+28),
.pavement-section-1 :nth-child(-n+199):nth-child(n+190) {
    opacity: 0.8;
}

.colored-pavement-section :nth-child(odd):nth-child(-n+9),
.colored-pavement-section :nth-child(odd):nth-child(n+217) {
    opacity: 0.1 !important;
}

.colored-pavement-section :nth-child(odd) {
    opacity: 0.2 !important;
}

.muted-pavement-section :nth-child(odd).stone {
    opacity: 0.1 !important;
}

.muted-pavement-section :nth-child(even).stone {
    opacity: 0.2 !important;
}

.stone {
    box-shadow: 0 0 0.5rem rgba(90, 90, 90, 0.5);
    background-color: cyan;
    mix-blend-mode: lighten;
    width: 100%;
    height: 100%;
    border-radius: 10%;
}

.rotate-90 {
    transform: rotate(90deg);
}

.chat {
    position: absolute;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem 3.5rem 0 3.5rem;
    font-size: 2rem;
    z-index: 1;
    color: white;
}

.chat::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(images/chat-square.svg) no-repeat center;
    background-size: contain;
}

#nice-ride {
    width: 20rem;
    height: 20rem;
    left: calc(90% - 20rem);
    top: 0%;
}

#nice-ride.chat::after,
#how-to-call.chat::after,
#try-out.chat::after {
    transform: scaleX(-1);
}

#how-to-drive {
    width: 20rem;
    height: 20rem;
    left: 10%;
    top: 15%;
}

#how-to-drive .chat-text {
    transform: translateY(-10%);
}

#how-to-call {
    width: 20rem;
    height: 20rem;
    left: calc(90% - 20rem);
    top: 30%
}

#how-to-call .chat-text,
#hard-to-drive .chat-text,
#nice-ride .chat-text,
#try-out .chat-text,
#never-seen .chat-text {
    transform: translateY(-20%);
}

#hard-to-drive {
    width: 20rem;
    height: 20rem;
    top: 55%;
    left: 10%
}

#try-out {
    width: 20rem;
    height: 20rem;
    top: 70%;
    left: calc(90% - 20rem);
}

#never-seen {
    width: 20rem;
    height: 20rem;
    top: 85%;
    left: 10%
}