/* INTRO */
.intro {
    background: #FFE9CE;
    grid-column: 1 / span 12;
    height: calc(100vh - 40px);
    display: grid;
    /* background: lightblue; */
}

h1 {
    font-size: 14vw;
    font-variation-settings: 'wght' 140;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 60vw;
    width: auto;
    z-index: 10;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

h1 span {
    opacity: 0;
    animation: ani-intro-lettering .4s forwards;
    display: inline-block;
}

h1 span:nth-of-type(2) {
    animation-delay: .1s;
}

h1 span:nth-of-type(3) {
    animation-delay: .2s;
}

h1 span:nth-of-type(4) {
    animation-delay: .3s;
}

h1 span:nth-of-type(5) {
    animation-delay: .4s;
}

h1 span:nth-of-type(6) {
    animation-delay: .5s;
}

h1 span:nth-of-type(7) {
    animation-delay: .6s;
}

h1 span:nth-of-type(8) {
    animation-delay: .7s;
}

h1 span:nth-of-type(9) {
    animation-delay: .8s;
}

@keyframes ani-intro-lettering {
    0% {
        font-variation-settings: 'wght' 60;
        opacity: 1;
        margin-left: .7vw;
    }

    100% {
        font-variation-settings: 'wght' 140;
        opacity: 1;
    }
}




/* INTRO STICKERS */
.intro-stickercontainer {
    display: block;
    width: 100%;
    height: 100%;
    height: min(50vw, 100%);
    position: relative;
    align-self: center;
}

.intro-sticker {
    position: absolute;
    font-variation-settings: 'wght' 140;
    opacity: 0;
}

.intro-sticker--speechbubble {
    color: #000;
    font-size: 2.5vw;
}

.intro-sticker--speechbubble .intro-sticker-text {
    min-width: 12ch;
    white-space: nowrap;
    height: 1.2em;
}

.intro-sticker--speechbubble ::selection {
    background: #000;
    color: #fff;
}

.intro-sticker--speechbubble-bubble {
    background: #fff;
    padding: 2vw 3vw;
    border-radius: 10vw;
}

.intro-sticker--speechbubble-triangle {
}

.intro-sticker_1 {
    top: 21%;
    left: 4%;
    transform: rotate(-8deg);
    animation: ani-intro-speechbubble_1 .7s .8s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_2 {
    bottom: 15%;
    right: 11%;
    transform: rotate(4deg);
    animation: ani-intro-speechbubble_2 .7s 1.2s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_1 .intro-sticker--speechbubble-triangle {
    position: absolute;
    bottom: -30px;
    transform: rotate(180deg);
    right: 30%;
    width: 20%;
    height: 30px;
}

.intro-sticker_2 .intro-sticker--speechbubble-triangle {
    position: absolute;
    top: -30px;
    left: 20%;
    width: 20%;
    height: 30px;
}

.intro-sticker-text {
    display: block;
}

.intro-sticker--speechbubble .intro-sticker-text {
    font-variation-settings: 'wght' 100;
}

.intro-sticker_1 .intro-sticker-text {
    transform: rotate(.5deg);
}

.intro-sticker_2 .intro-sticker-text {
    transform: rotate(.5deg);
}

.intro-sticker--round {
    width: 10vw;
    height: 10vw;
    border-radius: 100%;
    color: #fff;
    font-size: 3vw;
    text-align: center;
    line-height: 10vw;
}

.intro-sticker_3 {
    background: #3CCB09;
    top: 37%;
    left: 7%;
    animation: ani-intro-round .7s 1.6s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_3 .intro-sticker-text {
    font-variation-settings: 'wght' 120;
    transform: rotate(-20deg);
}

.intro-sticker_4 {
    background: #8A53FF;
    line-height: 2.5vw;
    font-size: 2.5vw;
    padding-top: 2.5vw;
    animation: ani-intro-round .7s 1.9s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
    top: 28%;
    right: 8%;
}

.intro-sticker_4 .intro-sticker-text {
    transform: rotate(20deg);   
}

.intro-sticker--label {
    font-size: 1.5vw;
    text-transform: uppercase;
    padding: .8vw 2vw;
    border-radius: 10px;
}

.intro-sticker_5 {
    background: #3CCB09;
    font-variation-settings: 'wght' 120;
    top: 32%;
    right: 20%;
    animation: ani-intro-label_1 .7s 2.2s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
}

.intro-sticker_5 .intro-sticker-text {
    transform: rotate(1deg);
}

.intro-sticker_6 {
    background: #FD4B38;
    bottom: 33%;
    right: 7%;
    animation: ani-intro-label_2 .7s 2.4s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_6 .intro-sticker-text {
    transform: rotate(-1deg);
}

.intro-sticker--shout {
}

.intro-sticker_7 {
    left: 14%;
    bottom: -10px;
    width: 32vw;
    height: 25vw;
    animation: ani-intro-shout .6s 2.5s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_7 .intro-sticker--shout-bubble {
    width: 100%;
    height: 100%;
}

.intro-sticker_7 .intro-sticker-text {
    color: #0500A3;
    font-size: 3.5vw;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: rotate(-4deg) translateY(-50%);
}

.intro-sticker_8 {
    right: 30%;
    top: 6%;
    top: 0;
    width: 24vw;
    height: 24vw;
    animation: ani-intro-shout .6s 2.6s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_8 .intro-sticker--shout-bubble {
    width: 100%;
    height: 100%;
}

.intro-sticker_8 .intro-sticker-text {
    color: #fff;
    font-size: 2vw;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: rotate(30deg) translateY(-50%);
}

.intro-sticker_9 {
    background: #8A53FF;
    bottom: 2%;
    left: 38%;
    animation: ani-intro-round .7s 3s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro-sticker_9 .intro-sticker-text {
    font-size: 2vw;
    line-height: 2vw;
    top: 50%;
    position: absolute;
    transform: translateY(-50%) rotate(6deg);
    font-variation-settings: 'wght' 100;
}

@keyframes ani-intro-speechbubble_1 {
    from {
        transform: scale(0) rotate(-40deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(-8deg);
        opacity: 1;
    }
}


@keyframes ani-intro-speechbubble_2 {
    from {
        transform: scale(0) rotate(-40deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(4deg);
        opacity: 1;
    }
}

@keyframes ani-intro-round {
    from {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

@keyframes ani-intro-label_1 {
    from {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(10deg);
        opacity: 1;
    }
}

@keyframes ani-intro-label_2 {
    from {
        transform: scale(0) rotate(-30deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(-20deg);
        opacity: 1;
    }
}

@keyframes ani-intro-shout {
    from {
        transform: scale(0) rotate(-30deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(-20deg);
        opacity: 1;
    }
}

/* @media (orientation: portrait) { */
@media (max-width: 700px) and (orientation: portrait) {
    .intro {
        max-height: -webkit-fill-available;
    }

    h1 {
        font-size: 18vw;
        width: 78vw;
    }

    .intro-stickercontainer {
        height: 100%;
    }

    .intro-sticker--speechbubble {
        color: #000;
        font-size: 5.5vw;
        z-index: 8;
    }

    .intro-sticker--speechbubble-bubble {
        padding: 3vw 5vw;
        border-radius: 10vw;
    }
    
    .intro-sticker_1 {
        top: 33%;
        left: 2%;
    }
    
    .intro-sticker_2 {
        bottom: 30%;
        right: 5px;
        z-index: 5;
    }

    .intro-sticker--round {
        width: 30vw;
        height: 30vw;
        font-size: 9vw;
        line-height: 30vw;
        z-index: 5;
    }
    
    .intro-sticker_3 {
        top: 4%;
        left: -8px;
    }
    
    .intro-sticker_4 {
        top: 13%;
        right: -12px;
        font-size: 7.4vw;
        line-height: 7.4vw;
        padding-top: 7.4vw;
    }
    
    .intro-sticker_4 .intro-sticker-text {
        transform: rotate(20deg);   
    }

    .intro-sticker--label {
        font-size: 3.8vw;
        padding: 1.2vw 2.4vw;
    }
    
    .intro-sticker_5 {
        background: #3CCB09;
        font-variation-settings: 'wght' 120;
        top: 40%;
        right: -6px;
    }
    
    .intro-sticker_5 .intro-sticker-text {
        transform: rotate(1deg);
    }
    
    .intro-sticker_6 {
        bottom: 20%;
        right: initial;
        left: -14px;
        animation: ani-intro-label_2 .7s 2.4s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 2;
    }
    
    .intro-sticker_6 .intro-sticker-text {
        transform: rotate(-1deg);
    }

    .intro-sticker--shout {
    }
    
    .intro-sticker_7 {
        left: 7%;
        bottom: -10px;
        width: 64vw;
        height: 50vw;
        z-index: 1;
    }
    
    .intro-sticker_7 .intro-sticker-text {
        font-size: 9vw;
        top: 50%;
        transform: rotate(-4deg) translateY(-50%);
    }
    
    .intro-sticker_8 {
        right: 12%;
        top: -32px;
        width: 64vw;
        height: 64vw;
        z-index: 1;
    }
    
    .intro-sticker_8 .intro-sticker-text {
        font-size: 4.5vw;
    }

    .intro-sticker_9 {
        bottom: -4px;
        left: initial;
        right: -6px;
    }
    
    .intro-sticker_9 .intro-sticker-text {
        font-size: 7vw;
        line-height: 7vw;
    }
}