:root {
    --white: #fff;
    --black: #000;
    --gray: #666;
    --gray: #555;
    --darkGray: #343434;
    --lightGray: #f7f7f7;
    --border: #ddd;
}

@font-face {
    font-family: "bgp";
    src: url("bgp-light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "bgp";
    src: url("bgp-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "bgp";
    src: url("bgp-bold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

.bold {
    font-weight: 600;
}

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

.long {
    background-color: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

html {
    font-size: clamp(0vh, 2vw, 2vh);
}

html.land-short {
    font-size: clamp(0vh, 2vw, 4vh);
}

html.port {
    font-size: clamp(0vh, 4vw, 1vh);
}

html.port-short {
    font-size: clamp(0vh, 4vw, 2vh);
}

.port .banner {
    font-size: 1.2em;
}

.banner {
    font-family: 'bgp', sans-serif;
    font-weight: 400;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-feature-settings: "kern";
    color: var(--black);
}

.banner, .banner *, .banner:after, .banner:before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.8em;
    padding: 2em;
}

.wrap {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    display: grid;
    position: absolute;
    inset: 0;
}

.bg-s {
    background-color: var(--lightGray);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(95% 0, 100% 0, 100% 100%, 20% 100%);
}

.port .bg-s {
    clip-path: polygon(99% 0, 100% 0, 100% 100%, 1% 100%);
}

.copy {
    align-self: center;
    margin-left: 3.5em;
    translate: 0 -1em;
    z-index: 999;
    transform-origin: 0 0;
}

.land .copy {
    transform: scale(1.2);
}

.port .copy {
    margin-left: 1em;
    translate: 0 -1em;
}

.animate .copy {
    transition: all .5s ease;
}

.land .show-2 .copy,
.land .show-3 .copy {
    transform: scale(.86) translateY(-6.2em);
}

.port .show-2 .copy,
.port .show-3 .copy {
    transform: scale(.9) translateY(-7.6em);
}

.hero {
    position: relative;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.06;
    font-size: 1.85em;
    left: -.05em;
}

.port .hero {
    font-size: 1.8em;
}

.hero::before {
    content: "";
    position: absolute;
    left: -.4em;
    top: -.25em;
    width: .4em;
    height: .4em;
    background-image: url(../assets/x.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    font-size: .65em;
}

.byline {
    line-height: 1.5;
    color: var(--gray);
    text-wrap: pretty;
    font-size: .75em;
    margin-top: 1em;
}

.port .byline {
    font-size: .8em;
    white-space: nowrap;
}

.byline, .btn {
    letter-spacing: .06em;
}

.disc {
    line-height: 1.2;
    letter-spacing: .04em;
    font-size: .32em;
    position: absolute;
    bottom: 0;
    text-wrap: balance;
    text-align: right;
    right: 0;
}

.land .disc {
    max-width: 50%;
    bottom: -3em;
}

.port .disc {
    font-size: .36em;
    padding-left: 4em;
}

.btn {
    font-weight: 400;
    display: inline-block;
    transition: all .25s ease;
    border: 1px solid var(--black);
    color: var(--black);
    padding: .6em 1.6em;
    font-size: .54em;
    margin-top: 2.35em;
    padding: .68em 1.8em;
}

.port .btn {
    margin-top: 2em;
    font-size: .6em;
}

.btn:hover, .btn:focus {
    background-color: var(--black);
    color: var(--white);
}

.logo {
    position: absolute;
    top: 0;
    right: 0;
    width: 9em;
    height: auto;
}

.land .br-p { display: none; }
.port .br-l { display: none; }

.car-wrap {
    width: 37.5em;
    height: auto;
    position: absolute;
    align-self: center;
    justify-self: center;
    margin-top: 5em;
    translate: 120% 0;
}

.port .car-wrap {
    width: 22.2em;
    margin-top: 8em;
}

.animate .car-wrap {
    transition: all 1.1s ease;
    will-change: transform, translate;
}

.show-2 .car-wrap,
.show-3 .car-wrap {
    translate: 6% 0;
}

.port .show-2 .car-wrap,
.port .show-3 .car-wrap {
    translate: 3% 0;
}

.car {
    width: 100%;
    height: auto;
}

.car-2,
.car-3,
.car-4,
.car-5 {
    position: absolute;
    top: 0;
    left: 0;
}

.wheel,
.brake {
    position: absolute;
    width: 15%;
    height: auto;
    left: 9.5%;
    bottom: 5%;
    transform-origin: center;
    transform: rotate(0deg);
    transition: all 1.1s ease;
    will-change: transform;

    bottom: 4.6%;
    width: 15.8%;
    left: 9.1%;

    /* width: 16%;
    left: 9%; */
}

.port .wheel,
.port .brake {
    bottom: 6.5%;

    bottom: 6.1%;
}

.brake-1 {
    transform: scaleX(-1);
}

.wheel-2,
.brake-2 {
    left: 69%;
    left: 68.6%;

    /* left: 68.5%; */
}

.show-2 .wheel,
.show-3 .wheel {
    transform: rotate(-900deg);
}

/**/

.hero,
.byline,
.btn-wrap {
    opacity: 0;
    transform: translateY(50%);
}

.animate .hero,
.animate .byline,
.animate .btn-wrap {
    transition: all .4s ease;
    will-change: opacity, transform;
}

.show-1 .byline {
    transition-delay: .1s;
}

.show-1 .btn-wrap {
    transition-delay: .15s;
}

.show-1 .hero,
.show-1 .byline,
.show-1 .btn-wrap,

.show-1b .hero,
.show-1b .byline,
.show-1b .btn-wrap,

.show-2 .hero,
.show-2 .byline,
.show-2 .btn-wrap,

.show-3 .hero,
.show-3 .byline,
.show-3 .btn-wrap {
    opacity: 1;
    transform: translateY(0);
}

.color-wrap {
    position: absolute;
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: .5em;
    bottom: -1.5em;
    left: 1em;

    opacity: 0;
    transform: translateY(1em);
    transition: all .35s ease;
}

.port .color-wrap {
    bottom: -3.5em;
    left: 2em;
    font-size: 1.1em;
}

.show-2 .color-wrap,
.show-3 .color-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .8s;
}

.color {
    width: 1.2em;
    height: auto;
    transition: all .15s ease;
}

.cw:hover .color {
    filter: brightness(1.1);
}

.cw-1:hover .color {
    filter: brightness(1.04);
}

.cw-5:hover .color {
    filter: brightness(1.2);
}

.cw:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.cw {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    grid-column-gap: .3em;
    border: 1px solid var(--border);
    border-radius: 10em;
    padding: .3em;
    position: relative;
}

.color-label {
    font-size: .5em;
    position: absolute;
    opacity: 0;
    white-space: nowrap;
    left: 3.5em;
    transition: all .2s ease;
}

.animate .cw {
    transition: all .4s ease;
}

.active-1 .cw-1 { padding-right: 3.6em; }
.active-2 .cw-2 { padding-right: 4em; }
.active-3 .cw-3 { padding-right: 3.4em; }
.active-4 .cw-4 { padding-right: 4em; }
.active-5 .cw-5 { padding-right: 4.2em; }

.active-1 .cw-1 .color-label,
.active-2 .cw-2 .color-label,
.active-3 .cw-3 .color-label,
.active-4 .cw-4 .color-label,
.active-5 .cw-5 .color-label {
    opacity: 1;
    transition: all .4s ease .2s;
}

.car {
    opacity: 0;
    transition: opacity .5s ease .2s;
}

.active-1 .car-1,
.active-2 .car-2,
.active-3 .car-3,
.active-4 .car-4,
.active-5 .car-5 {
    opacity: 1;
    transition: opacity .5s ease 0s;
}

.car-wrap {
    pointer-events: none;
}

.color-wrap {
    pointer-events: auto;
}

.exit-wrap {
    position: absolute;
    inset: 0;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}