/* Prevent flickering by ensuring smooth transitions */
.eriw-random-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Subtle loading background instead of black */
    background-color: #f8f9fa;
    transition: background-image 0.4s ease-in-out;
}

/* Loading state with subtle pulse animation */
.eriw-random-bg.eriw-loading {
    background-color: #f1f3f4;
    animation: eriw-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes eriw-loading-pulse {
    0%, 100% { background-color: #F3F2EE; }
    50% { background-color: #F3F2EE; }
}

/* Hide background until JavaScript has processed it to prevent flickering */
.eriw-random-bg[data-eriw-random-mode="client"]:not([data-eriw-processed]):not(.eriw-loading) {
    background-image: none !important;
    background-color: #F3F2EE;
}

/* Smooth transition when image loads */
.eriw-random-bg[data-eriw-processed] {
    animation: none;
}

.eriw-random-bg .copyright-info {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #FFFFFF;
    font-size: var(--font-down-4);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42);
    /* Ensure caption doesn't flicker */
    opacity: 0;
    transition: opacity 0.3s ease-in-out 0.2s; /* Delay until image loads */
    transform: translateY(5px);
}

.eriw-random-bg[data-eriw-processed] .copyright-info {
    opacity: 1;
    transform: translateY(0);
}

/* Hide caption during loading */
.eriw-random-bg.eriw-loading .copyright-info {
    opacity: 0;
    transform: translateY(5px);
}

.eriw-random-bg .copyright-info em {
    font-size: var(--font-down-2);
    font-style: normal;
}