/* --- WIDGET CSS --- */

.wml-iris-reveal-wrapper {
    position: relative;
    width: 100%;
    /* Default background handled by builder settings */
}

.ar-widget-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Default, overridden by settings */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* background-color: #050505; Handled by builder settings */
}

.ar-video-mask {
    width: 100%;
    height: 100%;
    position: relative;
    /* Start as a small circle */
    clip-path: circle(10% at 50% 50%);
    will-change: clip-path;
    z-index: 10;
}

.ar-video-mask video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay Wrapper: Holds button + spinner to animate them together */
.ar-overlay-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: none;
    /* Allows click-through to video if needed, but we catch clicks on button */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
}

/* Generated SVG Spinner */
.ar-spin-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: ar-spin 12s linear infinite;
    fill: white;
    /* Default, overridden */
    opacity: 0.9;
}

.ar-spin-svg text {
    font-family: 'Courier New', Courier, monospace;
    /* Default */
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Play Button */
.ar-play-btn {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    /* Default */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Default */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    /* Re-enable clicks specifically for button */
    transition: transform 0.2s ease, background 0.2s ease;
}

.ar-play-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
    /* Can be customizable via custom CSS or enhanced controls later if needed */
}

.ar-play-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
    /* Default */
    margin-left: 4px;
    /* Optical center adjustment */
}

@keyframes ar-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .ar-video-mask {
        clip-path: inset(0);
    }

    .ar-overlay-group {
        display: none;
    }

    /* Hide overlay on mobile for cleaner UX */
}