@font-face {
    font-family: "ArtSchool";
    src: url("../fonts/ARTSCHOOLDROPOUT-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ArtSchool-Skinny";
    src: url("../fonts/ARTSCHOOLDROPOUT-Skinny.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


main, body {
    width: 100vw;
    height: 100%;
    margin: 0 0 0 0;
    
}

.full-section {
    width: 100%;
    min-height: 100svh;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    margin: 0 auto;

    background-color: beige;
}

#hero {
    background: url("../images/hero/Candy-BG-01.jpg") center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;   
    
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1.2s ease forwards;
    animation-delay:.4s;
}

#hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:url("../images/hero/Candy-BG-01.jpg") center/cover;

    animation:bgZoom 20s ease-in-out infinite alternate;

    z-index:-1;
}

#paper-bg {
    background: url("../images/hero/Wavy-Rect-BG.png") center / contain no-repeat;  
    width: 100%;
    max-width: 860px;
    height: 80%;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    animation: paperPop .7s cubic-bezier(.34,1.56,.64,1) .3s forwards,
               

    /* animation: paperFloat 8s ease-in-out infinite; */
}

@keyframes paperPop {
    0% {
        opacity: 0;
        transform: scale(.7);
    }

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes paperFloat {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-6px);
    }
}

#garland {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 860px;
    height: 210px;

    background: url("../images/hero/garland.png") center center / contain no-repeat;

    pointer-events: none;

    animation: garlandSlide 0.8s ease-out forwards,
               garlandFloat 6s ease-in-out .8s infinite;
}

@keyframes garlandFloat {
    0%,100%{
        transform: translateX(-50%) translateY(0);
    }

    50%{
        transform: translateX(-50%) translateY(-8px);
    }
}

@keyframes garlandSlide {
    from {
        opacity: 0;
        transform: translate(-50%, -80px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.reset {
    position: relative;
    margin: 0;
    clear: both;
}

.hero-title{
    padding-top: 100px;
    display: flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    height: 140px;
    width: 360px;
    position: relative;
    margin: 0 auto;

    animation:fun-float 6s ease-in-out infinite;
}

#top-space {
    height: 13vh;
    width: 100%;
}

.hero-title img{
    display:block;
    height:auto;
}

/* Individual sizes */
.title-fun{
    width:130px;
}

.title-tobe{
    width:60px;
    position: relative;
    top: -12px;
}

.title-one{
    width:130px;
    position: relative;
    top: -20px;
}

/* Entry Animations */
.title-fun{
    opacity:0;
    animation:
        funDrop .6s ease-out .6s forwards,
        giggle 3.2s ease-in-out 1.3s infinite;
}

.title-tobe{
    opacity:0;
    animation:
        fadeIn .6s ease .9s forwards,
        giggle 3.5s ease-in-out 1.6s infinite;
}

.title-one{
    opacity:0;
    animation:
        onePop .7s cubic-bezier(.34,1.56,.64,1) 1.2s forwards,
        giggle 3s ease-in-out 2s infinite;
}

.decorations {
    position: absolute;
    width: 360px;
    height: 100%;
}

.decorations img{
    position:absolute;
    user-select:none;
    pointer-events:none;
}

.flower{
    animation:
        flowerAppear .8s ease forwards,
        flowerFloat 5s ease-in-out infinite;
}

.star{
    animation:
        starAppear .6s ease forwards,
        twinkle 3s ease-in-out infinite;
}

.flower-1{
    left: 1%;
    bottom: 0%;
    width: 50px;
    animation-delay:1.5s;
    opacity: 0;
    animation: flowerAppear .6s ease 2.5s forwards,
        flowerBloom 5s ease-in-out 3.1s infinite,
        flowerFloat 6s ease-in-out 3.1s infinite;
}

.flower-2{
    left: 3%;
    top: 50%;
    width:35px;
    animation-delay:1.7s;

    opacity: 0;
    animation: flowerAppear .6s ease 2.7s forwards,
        flowerBloom 5.5s ease-in-out 3.3s infinite,
        flowerFloat 6.5s ease-in-out 3.3s infinite;

}

.flower-3{
    right: 8%;
    bottom: 20%;
    width:32px;
    animation-delay:1.9s;

    opacity: 0;
    animation: flowerAppear .6s ease 2.9s forwards,
        flowerBloom 4.8s ease-in-out 3.5s infinite,
        flowerFloat 5.8s ease-in-out 3.5s infinite;

}

.star-1 {
    left: 10%;
    bottom: 26%;
    width:25px;
    animation-delay:1.5s;

    opacity: 0;
    animation: flowerAppear .4s ease 3.0s forwards,
        twinkle 3.5s ease-in-out 3.5s infinite;
}

.star-2 {
    right: 8%;
    top: 45%;
    width:25px;
    animation-delay:1.5s;

    opacity: 0;
    animation: flowerAppear .4s ease 3.2s forwards,
        twinkle 3.2s ease-in-out 3.7s infinite;
}

.star-3 {
    right: 13%;
    top: 20%;
    width: 30px;
    animation-delay:1.5s;
}

.message-01{
    font-family: "ArtSchool-Skinny", sans-serif;
    text-transform: uppercase;
    text-align: center;
    width: 280px;
    position: relative;

    opacity: 0;
    transform: translateY(20px);

    animation: messageFade .8s ease 1.6s forwards;
}

.msg-normal {
    font-size: 12px;
}

.msg-bold {
    color: #ff8bc6;
    font-size: 26px;
    font-weight: bold;
    line-height: 0px;
    padding: 0;
    margin: 20px 0;
}

/* ANIMATION */
@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes bgZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.04);
    }

}

/*FUN TO BE ONE*/
@keyframes funDrop {
    from{
        opacity:0;
        transform:translateY(-60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes onePop{
    0%{
        opacity:0;
        transform:scale(.3);
    }

    70%{
        opacity:1;
        transform:scale(1.12);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes fun-float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

@keyframes giggle{

    0%,75%,100%{
        transform:rotate(0) translateY(0);
    }

    79%{
        transform:rotate(-2deg) translateY(-2px);
    }

    83%{
        transform:rotate(2deg) translateY(1px);
    }

    87%{
        transform:rotate(-1deg);
    }

    91%{
        transform:rotate(1deg);
    }
}

@keyframes flowerAppear{

    from{

        opacity:0;
        transform:scale(.2) rotate(-30deg);

    }

    to{

        opacity:1;
        transform:scale(1) rotate(0);

    }

}

@keyframes flowerFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

@keyframes twinkle{

    0%,100%{

        opacity:1;
        transform:scale(1);

    }

    50%{

        opacity:.65;
        transform:scale(1.12);

    }

}

@keyframes flowerBloom{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

}

@keyframes messageFade {

    from{
        opacity: 0;
        transform: translateY(20px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }

}