:root {
    --mainColor: #eeffd8;
    --mainColorHover: #d6e6c2;
    --secColor: #000;
}

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

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

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

.banner {
    width: 100vw;
    height: 100vh;
    position: relative;
    font-family: 'ppf', sans-serif;
    font-weight: 400;
    color: var(--mainColor);
    background-color: var(--mainColor);
    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);
}

.frame {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 5em;
}

.banner, .banner *, .banner:after, .banner:before {
    box-sizing: border-box;
    backface-visibility: hidden
}

.content {
    grid-area: 1 / 1 / 2 / 2;
    position: relative
}

.bg {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;

    transform: scale(1.14);
    transform-origin: 0 50%;
    transform-origin: 100% 50%;
}

.animate .bg {
    transition: all 1s ease;
}

.show-bg .bg {
    transform: scale(1);
    transition: all 8s ease-out;
}

.logo {
    fill: var(--mainColor);
    position: absolute;
    top: 0;
    right: 0;
    width: 18em;
    height: auto;
}

.copy {
    /* position: relative;
    top: calc(50% + 3em);
    left: 50%;
    transform: translate(-50%, -50%); */
    display: inline-block;
    position: absolute;
    bottom: 5em;
    left: 2em;
}

.hero {
    font-size: 8em;
    line-height: 1.16;
    margin-bottom: .7rem;
}

.btn-wrap {
    margin-left: .4em;
    margin-top: 1.5em;
}

.btn {
    font-size: 1.5em;
    display: inline-block;
    background-color: var(--mainColor);
    color: var(--secColor);
    transition: all .15s ease;
    
    padding: .75em 1.2em .6em 1.2em;
    border-radius: .18em;
    border: .12em solid var(--mainColor);
    background-color: transparent;
    color: var(--mainColor);
}

.btn:hover, .btn:focus {
    background-color: var(--mainColor);
    color: var(--secColor);
}

.btn:active {
    background-color: var(--mainColorHover);
    border-color: var(--mainColorHover);
}

.arrow {
    fill: var(--mainColor);
    width: auto;
    height: .8em;
    margin-left: .2em;
    transition: all .2s ease;
}

.btn:hover .arrow, .btn:focus .arrow {
    fill: var(--secColor);
    transform: translateX(.28em);
}

.corner {
    background-color: var(--mainColor);
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36em;
    height: 36em;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

    color: var(--secColor);

    transform: translate(15%,15%);
    transition: all .8s ease;
    transform-origin: 100% 100%;

    opacity: .94;
}

.show-corner .corner {
    transform: scale(1);
}

.corner-content {
    position: absolute;
    bottom: -2em;
    right: 0;
    text-align: right;

    display: grid;
    align-items: center;
    justify-items: end;
    grid-template-columns: 1fr .5fr;
    grid-template-rows: repeat(2, 1fr);
}

.coll {
    position: relative;
    grid-area: 1 / 1 / 3 / 2;
    padding-top: .6em;
    padding-right: 1.7em;
    font-size: .9em;
}

.coll::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 11em;
    border-right: 1px solid rgba(0,0,0,.16);
}

.logo-coll {
    width: 8em;
    height: auto;
    fill: var(--secColor);
    padding: .5em;
    padding-right: 0;
    margin-left: 1em;
}

.logo-coll:last-of-type {
    padding-bottom: 1.5em;
}

.ha {
    opacity: 0;
    transform: translate(.75rem,3rem);
    position: relative;
    display: inline-block;
    transform-origin: 0% 50%;
    filter: blur(.13em);
}

.animate .ha {
    transition: all .33s ease;
}

.show-1 .hero .ha {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

.show-1 .hero .ha-2 { transition-delay: .04s; }
.show-1 .hero .ha-3 { transition-delay: .08s; }
.show-1 .hero .ha-4 { transition-delay: .14s; }
.show-1 .hero .ha-5 { transition-delay: .22s; }
.show-1 .hero .ha-6 { transition-delay: .30s; }

.show-coll .corner .ha {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

.show-coll .corner .ha-2 { transition-delay: .04s; }
.show-coll .corner .ha-3 { transition-delay: .08s; }
.show-coll .corner .ha-4 { transition-delay: .14s; }
.show-coll .corner .ha-5 { transition-delay: .22s; }
.show-coll .corner .ha-6 { transition-delay: .30s; }

.show-btn .copy .ha {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

.show-cut .cut {
    color: transparent;
    transition: none;
}

.cut::before,
.cut::after {
    transition: all .26s cubic-bezier(.4, .1, .4, 1.4);
}

.cut::before {
    content: "carbon";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--mainColor);
    clip-path: polygon(0 0, 74% 0, 34% 100%, 0 100%);
}

.cut::after {
    content: "carbon";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--mainColor);
    clip-path: polygon(74% 0, 100% 0%, 100% 100%, 34% 100%);
}

.show-cut .cut::before {
    transform: translate(.04em, -.04em);
}

.show-cut .cut::after {
    transform: translate(-.04em, .04em);
}

.mark {
    position: absolute;
    top: .9em;
    left: .9em;
    width: .7em;
    height: .7em;
    border-radius: 1em;
    border: .1em solid var(--mainColor);
    overflow: hidden;
    opacity: .55;
}

.mark::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    left: -28%;
    top: -28%;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    background-color: var(--mainColor);
}

.m-full {
    opacity: .5;
}

.m-full::after {
    clip-path: none;
}

.carbon {
    position: absolute;
    top: 1em;
    left: 1em;
    font-size: .8em;
    color: var(--secColor);
    opacity: .7;
    
    display: none;
}

.carbon .arrow {
    fill: var(--secColor);
    fill: var(--mainColor);
    transform: rotate(-45deg);
}

@media (orientation: landscape) {.br-p {display: none;}}
@media (orientation: portrait)  {.br-l {display: none;}}

@media (orientation: portrait) and (max-width: 400px) {
    html {
        font-size: clamp(0vh, 2vw, 1.7vh);
    }
}

@media (orientation: portrait) {

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

    .bg {
        background-position: 45% 50%;
    }

    .frame {
        padding: 4em;
        padding: 4em 3.5em;
    }

    .copy {
        bottom: calc(50% - 2em);
        transform: translateY(50%);
        left: 1em;
    }

    .hero {
        font-size: 7.5em;
    }

    .btn {
        font-size: 1.7em;
    }

    .corner-content {
        font-size: 1.1em;
        bottom: -1em;
    }
}

@media (min-aspect-ratio: 2/7) and (max-aspect-ratio: 4/9) {
    .frame {
        padding: 4.5em 4em;
    }
    .logo,
    .corner {
        font-size: 1.25em;
    }
    .corner-content {
        font-size: 1em;
    }
    .copy {
        bottom: calc(50% - 4em);
        left: .4em;
    }
    .hero {
        font-size: 8.2em;
    }
    .bg {
        background-position: 35% 50%;
    }
    .btn {
        display: none;
    }
    .coll::after {
        border-width: .1em;
    }
}

.qr {
    width: 11em;
    height: auto;
    background-color: var(--mainColor);
    padding: 1em;
    border-radius: .2em;
}

.info {
    font-size: 2em;
    margin-bottom: 1em;
}

.link {
    margin-top: 1em;
    font-size: 1.1em;
}