/* global-spinner-theme.css — Spinner overlays & submit-progress animations.
   Extracted from calendar-theme-active.css during 2026-05 decomposition.
   Redesigned to match the page-preloader warm-gradient aesthetic. */

/* Default hypnotic spinner keeps the compact ring-only presentation. */
#globalSpinner.global-spinner--hypnotic:not(.global-spinner--submit-progress) .global-spinner__progress {
    display: none;
}

#globalSpinner.global-spinner--hypnotic:not(.global-spinner--submit-progress) .global-spinner__track {
    stroke: transparent;
}

#globalSpinner.global-spinner--hypnotic:not(.global-spinner--submit-progress) .global-spinner__glow {
    animation: none !important;
    filter: none !important;
    transition: stroke-dashoffset 1000ms linear;
}

#globalSpinner.global-spinner--hypnotic:not(.global-spinner--submit-progress) .global-spinner__ring-wrap {
    animation: none !important;
    transform: none !important;
}

#globalSpinner.global-spinner--hypnotic:not(.global-spinner--submit-progress) .global-spinner__ring-wrap::after {
    content: none !important;
    animation: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   FORM SUBMIT SPINNER — warm gradient overlay matching page preloader
   ───────────────────────────────────────────────────────────────────── */

/* Override the overlay background to use the branded gradient */
#globalSpinner.global-spinner--submit-progress {
    background:
        linear-gradient(146deg, rgba(255, 255, 255, 0.12) 0%, transparent 26%),
        linear-gradient(326deg, transparent 10%, rgba(255, 255, 255, 0.08) 40%, transparent 78%),
        radial-gradient(120% 120% at 50% 100%, #D4B89A 0%, #8B6F5A 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hide the horizontal progress bar — ring is the only indicator */
#globalSpinner.global-spinner--submit-progress .global-spinner__progress {
    display: none !important;
}

/* Ring wrap: gentle breathing + subtle outer glow halo */
#globalSpinner.global-spinner--submit-progress .global-spinner__ring-wrap {
    width: 7.4rem;
    height: 7.4rem;
    animation: gsSubmitRingBreathe 3s ease-in-out infinite !important;
    transform-origin: 50% 50%;
    overflow: visible;
    isolation: isolate;
}

/* Soft pulse glow behind the ring */
#globalSpinner.global-spinner--submit-progress .global-spinner__ring-wrap::after {
    content: '' !important;
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 72%);
    animation: gsSubmitPulseGlow 2.4s ease-in-out infinite !important;
    pointer-events: none;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    mix-blend-mode: normal;
    transform: none;
    opacity: 1;
    z-index: 0;
}

/* Remove the second sonar pseudo-element */
#globalSpinner.global-spinner--submit-progress .global-spinner__ring-wrap::before {
    content: none !important;
}

/* Track circle — subtle faint white ring */
#globalSpinner.global-spinner--submit-progress .global-spinner__track {
    display: block !important;
    stroke: rgba(255, 255, 255, 0.18) !important;
    stroke-width: 6 !important;
    fill: transparent;
}

/* Progress arc — fills as % increases */
#globalSpinner.global-spinner--submit-progress .global-spinner__glow {
    stroke: rgba(255, 255, 255, 0.92) !important;
    stroke-width: 6 !important;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) !important;
    animation: gsSubmitArcGlow 2.6s ease-in-out infinite !important;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform-origin: 60px 60px;
}

#globalSpinner.global-spinner--submit-progress .global-spinner__svg {
    z-index: 2;
}

/* Percentage value inside the ring */
#globalSpinner.global-spinner--submit-progress .global-spinner__value {
    z-index: 3;
    display: grid !important;
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.32) !important;
    animation: gsSubmitValueBreathe 2.6s ease-in-out infinite;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Meta label below the ring */
#globalSpinner.global-spinner--submit-progress .global-spinner__meta {
    display: block;
    margin: 0.6rem 0 0;
    color: rgba(255, 255, 255, 0.68) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
    font-family: 'Lato', sans-serif;
    font-size: clamp(0.72rem, 2.4vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: none !important;
}

/* ─── Non-submit-progress overlay palette (month switch, default global) ─── */
.month-switch-overlay,
.global-spinner {
    background: rgba(86, 63, 46, 0.3) !important;
    backdrop-filter: blur(12px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
}

.month-switch-overlay__track,
.global-spinner__track {
    stroke: transparent !important;
    display: none !important;
}

.month-switch-overlay__fill,
.global-spinner__glow {
    stroke: rgba(255, 248, 239, 0.96) !important;
    filter: drop-shadow(0 0 10px rgba(184, 146, 111, 0.28)) !important;
}

.month-switch-overlay__value,
.global-spinner__value,
.global-spinner__meta {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* ────── @keyframes for the new submit spinner ────── */

@keyframes gsSubmitRingBreathe {
    0%, 100% { transform: scale(0.98); }
    50%      { transform: scale(1.03); }
}

@keyframes gsSubmitArcGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.65));
    }
}

@keyframes gsSubmitPulseGlow {
    0%, 100% { transform: scale(0.92); opacity: 0.4; }
    50%      { transform: scale(1.12); opacity: 1; }
}

@keyframes gsSubmitValueBreathe {
    0%, 100% { opacity: 0.88; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

/* ─── Legacy animations kept for non-submit hypnotic states ─── */

@keyframes globalSpinnerSubmitRingBreathe {
    0%, 100% { transform: scale(0.988); }
    50%      { transform: scale(1.028); }
}

@keyframes globalSpinnerSubmitGlowBreathe {
    0%, 100% {
        transform: scale(0.992);
        filter: drop-shadow(0 0 0.4rem rgba(255, 255, 255, 0.18)) drop-shadow(0 0 0.88rem rgba(255, 255, 255, 0.08));
    }
    50% {
        transform: scale(1.024);
        filter: drop-shadow(0 0 0.62rem rgba(255, 255, 255, 0.28)) drop-shadow(0 0 1.3rem rgba(255, 255, 255, 0.14));
    }
}

@keyframes globalSpinnerSubmitHaloBreathe {
    0%, 100% { transform: scale(0.94); opacity: 0.14; }
    50%      { transform: scale(1.035); opacity: 0.28; }
}

@keyframes globalSpinnerSubmitTrackBreathe {
    0%, 100% {
        transform: scaleX(0.992) scaleY(1);
        box-shadow: inset 0 0.16rem 0.38rem rgba(0, 0, 0, 0.2), 0 0 0.8rem rgba(255, 255, 255, 0.06);
    }
    50% {
        transform: scaleX(1) scaleY(1.08);
        box-shadow: inset 0 0.16rem 0.38rem rgba(0, 0, 0, 0.18), 0 0 1.08rem rgba(255, 255, 255, 0.1);
    }
}

@keyframes globalSpinnerSubmitFillBreathe {
    0%, 100% { opacity: 0.9; transform: scaleY(1); }
    50%      { opacity: 1;   transform: scaleY(1.14); }
}

@keyframes globalSpinnerSubmitValueBreathe {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.032); }
}

@keyframes globalSpinnerSubmitSonarWave {
    0% {
        transform: translate(-50%, -50%) scale(0.05);
        opacity: 0;
        border-color: rgba(255, 255, 255, 0.44);
    }
    12%  { opacity: 0.34; }
    46%  { opacity: 0.2; }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-color: rgba(255, 255, 255, 0.02);
    }
}