/* Smooth zoom-in and panning effect for Reveal.js background */
.slide-background-content {
    animation: zoomPan 10s infinite alternate ease-in-out;
    transform-origin: center;
    transform-origin: center;
}

@keyframes zoomPan {
    0% {
        transform: scale(1.3) translate(-2%, -2%);
    }
    25% {
        transform: scale(1.25) translate(-1%, -1%);
    }
    50% {
        transform: scale(1.2) translate(0, 0);
    }
    75% {
        transform: scale(1.15) translate(1%, 1%);
    }
    100% {
        transform: scale(1.1) translate(0, 0);
    }
}

/* Darken background for better text readability */
.slide-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust darkness as needed */
    pointer-events: none;
    z-index: 1;
}

/* Optional: Add a vignette effect for a more immersive feel */
.slide-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: 2;
}