.rc-empty-58ee039a {
    padding: 2rem;
    text-align: center;
    background: #f1f1f1;
    border: 2px dashed #ccc;
    color: #666;
}

.rc-container-58ee039a {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Force full width */
    height: 100vh; /* Fill full viewport height */
    min-height: 600px;
    overflow: hidden;
    background: transparent;
}

.rc-item-58ee039a {
    position: absolute;
    width: 45vw; /* Much larger images for overlap */
    min-width: 300px;
    max-width: 700px;
    filter: drop-shadow(8px 12px 20px rgba(0,0,0,0.5));
    transition: z-index 0.3s ease;
    transform-origin: center center;
}

.rc-item-58ee039a:hover {
    z-index: 999 !important; /* Bring hovered to very front */
}

.rc-image-58ee039a {
    width: 100%;
    height: auto;
    display: block;
    /* Torn edge look */
    border: 12px solid #fff;
    border-radius: 2px 8px 3px 6px / 4px 2px 7px 3px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
    
    /* Base animation setup */
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    
    /* Default transforms using CSS vars passed from PHP */
    transform: rotate(var(--rc-rot)) scale(var(--rc-scale));
}

/* Pattern 1: Drift and fade out briefly */
@keyframes rc-float-pattern-1-58ee039a {
    0% { transform: translateY(0) translateX(0) rotate(var(--rc-rot)) scale(var(--rc-scale)); opacity: 1; }
    25% { transform: translateY(-30px) translateX(20px) rotate(calc(var(--rc-rot) + 5deg)) scale(var(--rc-scale)); opacity: 1; }
    45% { opacity: 1; }
    50% { transform: translateY(10px) translateX(40px) rotate(calc(var(--rc-rot) + 10deg)) scale(calc(var(--rc-scale) * 0.9)); opacity: 0; }
    55% { opacity: 1; }
    75% { transform: translateY(40px) translateX(-20px) rotate(calc(var(--rc-rot) - 5deg)) scale(var(--rc-scale)); opacity: 1; }
    100% { transform: translateY(0) translateX(0) rotate(var(--rc-rot)) scale(var(--rc-scale)); opacity: 1; }
}

/* Pattern 2: Larger movement, dip out and return */
@keyframes rc-float-pattern-2-58ee039a {
    0% { transform: translateY(0) translateX(0) rotate(var(--rc-rot)) scale(var(--rc-scale)); opacity: 1; }
    20% { transform: translateY(50px) translateX(-30px) rotate(calc(var(--rc-rot) - 8deg)) scale(calc(var(--rc-scale) * 1.1)); opacity: 1; }
    40% { transform: translateY(-20px) translateX(10px) rotate(calc(var(--rc-rot) + 3deg)) scale(var(--rc-scale)); opacity: 1; }
    75% { transform: translateY(-60px) translateX(-40px) rotate(calc(var(--rc-rot) - 10deg)) scale(calc(var(--rc-scale) * 0.8)); opacity: 0; }
    85% { opacity: 1; }
    100% { transform: translateY(0) translateX(0) rotate(var(--rc-rot)) scale(var(--rc-scale)); opacity: 1; }
}

/* Pattern 3: Circular drift with mid-way disappearance */
@keyframes rc-float-pattern-3-58ee039a {
    0% { transform: translateY(0) translateX(0) rotate(var(--rc-rot)) scale(var(--rc-scale)); opacity: 1; }
    30% { transform: translateY(30px) translateX(50px) rotate(calc(var(--rc-rot) + 12deg)) scale(var(--rc-scale)); opacity: 0; }
    40% { opacity: 1; }
    60% { transform: translateY(-40px) translateX(20px) rotate(calc(var(--rc-rot) - 7deg)) scale(calc(var(--rc-scale) * 1.05)); opacity: 1; }
    80% { transform: translateY(-10px) translateX(-30px) rotate(calc(var(--rc-rot) + 2deg)) scale(var(--rc-scale)); opacity: 1; }
    100% { transform: translateY(0) translateX(0) rotate(var(--rc-rot)) scale(var(--rc-scale)); opacity: 1; }
}