/* =========================
   PETALES
========================= */

.petal{
    position:fixed;
    top:-40px;
    z-index:9999;
    pointer-events:none;
    border-radius:60% 40% 60% 40%;
    opacity:0.9;
    animation-name:fallPetal;
    animation-timing-function:linear;
}

@keyframes fallPetal{
    0%{
        transform:translateY(-30px) rotate(0deg);
        opacity:0;
    }
    10%{
        opacity:0.95;
    }
    100%{
        transform:translateY(110vh) translateX(80px) rotate(360deg);
        opacity:0;
    }
}

/* =========================
   TITRE ANIME
========================= */

.hero-title{
    opacity:0;
    transform:translateY(25px) scale(0.96);
    transform: translate(-50%, -50%);
    transition:all 1.6s ease;
}

.hero-title.show{
    opacity:1;
    transform:translateY(0) scale(1);
    transform: translate(-50%, -50%);
}