/* ─── reveal animations ─── */

[data-reveal] {
    opacity: 0;
    pointer-events: none;
}

[data-revealstate="shown"] {
    opacity: 1;
    pointer-events: all;
}

[data-revealstate="entering"] {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

[data-revealstate="exiting"] {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes rfade-in-up {
    from { opacity: 0; transform: translateY(-1.3rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rfade-out-down {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-1.3rem); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(-1.3rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out-down {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-1.3rem); }
}

@keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-2.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-2.5rem); }
}

@keyframes fade-in-right {
    from { opacity: 0; transform: translateX(2.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-out-right {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(2.5rem); }
}

@keyframes zoom-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes zoom-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.8); }
}

@keyframes flip-in-x {
    from { transform: rotateX(90deg); opacity: 0; }
    to   { transform: rotateX(0); opacity: 1; }
}
@keyframes flip-out-x {
    from { transform: rotateX(0); opacity: 1; }
    to   { transform: rotateX(90deg); opacity: 0; }
}

@keyframes slide-in-bottom {
    from { opacity: 0; transform: translateY(3.2rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-out-bottom {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(3.2rem); }
}

@keyframes rotate-in {
    from { opacity: 0; transform: rotate(-10deg) scale(0.95); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes rotate-out {
    from { opacity: 1; transform: rotate(0deg) scale(1); }
    to   { opacity: 0; transform: rotate(10deg) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}