/**
 * Image Reveal Shortcode CSS
 */

/* Container styles */
.reveal-container {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Wrapper styles */
.reveal-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}

/* Image styles */
.reveal-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.05); /* Slightly larger to prevent edge gaps */
    transition: transform 0.7s ease-out;
}

/* Reveal overlay styles - Left to Right (default) */
.reveal-wrapper .reveal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF; /* Default overlay color */
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1;
}

/* Left to Right animation */
.reveal-ltr .reveal-overlay {
    transform: scaleX(1);
    transform-origin: left;
}

.reveal-ltr.reveal-active .reveal-overlay {
    transform: scaleX(0);
    transform-origin: right;
}

/* Right to Left animation */
.reveal-rtl .reveal-overlay {
    transform: scaleX(1);
    transform-origin: right;
}

.reveal-rtl.reveal-active .reveal-overlay {
    transform: scaleX(0);
    transform-origin: left;
}

/* Top to Bottom animation */
.reveal-ttb .reveal-overlay {
    transform: scaleY(1);
    transform-origin: top;
}

.reveal-ttb.reveal-active .reveal-overlay {
    transform: scaleY(0);
    transform-origin: bottom;
}

/* Bottom to Top animation */
.reveal-btt .reveal-overlay {
    transform: scaleY(1);
    transform-origin: bottom;
}

.reveal-btt.reveal-active .reveal-overlay {
    transform: scaleY(0);
    transform-origin: top;
}

/* Active state - when reveal animation has completed */
.reveal-wrapper.reveal-active img {
    transform: scale(1);
}

/* Speed variations */
.reveal-slow .reveal-overlay {
    transition-duration: 1.5s;
}

.reveal-fast .reveal-overlay {
    transition-duration: 0.6s;
}

/* Color variations */
.reveal-blue .reveal-overlay {
    background-color: #1e3a8a;
}

.reveal-red .reveal-overlay {
    background-color: #7f1d1d;
}

.reveal-green .reveal-overlay {
    background-color: #064e3b;
}