:root {
    --white: #fff;
    --black: #000;
    --gray: #c5c5c5;
    --grayDark: #262628;
    --bg: #ececec;

    --marginTop: 3em;
    --marginBottom: 2.5em;
    --marginLeft: 5em;
    --marginRight: 10em;

    --radius: .7em;

    --yellow-10: #c28d00;
    --yellow-20: #e5a600;
    --yellow-30: #ffb900;
    --yellow-40: #ffcd00;
    --yellow-50: #ffdc4d;
    --yellow-60: #ffe57a;
    --yellow-70: #ffeb9a;
    --yellow-80: #fff2bd;
    --yellow-90: #fff9e0;
}

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

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

@font-face {
    font-family: "frost";
    src: url("frost-extrabold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "opensans";
    src: url("opensans-bold.woff2") format("woff2");
    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, 1vh);}
html.land-short {font-size: clamp(0vh, 1vw, 2vh);}
html.port {font-size: clamp(0vh, 2vw, .5vh);}
html.port-short {font-size: clamp(0vh, 2vw, 1vh);} */

/*NEW*/
/* html {font-size: clamp(0vh, max(1vw, 17px), min(1vh, 20px));} */
html {font-size: clamp(0vh, max(1vw, 17px), min(1vh, 21px));}
html.land-short {font-size: clamp(0vh, max(1vw, 17px), min(2vh, 21px));} /* NEW */
html.port-short {font-size: clamp(0vh, max(1vw, 17px), min(2vh, 21px));} /* NEW */
@media (max-width: 440px) {
    html.port {font-size: clamp(0vh, 2vw, min(.5vh, 8px));}
    html.port-short {font-size: clamp(0vh, 2vw, min(1vh, 8px));} /* NEW */

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

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

.banner {
    font-family: 'frost', 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";
    display: grid;
}

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

.long {
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;

    display: grid;
}

.port .long {
    background-color: var(--black);
}

.container {
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 980px;
    display: grid;
    width: 100%;
    height: 100%;
    justify-self: center;
    position: relative;
    border-radius: var(--radius);
}

.long .container {
    background-color: var(--yellow-40);
}

.port .container {
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    align-self: center;
}

.bg-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    z-index: 1;
}

.bg-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
}

.logo {
    margin-top: var(--marginTop);
    position: relative;
    width: 10em;
    height: auto;
    justify-self: center;
    z-index: 999;
}

.ct-wrap {
    position: absolute;
    inset: 0;
    display: grid;
}

.ct {
    position: absolute;
    justify-self: center;
    align-self: center;
    transform: scale(.33);
    will-change: transform, opacity;
    opacity: 0;
}

.ct-a { transform: translate(0%, 70%) rotate(30deg) scale(.33); }
.ct-b { transform: rotate(50deg) scale(.33); }
.ct-c { transform: translate(0%, 70%) rotate(-60deg) scale(.33); }

.animate .ct{
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transition: all .6s ease;
}

.item {
    height: auto;
}

.item-a {width: 32em;}
.item-b {width: 28em;}
.item-c {width: 32em;}

.show-2 .ct-a, .show-3 .ct-a { transition-delay: .25s; }
.show-2 .ct-b, .show-3 .ct-b { transition-delay: .3s; }
.show-2 .ct-c, .show-3 .ct-c { transition-delay: .15s; }

.show-2 .ct,
.show-3 .ct {
    opacity: 1;
}

.show-2 .ct-a, .show-3 .ct-a { transform: translate(110%, 100%) scale(1); }
.show-2 .ct-b, .show-3 .ct-b { transform: translate(-118%, 5%) scale(1); }
.show-2 .ct-c, .show-3 .ct-c { transform: translate(90%, -95%) scale(1); }

.port .show-2 .ct-a, .port .show-3 .ct-a { transform: translate(50%, 215%) scale(1.05); }
.port .show-2 .ct-b, .port .show-3 .ct-b { transform: translate(-70%, 10%) scale(1.05); }
.port .show-2 .ct-c, .port .show-3 .ct-c { transform: translate(40%, -150%) scale(1.05); }

/**/

.hexa-bg {
    fill: var(--white);
}

.hexa-copy {
    fill: var(--black);
    opacity: 0;
    transform: translateY(2em);
}

.animate .hexa-copy {
    transition: all .3s ease;
}

.show-2 .hexa-copy,
.show-3 .hexa-copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .25s;
}

.show-2 .hexa-c2,
.show-3 .hexa-c2 {
    transition-delay: .3s;
}

.hexa {
    position: absolute;
    margin-top: calc(var(--marginTop) + 5em);
    width: 26em;
    width: 27em;
    height: auto;
    justify-self: center;
    align-self: center;
    transform: translateY(12em) scale(.4);
    opacity: 0;
}

