/* ===================================================
   LOADING OVERLAY — Grape fill-up animation
   Included globally via common.html head fragment.
   Controlled by loading.js: showLoading() / hideLoading()
   =================================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.65);
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 28px 28px 0;
    box-sizing: border-box;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ---- Grape image stack ---- */

.loading-grape-container {
    position: relative;
    width: 64px;
    height: 80px;
}

.loading-grape-gray,
.loading-grape-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Grayscale base — washed out, always visible */
.loading-grape-gray {
    filter: grayscale(1) brightness(1.4) opacity(0.6);
}

/* Colored layer — revealed from bottom to top via clip-path */
.loading-grape-color {
    clip-path: inset(100% 0 0 0);
}

/* ---- Pulsing dots spinner ---- */

.loading-spinner {
    width: 36px;
    height: 36px;
    position: relative;
}

.loading-spinner-dot {
    width: 5px;
    height: 5px;
    background: var(--primary-purple, #b444eb);
    border-radius: 50%;
    position: absolute;
    animation: loading-pulse 1.2s ease-in-out infinite;
}

@keyframes loading-pulse {
    0%, 100% { transform: scale(0.6); opacity: 0.4; }
    50% { transform: scale(1.4); opacity: 1; }
}