/* =====================
   Animações de Fade e Reveal
   ===================== */

/* Estado inicial oculto */
.fade-in-initial-hidden {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    visibility: hidden;
}

/* Dispara animação fadeInUp */
.fadeInUp-active {
    visibility: visible;
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.imageReveal {
    animation: imageReveal both;
    animation-timeline: view(10% 5%);
}

@keyframes imageReveal {
    from {
        filter: saturate(0) contrast(4) brightness(.1) blur(5px);
        opacity: 0;
        scale: .95;
        translate: 0 4rem;
    }
    to {
        filter: none;
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================
   Animações Específicas
   ===================== */

@keyframes oncadancarina_4 {
    0% {
        transform: scale(0.7) translateY(0px) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(1) translateY(-20px) rotate(10deg);
        opacity: 1;
    }
    40% {
        transform: scale(1) translateY(0px) rotate(-10deg);
    }
    60% {
        transform: scale(1) translateY(0px) rotate(10deg);
    }
    80% {
        transform: scale(1) translateY(0px) rotate(-5deg);
    }
    100% {
        transform: scale(1) translateY(0px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes starburst-in {
    0% {
        left: 350px;
        top: -70px;
        transform: rotate(0deg);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 200px;
        top: -70px;
        transform: rotate(-360deg);
        opacity: 1;
    }
}

@keyframes starburst-in-large {
    0% {
        left: 800px; /* Ajuste para a posição inicial em telas maiores */
        top: -190px;
        transform: rotate(0deg);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 420px; /* Ajuste para a posição final em telas maiores */
        top: -190px;
        transform: rotate(-360deg);
        opacity: 1;
    }
}