.era-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}
.era-reveal.fade { animation: eraFadeIn 1s forwards; }
.era-reveal.slide { animation: eraSlideIn 1s forwards; }
.era-reveal.zoom { animation: eraZoomIn 1s forwards; }
.era-reveal.rotate { animation: eraRotateIn 1s forwards; }
.era-reveal.flip { animation: eraFlipIn 1s forwards; }
.era-reveal.bounce { animation: eraBounceIn 1s forwards; }
.era-reveal.scale { animation: eraScaleIn 1s forwards; }
.era-reveal.swirl { animation: eraSwirlIn 1s forwards; }
.era-reveal.fadeup { animation: eraFadeUp 1s forwards; }
.era-reveal.pop { animation: eraPopIn 1s forwards; }

@keyframes eraFadeIn { to { opacity: 1; transform: none; } }
@keyframes eraSlideIn {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes eraZoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes eraRotateIn {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}
@keyframes eraFlipIn {
    from { transform: rotateY(90deg); opacity: 0; }
    to { transform: rotateY(0); opacity: 1; }
}
@keyframes eraBounceIn {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { transform: translateY(20%); }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes eraScaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes eraSwirlIn {
    from { transform: rotate(-360deg) scale(0); opacity: 0; }
    to { transform: rotate(0deg) scale(1); opacity: 1; }
}
@keyframes eraFadeUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes eraPopIn {
    0% { transform: scale(0.2); opacity: 0; }
    80% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}