:root {
    --white: #fff;
    --black: #000;

    --marginTop: 5em;
    --marginBottom: 4em;
    --marginLeft: 5em;
    --marginRight: 5em;
}

.port {
    --marginTop: 5em;
    --marginBottom: 5em;
    --marginLeft: 3em;
    --marginRight: 3em;
}

@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;
}

html {font-size: clamp(0vh, 1vw, calc(2vh / 2));}
html.land-short {font-size: clamp(0vh, 1vw, 2vh);}
html.port {font-size: clamp(0vh, 2vw, calc(1vh / 2));}
html.port-short {font-size: clamp(0vh, 2vw, 1vh);}

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

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

.banner {
    font-family: 'bgp', sans-serif;
    font-weight: 400;
    display: grid;
    color: var(--white);
    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";
    user-select: none;
}

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

.box,
.bx,
.box-bg,
.box-copy {
    will-change: transform, opacity;
}

.video {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.land .video {background-image: url(poster-land.jpg?format=avif);}
.port .video {background-image: url(poster-port.jpg?format=avif);}

.tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100%);
}

.bg {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--black);
}

.bg-bottom {
    top: 50%;
}

.logo-wrap {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2em;
    margin: var(--marginTop)
            var(--marginRight)
            var(--marginBottom)
            var(--marginLeft);
}

.port .logo-wrap {
    grid-template-columns: repeat(2, 1fr);
}

.logo {
    width: 100%;
    height: auto;
    grid-area: 1 / 4 / 2 / 5;
    max-height: 3em;
    position: relative;
    object-position: 100% 50%;
    object-fit: contain;
}

.port .logo {
    grid-area: 1 / 2 / 2 / 3;
}

.disc-wrap {
    position: absolute;
    align-self: end;
    text-wrap: pretty;
    margin: var(--marginTop)
            var(--marginRight)
            var(--marginBottom)
            var(--marginLeft);
}

.disc {
    font-size: .6em;
    line-height: 1.15;
}

.land .disc {
    text-wrap: balance;
}

.box-wrap {
    /* position: absolute;
    inset: 0; */
    position: relative;
    display: grid;
    grid-column-gap: 2em;
    grid-row-gap: 2em;
}

.land .box-wrap {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;

    margin: calc(var(--marginTop) + 6.5em)
            var(--marginRight)
            calc(var(--marginBottom) + 5.5em)
            var(--marginLeft);
    max-height: 40em;
    align-self: center;
    height: calc(100vh 
            - var(--marginTop) 
            - var(--marginBottom) 
            - 12em);

    /* max-width: 100em;
    justify-self: center;
    width:  calc(100vw 
            - var(--marginLeft) 
            - var(--marginRight)); */
}

.port .box-wrap {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    margin: calc(var(--marginTop) + 7em)
            var(--marginRight)
            calc(var(--marginBottom) + 8em)
            var(--marginLeft);
    height: calc(100vh 
            - var(--marginTop) 
            - var(--marginBottom) 
            - 15em);
}

.box {
    display: grid;
    position: relative;
}

.bx {
    display: grid;
    border-radius: .2em;
    position: relative;
    overflow: hidden;
    transition: all .4s ease;
}

.box-bg-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.box-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 80%;
    transition: all .4s ease;
}

.box:hover .box-bg {
    transform: scale(1.08);
}

.bx:hover {
    transform: scale(1.05);
}

.port .box.active .box-bg {
    transform: scale(1.08);
}

.port .box.active .bx {
    transform: scale(1.05);
}

.box-bg-1 {background-image: url(img-1.jpg?format=avif);}
.box-bg-2 {background-image: url(img-2.jpg?format=avif);}
.box-bg-3 {background-image: url(img-3.jpg?format=avif);}
.box-bg-4 {background-image: url(img-4.jpg?format=avif);}

.box-copy {
    position: absolute;
    bottom: 0;
    padding: 2em;
    padding-bottom: 2.5em;

    width: 100%;
    text-wrap: balance;
    line-height: 1.25;
    z-index: 1;
}

.box-copy::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: 200%;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
    z-index: -1;
}

.box-hero {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: .5em;
    opacity: .65;
}

.box-byline {
    font-size: 1.7em;
}

.port .box-byline {
    font-size: 1.9em;
}

/**/

.copy-wrap {
    position: absolute;
    align-self: center;
    justify-self: start;
    margin-left: var(--marginLeft);
    margin-bottom: 2em;
    padding-left: 1em;
}

.hero {
    position: relative;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.06;
    font-size: 3.7em;
    white-space: nowrap;
}

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

.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%;
}

.byline {
    font-size: 1.5em;
    line-height: 1.5;
    margin-top: 1.1em;
    text-wrap: pretty;
}

.btn {
    display: inline-block;
    transition: all .25s ease;

    border: 1px solid var(--white);
    color: var(--white);
    font-size: 1.2em;
    margin-top: 2em;
    padding: .6em 1.6em;
}

.port .btn {
    font-size: 1.4em;
}

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

/**/

.show-1 .box-wrap {
    pointer-events: none;
}

.box {
    transform-origin: center;
    transform: translateY(35%);
    opacity: 0
}

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

.show-2 .box,
.show-3 .box {
    transform: translateY(0%);
    opacity: 1
}

.show-2 .box-1 {
    transition-delay: .1s
}

.show-2 .box-3 {
    transition-delay: .15s
}

.show-2 .box-4 {
    transition-delay: .3s
}

/**/

.hero,
.by-1,
.by-2,
.btn-wrap {
    opacity: 0;
    transform: translateY(40%);
    transform: translateY(1em);
}

.by-1,
.by-2,
.btn-wrap {
    transform: translateY(2em);
}

.animate .hero,
.animate .by-1,
.animate .by-2,
.animate .btn-wrap {
    transition: all .35s ease;
}

.show-1 .hero,
.show-1 .by-1,
.show-1 .by-2,
.show-1 .btn-wrap {
    opacity: 1;
    transform: translateY(0%);
}

.show-1 .by-1 {transition-delay: .1s}
.show-1 .by-2 {transition-delay: .2s}
.show-1 .btn-wrap {transition-delay: .3s}

/**/

.exit {
    position: absolute;
    inset: 0;
}