/**
 * Drawing Overlay for Elementor - CSS
 * Fixed positioning and animation
 */

/* ===== CONTAINER ===== */
.doe-container {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
}

/* ===== BASE IMAGE ===== */
.doe-base {
    display: block;
    line-height: 0;
    width: 100%;
}

.doe-base img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== OVERLAY - Exact same position as base ===== */
.doe-overlay {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.doe-overlay-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensure transition works */
    transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s ease,
        filter 0.3s ease !important;
}

/* Colored overlay with mask - uses background-color directly */
.doe-overlay-colored {
    transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s ease !important;
}

/* ===== DEFAULT HIDDEN STATE - clip to nothing ===== */
.doe-animation-left-to-right .doe-overlay-img {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) !important;
}

.doe-animation-right-to-left .doe-overlay-img {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) !important;
}

.doe-animation-top-to-bottom .doe-overlay-img {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) !important;
}

.doe-animation-bottom-to-top .doe-overlay-img {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%) !important;
}

.doe-animation-center-out .doe-overlay-img {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%) !important;
}

.doe-animation-diagonal .doe-overlay-img {
    clip-path: polygon(0 0, 0 0, 0 0) !important;
}

.doe-animation-circle .doe-overlay-img {
    clip-path: circle(0% at 50% 50%) !important;
}

.doe-animation-fade .doe-overlay-img {
    opacity: 0 !important;
    clip-path: none !important;
}

/* ===== HOVER STATE - reveal full image ===== */
.doe-container:hover .doe-overlay-img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

.doe-animation-diagonal.doe-container:hover .doe-overlay-img {
    clip-path: polygon(0 0, 200% 0, 0 200%) !important;
}

.doe-animation-circle.doe-container:hover .doe-overlay-img {
    clip-path: circle(150% at 50% 50%) !important;
}

.doe-animation-fade.doe-container:hover .doe-overlay-img {
    opacity: 1 !important;
}

/* Visible class (for scroll/load triggers) */
.doe-container.doe-visible .doe-overlay-img,
.doe-container.doe-touch-active .doe-overlay-img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

.doe-animation-fade.doe-container.doe-visible .doe-overlay-img,
.doe-animation-fade.doe-container.doe-touch-active .doe-overlay-img {
    opacity: 1 !important;
}

/* ===== LABEL ===== */
.doe-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.doe-container:hover .doe-label,
.doe-container.doe-visible .doe-label,
.doe-container.doe-touch-active .doe-label {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .doe-overlay-img {
        transition: none !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    }
}