/* =========================================================
   GUARUS DELIVERY - ANIMAÇÃO DAS LETRAS
   APENAS ANIMAÇÃO - ATIVADA QUANDO .marketplace-ready ESTÁ PRESENTE
========================================================= */

/* Estado inicial das letras (escondidas) */
.hero-brand-letter {
    opacity: 0;
    transform: translateY(-40px);
}

/* Quando o marketplace estiver pronto, a animação é disparada */
.marketplace-ready .hero-brand-letter {
    animation: dropLetter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--letter-index, 0) * 40ms);
}

/* Keyframe da queda */
@keyframes dropLetter {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    60% {
        opacity: 1;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajuste para telas menores (valor de queda menor) */
@media (max-width: 767px) {
    .hero-brand-letter {
        transform: translateY(-24px);
    }
    .marketplace-ready .hero-brand-letter {
        animation-duration: 0.6s;
    }
    @keyframes dropLetter {
        0% {
            opacity: 0;
            transform: translateY(-24px);
        }
        60% {
            opacity: 1;
            transform: translateY(2px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* =========================================================
   ANIMAÇÃO DO SLOGAN E BADGE
   (fadeInUp)
========================================================= */

.hero-brand-slogan,
.hero-badge {
    opacity: 0;
}

.marketplace-ready .hero-brand-slogan {
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.marketplace-ready .hero-badge {
    animation: fadeInUp 0.6s ease-out 0.2s forwards;
}

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

/* =========================================================
   PREFERS-REDUCED-MOTION
   As letras aparecem imediatamente, sem animação
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-brand-letter,
    .hero-brand-slogan,
    .hero-badge {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}