/* modal-month-switch-overlay.css - .month-switch-overlay: loading overlay during calendar month transitions */

/* Block: Month Switch Overlay */
.month-switch-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(18, 12, 8, 0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 35000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s linear;
}

.month-switch-overlay--active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.month-switch-overlay__progress {
    width: min(84vw, 36rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.month-switch-overlay__ring-wrap {
    width: 11.3rem;
    height: 11.3rem;
    position: relative;
    display: grid;
    place-items: center;
}

.month-switch-overlay__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.month-switch-overlay__track {
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 12;
}

.month-switch-overlay__fill {
    fill: none;
    stroke: #ffffff;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 302;
    stroke-dashoffset: 302;
    transition: stroke-dashoffset 0.14s linear;
    will-change: stroke-dashoffset;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.66)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.4));
    animation: monthSwitchRingHypnotic 1.05s ease-in-out infinite;
}

@keyframes monthSwitchRingHypnotic {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.28));
    }

    50% {
        transform: scale(1.045);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 36px rgba(255, 255, 255, 0.45));
    }
}

@keyframes monthSwitchValueHypnotic {

    0%,
    100% {
        opacity: 0.88;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}