/* Se ocultan solo los elementos preparados por JS; sin JavaScript las tarjetas siguen completas. */
.animacion-tarjeta-preparada [data-animacion-circulo] {
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
}

/* El círculo crece desde su propio pivote, con un rebote breve antes de quedar en su lugar. */
.animacion-tarjeta-activa [data-animacion-circulo] {
    animation: cipba-circulo-elastico .85s ease-out var(--cipba-entrada-demora, 0s) both;
}

@keyframes cipba-circulo-elastico {
    0% { opacity: 0; transform: scale(0); }
    38% { opacity: 1; transform: scale(1.16); }
    58% { transform: scale(.91); }
    76% { transform: scale(1.06); }
    90% { transform: scale(.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* El texto original reserva la altura y sigue accesible mientras la copia visual se escribe. */
.animacion-tarjeta-preparada [data-animacion-texto] { position: relative; }
.animacion-tarjeta-preparada .cipba-texto-original { opacity: 0; }
.animacion-tarjeta-preparada .cipba-texto-escrito {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .animacion-tarjeta-preparada [data-animacion-circulo] {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .animacion-tarjeta-preparada .cipba-texto-original { opacity: 1; }
    .animacion-tarjeta-preparada .cipba-texto-escrito { display: none; }
}

/* En accesos rápidos, primero entra el icono; luego el título y al final la descripción. */
.animacion-tarjeta-preparada [data-animacion-fade] { opacity: 0; }
.animacion-tarjeta-activa [data-animacion-fade] {
    animation: cipba-texto-fade .45s ease-out calc(var(--cipba-entrada-demora, 0s) + var(--cipba-fade-demora, .4s)) both;
}
@keyframes cipba-texto-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .animacion-tarjeta-preparada [data-animacion-fade] { animation: none; opacity: 1; }
}