/* Image Reveal Shortcode - base styles
   Colors, image, height and blob layout are injected per-instance via inline
   styles / CSS variables. Layout (top/left/transform-origin/box-shadow/timing)
   is randomized per shortcode instance in PHP (but stable across reloads for
   the same instance) so that several sections on one page never look identical. */

.irs-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Blob background */
.irs-background {
    position: relative;
    width: 100%;
    height: var(--irs-height, 800px);
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--irs-bg, #f1eee9);
    overflow: hidden;
    border: 4px solid #f6f6f6;
    border-radius: 25px;
    overflow: hidden;
}

.irs-background span {
    width: 12vmin;
    height: 12vmin;
    border-radius: 35vmin;
    backface-visibility: hidden;
    position: absolute;
    animation-name: irs-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* top, left, animation-duration, animation-delay, transform-origin and
       box-shadow are all set inline per span - see image-reveal-shortcode.php */
}

@keyframes irs-move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

/* Image on top of the background */
.irs-image-section {
    width: 100%;
    z-index: 1;
    position: absolute;
    top: var(--irs-img-top, 20px);
    left: 0;
    height: var(--irs-height, 800px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.irs-image-section img {
    width: var(--irs-img-width, 125px);
    margin: 0 auto;
    display: block;
    height: auto;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .irs-background span {
        animation: none;
    }
}