/* ═══════════════════════════════════════════════
   ANIMAÇÕES — YBY PROMO
   Keyframes + Classes de Animação
   ═══════════════════════════════════════════════ */

/* ──── KEYFRAMES ──── */

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

@keyframes formReveal {
    from {
        opacity: 0;
        transform: perspective(600px) rotateX(15deg) translateY(40px);
    }

    to {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg) translateY(0);
    }
}

@keyframes fieldReveal {
    from {
        opacity: 0;
        transform: translateY(30px) skewY(-1.5deg);
    }

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

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(214, 51, 132, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(214, 51, 132, 0);
    }
}

@keyframes float {

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

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

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ──── SCROLL-REVEAL: Estado inicial (pré-animação) ──── */

.reveal {
    opacity: 0;
    will-change: opacity, transform;
}

.reveal.fade-up {
    transform: translateY(30px);
}

.reveal.fade-in {
    transform: none;
}

.reveal.scale-in {
    transform: scale(0.95);
}

.reveal.slide-left {
    transform: translateX(50px);
}

.reveal.slide-right {
    transform: translateX(-50px);
}

/* ──── Estado ativo: quando entra no viewport ──── */

.reveal.anima {
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.reveal.fade-up.anima {
    animation-name: fadeUp;
}

.reveal.fade-in.anima {
    animation-name: fadeIn;
}

.reveal.scale-in.anima {
    animation-name: scaleIn;
}

.reveal.slide-left.anima {
    animation-name: slideLeft;
}

.reveal.slide-right.anima {
    animation-name: slideRight;
}

/* ──── Stagger (atraso sequencial para children) ──── */
.stagger>.reveal.anima:nth-child(1) {
    animation-delay: 0ms;
}

.stagger>.reveal.anima:nth-child(2) {
    animation-delay: 100ms;
}

.stagger>.reveal.anima:nth-child(3) {
    animation-delay: 200ms;
}

.stagger>.reveal.anima:nth-child(4) {
    animation-delay: 300ms;
}

.stagger>.reveal.anima:nth-child(5) {
    animation-delay: 400ms;
}

.stagger>.reveal.anima:nth-child(6) {
    animation-delay: 500ms;
}

.stagger>.reveal.anima:nth-child(7) {
    animation-delay: 600ms;
}

.stagger>.reveal.anima:nth-child(8) {
    animation-delay: 700ms;
}

/* ──── Formulário 3D ──── */
.form-wrapper {
    perspective: 1000px;
}

.form-container {
    opacity: 1;
}

.form-container.anima {
    animation: formReveal 0.8s ease-out forwards;
}

.form-field {
    opacity: 1;
}

.form-field.anima {
    animation: fieldReveal 0.5s ease-out forwards;
}

.form-field.anima:nth-child(1) {
    animation-delay: 0.1s;
}

.form-field.anima:nth-child(2) {
    animation-delay: 0.25s;
}

.form-field.anima:nth-child(3) {
    animation-delay: 0.4s;
}

.form-field.anima:nth-child(4) {
    animation-delay: 0.55s;
}

.form-field.anima:nth-child(5) {
    animation-delay: 0.7s;
}

.form-field.anima:nth-child(6) {
    animation-delay: 0.85s;
}

.form-field.anima:nth-child(7) {
    animation-delay: 1.0s;
}

.form-field.anima:nth-child(8) {
    animation-delay: 1.15s;
}

/* ──── HOVER CTA Pulse ──── */
.btn-pulse {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ──── Floating decorations ──── */
.float-anim {
    animation: float 3s ease-in-out infinite;
}

/* ──── Image skeleton shimmer ──── */
.img-placeholder {
    background: linear-gradient(90deg, var(--color-gray-light) 25%, #e8e8e8 50%, var(--color-gray-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}