.port .hexa {
    margin-top: calc(var(--marginTop) + 0em);
}

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

.show-2 .hexa,
.show-3 .hexa {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: .05s;
}

.disc {
    position: absolute;
    justify-self: center;
    align-self: end;
    text-align: center;
    white-space: nowrap;
    margin-bottom: var(--marginBottom);
    font-size: .8em;
    opacity: 0;
}

.animate .disc {
    transition: all .3s ease;
}

.show-2 .disc,
.show-3 .disc {
    opacity: 1;
    transition-delay: .4s;
}

.hero-wrap {
    position: absolute;
    align-self: center;
    justify-self: center;
    text-align: center;
    font-weight: 600;
    margin-top: var(--marginTop);
}

.hero {
    font-size: 7.4em;
    line-height: 1.1;
}

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

.animate .h-1a,
.animate .h-1b {
    transition: all .4s ease;
}

.h-1a,
.h-1b {
    transform: translateX(-1em);
    transform: translateY(1em);
    position: relative;
    display: inline-block;
    opacity: 0;
}

.h-1b-- {
    transform: translateX(1em);
}

.show-1 .h-1a,
.show-1 .h-1b {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .05s;
}

.show-1 .h-1b {
    transition-delay: .1s;
}

/**/

.tp {
    position: relative;
    display: inline-block;
    transform: translateY(.7em);
    opacity: 0;
}

.animate .tp {
    transition: all .275s ease;
}

.show-1 .tp-01 { transition-delay: calc(0.000s + 0s); }
.show-1 .tp-02 { transition-delay: calc(0.025s + 0s); }
.show-1 .tp-03 { transition-delay: calc(0.050s + 0s); }
.show-1 .tp-04 { transition-delay: calc(0.075s + 0s); }
.show-1 .tp-05 { transition-delay: calc(0.100s + 0s); }
.show-1 .tp-06 { transition-delay: calc(0.125s + 0s); }
.show-1 .tp-07 { transition-delay: calc(0.150s + 0s); }
.show-1 .tp-08 { transition-delay: calc(0.175s + 0s); }
.show-1 .tp-09 { transition-delay: calc(0.200s + 0s); }
.show-1 .tp-10 { transition-delay: calc(0.225s + 0s); }
.show-1 .tp-11 { transition-delay: calc(0.250s + 0s); }
.show-1 .tp-12 { transition-delay: calc(0.275s + 0s); }
.show-1 .tp-13 { transition-delay: calc(0.300s + 0s); }
.show-1 .tp-14 { transition-delay: calc(0.325s + 0s); }
.show-1 .tp-15 { transition-delay: calc(0.350s + 0s); }
.show-1 .tp-16 { transition-delay: calc(0.375s + 0s); }
.show-1 .tp-17 { transition-delay: calc(0.400s + 0s); }

.show-1 .tp {
    opacity: 1;
    transform: translateY(0em);
}

/**/

.bg-wrap {
    position: absolute;
    width: 100%;
    height: calc(100% / 3 * 1.75);
    border-radius: var(--radius);
    overflow: hidden;
}

.bg-wrap::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, var(--yellow-40), transparent);
}

.land {
    --bg-size: 34em;
}

.port {
    --bg-size: 28em;
}

/* .bg-repeat {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-15deg);
    width: 200%; height: 200%;
    background-image: url(pattern.svg);
    background-repeat: repeat;
    background-size: var(--bg-size) auto;
    animation: scrollBg 30s linear infinite forwards paused;
}

@keyframes scrollBg {
    from {
        background-position: 0;
    }
    to {
        background-position: var(--bg-size);
    }
} */
 
 .bg-repeat {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-15deg);
    width: 200%; height: 200%;
    background-image: url(pattern.svg), url(pattern.svg);
    background-repeat: repeat;
    background-size: var(--bg-size) auto;
    animation: scrollBg 30s linear infinite forwards paused;
}

@keyframes scrollBg {
    from {
        background-position-x: 0, .3px;
    }
    to {
        background-position-x: var(--bg-size), calc(var(--bg-size) + .3px);
    }
}

.show-1a .bg-repeat,
.show-1 .bg-repeat {
    animation-play-state: running;
}

/**/

.item {
    animation: float 3s ease-in-out infinite alternate paused;
}

.item-b {
    animation-delay: 1s;
}

.item-a {
    animation-name: float-2;
}

.show-2 .item,
.show-3 .item {
    animation-play-state: running;
}

@keyframes float {
	from {
		transform: translateY(0em);
	}
	to {
        transform: translateY(-2em) rotate(5deg);
	}
}

@keyframes float-2 {
	from {
		transform: translateY(0em);
	}
	to {
        transform: translateY(2em) rotate(-5deg);
	}
}