/* ── Animations ─────────────────────────────────── */

@keyframes ab-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ab-fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes ab-shrink {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Overlay ───────────────────────────────────── */

#artabout-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999; /* raised above WooCommerce overlays (up to ~99998) */
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ab-fadeIn 0.5s ease;
}

/* ── Popup container ───────────────────────────── */

#artabout-popup {
    position: relative;
    max-width: 1100px;
    width: 96%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

#artabout-popup img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Mobile portrait: zoom-crop the image ──────── */

@media (max-width: 600px) and (orientation: portrait) {
    #artabout-popup img {
        height: 75vh;
        object-fit: cover;
        object-position: center center;
    }
}

/* ── Timer bar ─────────────────────────────────── */

#artabout-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: #ffffff;
    animation: ab-shrink 5s linear forwards;
}