:root {
    --yellow: #ffcd00;
    --white: #fff;
    --black: #000;
    --gray: #c5c5c5;

    --margin: 2em;
}

.port {
    --margin: 3.5em;
}

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

.bold {
    font-weight: 600;
}

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

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

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

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

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

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

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

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

.bg-top {
    top: 0;
}

.bg-middle {
    top: calc(100% / 3);
    background-color: var(--yellow);
}

.bg-bottom {
    top: calc(100% / 3 * 2);
}

.bg-frame {
    width: 100%;
    height: 100%;
}

.logo {
    width: 8em;
    height: auto;
    position: absolute;
    align-self: start;
    justify-self: center;
    margin: var(--margin);
}

.port .logo {
    width: 9em;
    margin: calc(var(--margin) * 1.5);
}

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

.logo-star {
    fill: var(--yellow);
}

.logo-type {
    fill: var(--white);
}

.logo-black {
    align-self: end;
    margin: calc(var(--margin) * 2);
}

.port .logo-black {
    margin: calc(var(--margin) * 2);
}

.logo-black .logo-type {
    fill: var(--black);
}

.logo-black .logo-star {
    fill: var(--white);
}

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

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

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

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

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

.hexa {
    position: absolute;
    margin-top: 4em;
    width: 29em;
    height: auto;
    justify-self: center;
    align-self: center;
    transform: translateY(12em) scale(.8);
    opacity: 0;
}

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

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

.disc {
    position: absolute;
    align-self: end;
    justify-self: center;
    text-align: center;
    text-wrap: pretty;
    color: var(--gray);
    margin: var(--margin);
    white-space: nowrap;
}

.wrap {
    justify-self: center;
    align-self: center;
    text-align: center;
    line-height: 1.3;
    font-size: 4.25em;
}

.wrap-1 {
    color: var(--black);
    margin-top: -2em;
}

.wrap-2 {
    margin-top: 1.5em;
}

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

.h-1 {
    font-size: 200%;
    font-weight: 600;
    line-height: 1;
}

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

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

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

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

.h-2 {
    line-height: 1.2;
}

.port .h-2 {
    font-size: 120%;
}

.byline {
    margin-top: .5em;
}

/* .b-1 {
    transform: translateY(1em);
    opacity: 0;
}

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

.show-2 .b-1 {
    transform: translateY(0);
    opacity: 1;
    transition-delay: .2s;
} */

.highlight {
    color: var(--yellow);
    font-weight: 600;
}

.phones {
    width: 5.5em;
    height: auto;
    transform: translateY(1.4em);
    opacity: 0;
}

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

.show-3 .phones {
    transform: translateY(0);
    opacity: 1;
    transition-delay: .25s;
}

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

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

.b-1 .tp,
.h-2 .tp {
    transform: translateY(1em);
    opacity: 0;
}

.b-1 .tp-08 { transition-delay: calc(0.000s + 0s); }
.b-1 .tp-07 { transition-delay: calc(0.025s + 0s); }
.b-1 .tp-06 { transition-delay: calc(0.050s + 0s); }
.b-1 .tp-05 { transition-delay: calc(0.075s + 0s); }
.b-1 .tp-04 { transition-delay: calc(0.100s + 0s); }
.b-1 .tp-03 { transition-delay: calc(0.125s + 0s); }
.b-1 .tp-02 { transition-delay: calc(0.150s + 0s); }
.b-1 .tp-01 { transition-delay: calc(0.175s + 0s); }

.show-2 .b-1 .tp-01 { transition-delay: calc(0.000s + .25s); }
.show-2 .b-1 .tp-02 { transition-delay: calc(0.050s + .25s); }
.show-2 .b-1 .tp-03 { transition-delay: calc(0.075s + .25s); }
.show-2 .b-1 .tp-04 { transition-delay: calc(0.100s + .25s); }
.show-2 .b-1 .tp-05 { transition-delay: calc(0.125s + .25s); }
.show-2 .b-1 .tp-06 { transition-delay: calc(0.150s + .25s); }
.show-2 .b-1 .tp-07 { transition-delay: calc(0.175s + .25s); }
.show-2 .b-1 .tp-08 { transition-delay: calc(0.200s + .25s); }

.h-2 .tp-08 { transition-delay: calc(0.000s + 0s); }
.h-2 .tp-07 { transition-delay: calc(0.025s + 0s); }
.h-2 .tp-06 { transition-delay: calc(0.050s + 0s); }
.h-2 .tp-05 { transition-delay: calc(0.075s + 0s); }
.h-2 .tp-04 { transition-delay: calc(0.100s + 0s); }
.h-2 .tp-03 { transition-delay: calc(0.125s + 0s); }
.h-2 .tp-02 { transition-delay: calc(0.150s + 0s); }
.h-2 .tp-01 { transition-delay: calc(0.175s + 0s); }

.show-3 .h-2 .tp-01 { transition-delay: calc(0.000s + 0s); }
.show-3 .h-2 .tp-02 { transition-delay: calc(0.050s + 0s); }
.show-3 .h-2 .tp-03 { transition-delay: calc(0.075s + 0s); }
.show-3 .h-2 .tp-04 { transition-delay: calc(0.100s + 0s); }
.show-3 .h-2 .tp-05 { transition-delay: calc(0.125s + 0s); }
.show-3 .h-2 .tp-06 { transition-delay: calc(0.150s + 0s); }
.show-3 .h-2 .tp-07 { transition-delay: calc(0.175s + 0s); }
.show-3 .h-2 .tp-08 { transition-delay: calc(0.200s + 0s); }

.show-2 .b-1 .tp,
.show-3 .h-2 .tp {
    opacity: 1;
    transform: translateY(0em);
}