/* ============================= */
/* REVEAL BASE */
/* ============================= */
.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom {
    opacity: 0;
    will-change: transform, opacity;
}

/* ============================= */
/* BOTTOM UP (float slightly) */
/* ============================= */
.reveal {
    transform: translateY(80px) scale(0.95);
    transition:
        opacity 1.4s cubic-bezier(.19,1,.22,1),
        transform 1.4s cubic-bezier(.19,1,.22,1);
}

.reveal.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ============================= */
/* LEFT (soft float) */
/* ============================= */
.reveal-left {
    transform: translateX(-80px) translateY(20px) scale(0.95);
    transition:
        opacity 1.4s cubic-bezier(.19,1,.22,1),
        transform 1.4s cubic-bezier(.19,1,.22,1);
}

.reveal-left.show {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
}

/* ============================= */
/* RIGHT (soft float) */
/* ============================= */
.reveal-right {
    transform: translateX(80px) translateY(20px) scale(0.95);
    transition:
        opacity 1.4s cubic-bezier(.19,1,.22,1),
        transform 1.4s cubic-bezier(.19,1,.22,1);
}

.reveal-right.show {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
}

/* ============================= */
/* ZOOM (soft zoom float) */
/* ============================= */
.reveal-zoom {
    transform: scale(0.9) translateY(20px);
    transition:
        opacity 0.6s cubic-bezier(.19,1,.22,1),
        transform 0.6s cubic-bezier(.19,1,.22,1);
}

.reveal-zoom.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ============================= */
/* STAGGER DELAYS */
/* ============================= */
.reveal-delay-1 { transition-delay: 0.25s; }
.reveal-delay-2 { transition-delay: 0.45s; }
.reveal-delay-3 { transition-delay: 0.65s; }
.reveal-delay-4 { transition-delay: 0.85s; }

.reveal-up {
    transform: translateY(60px);
    transition: opacity 1.4s cubic-bezier(.19,1,.22,1),
                transform 1.4s cubic-bezier(.19,1,.22,1);
}

.reveal-up.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal-down {
    transform: translateY(-60px);
    transition: opacity 1.4s cubic-bezier(.19,1,.22,1),
                transform 1.4s cubic-bezier(.19,1,.22,1);
}

.reveal-down.show {
    opacity: 1;
    transform: translateY(0);
}