/* ============================================================
   SHARED LOADING POPUP
   Path: public/css/sys-common/loading-popup.css
   ============================================================ */

body.studio-loading-popup-open { overflow: hidden; }
.studio-loading-popup[hidden] { display: none; }
.studio-loading-popup { position: fixed; z-index: 1400; inset: 0; display: grid; place-items: center; padding: 20px; }
.studio-loading-popup__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-primary) 56%, transparent); backdrop-filter: blur(9px); opacity: 0; transition: opacity 220ms ease; }
.studio-loading-popup__dialog { position: relative; width: min(100%, 430px); padding: 34px 34px 30px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent); border-radius: 24px; outline: 0; background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 98%, var(--color-white)), var(--color-bg)); box-shadow: 0 18px 50px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 4px 14px color-mix(in srgb, var(--color-primary) 6%, transparent); opacity: 0; text-align: center; transform: translateY(16px) scale(.985); transition: opacity 220ms ease, transform 340ms cubic-bezier(.22, 1, .36, 1); }
.studio-loading-popup.is-open .studio-loading-popup__backdrop,
.studio-loading-popup.is-open .studio-loading-popup__dialog { opacity: 1; }
.studio-loading-popup.is-open .studio-loading-popup__dialog { transform: translateY(0) scale(1); }
.studio-loading-popup__eyebrow { margin: 0 0 22px; color: var(--color-clay); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.studio-loading-popup__visual { position: relative; display: grid; width: 70px; height: 70px; place-items: center; margin: 0 auto 22px; }
.studio-loading-popup__orbit { position: absolute; inset: 2px; border: 2px solid color-mix(in srgb, var(--color-clay) 14%, transparent); border-radius: 50%; }
.studio-loading-popup__visual.is-loading .studio-loading-popup__orbit::before { position: absolute; inset: -2px; border: 2px solid transparent; border-top-color: var(--color-clay); border-right-color: color-mix(in srgb, var(--color-clay) 48%, transparent); border-radius: 50%; content: ""; animation: studio-loading-spin 820ms linear infinite; }
.studio-loading-popup__core { position: relative; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-clay) 7%, var(--color-surface)); color: transparent; font-size: 19px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-clay) 16%, transparent), 0 8px 24px color-mix(in srgb, var(--color-primary) 5%, transparent); transition: background-color 240ms ease, color 240ms ease, transform 240ms ease; }
.studio-loading-popup__glyph { color: var(--color-clay); font-family: var(--font-mono); font-size: 15px; font-weight: 600; animation: studio-loading-breathe 1.4s ease-in-out infinite; }
.studio-loading-popup__core i { position: absolute; opacity: 0; }
.studio-loading-popup__visual.is-success .studio-loading-popup__orbit { border-color: color-mix(in srgb, var(--color-sage) 64%, var(--color-surface)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-sage) 9%, transparent); animation: studio-success-ring 700ms cubic-bezier(.22, 1, .36, 1) both; }
.studio-loading-popup__visual.is-success .studio-loading-popup__core { background: linear-gradient(145deg, color-mix(in srgb, var(--color-secondary-container) 88%, #ffffff), #ffffff); color: color-mix(in srgb, var(--color-sage) 82%, var(--color-primary)); box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-sage) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-sage) 46%, transparent); animation: studio-success-core 650ms cubic-bezier(.2, 1.7, .4, 1) both; }
.studio-loading-popup__visual.is-success .studio-loading-popup__glyph,
.studio-loading-popup__visual.is-error .studio-loading-popup__glyph { display: none; }
.studio-loading-popup__visual.is-success .studio-loading-popup__core i,
.studio-loading-popup__visual.is-error .studio-loading-popup__core i { opacity: 1; }
.studio-loading-popup__visual.is-success .studio-loading-popup__core i { animation: studio-success-check 520ms 120ms cubic-bezier(.22, 1, .36, 1) both; }
.studio-loading-popup__visual.is-error .studio-loading-popup__orbit { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }
.studio-loading-popup__visual.is-error .studio-loading-popup__core { background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); color: var(--color-danger); }
.studio-loading-popup__dialog h2 { margin: 0; color: var(--color-primary-dark); font-size: 24px; letter-spacing: -.02em; line-height: 1.18; }
.studio-loading-popup__message { min-height: 44px; max-width: 340px; margin: 9px auto 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
.studio-loading-popup__close { display: inline-flex; align-items: center; justify-content: center; min-width: 148px; min-height: 46px; margin: 18px auto 0; padding: 0 24px; border: 1px solid var(--color-primary); border-radius: var(--radius-btn); background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; }

@keyframes studio-loading-spin { to { transform: rotate(360deg); } }
@keyframes studio-loading-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes studio-success-ring { 0% { opacity: 0; transform: scale(.55); } 65% { opacity: 1; transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes studio-success-core { 0% { opacity: 0; transform: scale(.45) rotate(-16deg); } 70% { opacity: 1; transform: scale(1.14) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes studio-success-check { from { opacity: 0; transform: translateY(5px) scale(.2) rotate(-24deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }

@media (max-width: 450px) {
    .studio-loading-popup__dialog { padding: 28px 20px 24px; border-radius: 20px; }
    .studio-loading-popup__dialog h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-loading-popup__backdrop,
    .studio-loading-popup__dialog,
    .studio-loading-popup__core { transition: none; }
    .studio-loading-popup__visual.is-loading .studio-loading-popup__orbit::before,
    .studio-loading-popup__glyph,
    .studio-loading-popup__visual.is-success .studio-loading-popup__orbit,
    .studio-loading-popup__visual.is-success .studio-loading-popup__core,
    .studio-loading-popup__visual.is-success .studio-loading-popup__core i { animation: none; }
}