.screen{

    opacity:0;
    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s;

}

.screen.active{

    display:flex;

    opacity:1;
    visibility:visible;

}

.title{

    animation:titleFade 1.3s ease;

}

@keyframes titleFade{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.description{

    animation:fadeUp 1.6s ease;

}

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.time-box{

    animation:floatBox 5s ease-in-out infinite;

}

.time-box:nth-child(1){

    animation-delay:0s;

}

.time-box:nth-child(3){

    animation-delay:.3s;

}

.time-box:nth-child(5){

    animation-delay:.6s;

}

.time-box:nth-child(7){

    animation-delay:.9s;

}

@keyframes floatBox{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}

.btn{

    transition:.35s;

}

.btn:hover{

    transform:translateY(-5px) scale(1.03);

}


.btn-ready{

    animation:pulseGlow 2s infinite;

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(255,180,200,0);

    }

    50%{

        box-shadow:
            0 0 25px rgba(255,190,210,.8);

    }

    100%{

        box-shadow:0 0 0 rgba(255,180,200,0);

    }

}

#gift{

    animation:giftFloat 3s ease-in-out infinite;

}

@keyframes giftFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


.giftBounce{

    animation:giftBounce .8s;

}

@keyframes giftBounce{

    0%{

        transform:scale(1);

    }

    25%{

        transform:scale(.92);

    }

    55%{

        transform:scale(1.15);

    }

    80%{

        transform:scale(.98);

    }

    100%{

        transform:scale(1);

    }

}


.photo{

    animation:photoSwing 6s ease-in-out infinite;

    transform-origin:center top;

}

@keyframes photoSwing{

    0%{

        transform:rotate(-2deg);

    }

    50%{

        transform:rotate(2deg);

    }

    100%{

        transform:rotate(-2deg);

    }

}


#letterCard{

    animation:letterAppear .8s ease;

}

@keyframes letterAppear{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.particle{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.5);

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    from{

        transform:translateY(0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    80%{

        opacity:1;

    }

    to{

        transform:translateY(-120vh);

        opacity:0;

    }

}


.heart{

    position:absolute;

    color:#ffb6c8;

    font-size:24px;

    animation:heartFloat 3s linear forwards;

}

@keyframes heartFloat{

    from{

        opacity:1;

        transform:
            translateY(0)
            scale(.8);

    }

    to{

        opacity:0;

        transform:
            translateY(-220px)
            scale(1.6)
            rotate(25deg);

    }

}

.glow{

    animation:glowAnimation 2s infinite;

}

@keyframes glowAnimation{

    0%{

        filter:drop-shadow(0 0 0px pink);

    }

    50%{

        filter:drop-shadow(0 0 18px #ffd2df);

    }

    100%{

        filter:drop-shadow(0 0 0px pink);

    }

}

#stars{

    position:fixed;

    inset:0;

    z-index:-3;

    pointer-events:none;

}

.star{

    position:absolute;

    width:2px;

    height:2px;

    border-radius:50%;

    background:white;

    opacity:.7;

    animation:twinkle infinite;

}

@keyframes twinkle{

    0%{

        opacity:.2;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.6);

    }

    100%{

        opacity:.2;

        transform:scale(.8);

    }

}

.particle{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.22);

    backdrop-filter:blur(2px);

    animation:particleMove linear infinite;

}

@keyframes particleMove{

    from{

        transform:translateY(120vh);

    }

    to{

        transform:translateY(-120vh);

    }

}

#hearts-background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-2;

    pointer-events:none;

}

.background-heart{

    position:absolute;

    bottom:-50px;

    color:rgba(255,210,225,.18);

    animation:heartBackground linear forwards;

}

@keyframes heartBackground{

    from{

        transform:
            translateY(0)
            rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:
            translateY(-120vh)
            rotate(180deg);

        opacity:0;

    }

}