/**
 * Image Sequence Block - Frontend Styles
 */

/* Block wrapper */
.wp-block-isb-image-sequence-player {
    position: relative;
    width: 100%;
    background: var(--wp--preset--color--white);
    overflow: hidden;
}

/* Render item container */
.render__item {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Loading screen */
.render__loading-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--white);
    /* Base color for one square */
    background-image:
        repeating-linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
        repeating-linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee);
    background-size: 20px 20px;
    /* Size of each checkerboard square */
    background-position: 0 0, 10px 10px;
    z-index: 10;
    transition: opacity 0.5s ease;
}

/* Preloader - using your custom CSS-based preloader */
.render__loading-screen .preloader {
    --container-size: 45px;
    aspect-ratio: 1/1;
    width: var(--container-size);
    height: var(--container-size);
    overflow: hidden;
    position: absolute;
    border-radius: 1px;
    background-color: var(--wp--preset--color--black, #1a1a2e);
    top: calc(50% - calc(var(--container-size) * 0.5));
    left: calc(50% - calc(var(--container-size) * 0.5));
}

.render__loading-screen .preloader:before {
    content: '';
    display: block;
    border-radius: 40px;
    border: 1px solid var(--wp--preset--color--white, #ffffff);
    height: 15px;
    width: 15px;
    border-right-color: transparent;
    position: absolute;
    top: calc(50% - calc(15px * 0.5));
    left: calc(50% - calc(15px * 0.5));
    animation: isb-rotate infinite linear 1s;
}

@keyframes isb-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Viewer container */
.render__viewer {
    position: absolute;
    inset: 0;
    transition: opacity 0.5s ease;
}

/* Image display */
.render__image-display {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}