/* Estado inicial: invisível, ocupando o lugar */
.animar-ao-rolar {
    opacity: 0 !important;
    transform: translateY(50px) !important;
    transition: opacity 1s ease-out, transform 1s ease-out !important;
    will-change: opacity, transform; /* Ajuda a performance */
}

/* Quando o JS adicionar a classe 'esta-visivel' */
.animar-ao-rolar.esta-visivel {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Estado inicial dos cards (invisíveis e levemente deslocados) */
.wp-block-columns.animar-ao-rolar .wp-block-column.card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quando o pai recebe a classe 'esta-visivel', os filhos animam */
.wp-block-columns.animar-ao-rolar.esta-visivel .wp-block-column.card {
    opacity: 1;
    transform: translateY(0);
}

/* Criando o atraso sequencial para cada card */
.wp-block-columns.animar-ao-rolar.esta-visivel .wp-block-column.card:nth-child(1) { transition-delay: 0.1s; }
.wp-block-columns.animar-ao-rolar.esta-visivel .wp-block-column.card:nth-child(2) { transition-delay: 0.3s; }
.wp-block-columns.animar-ao-rolar.esta-visivel .wp-block-column.card:nth-child(3) { transition-delay: 0.5s; }