/* ═══════════════════════════════════════════════
   GOURA LAUNCH CURTAIN · post-login workspace prep
   Token-only. themes.css is the single source of truth.
   ═══════════════════════════════════════════════ */

.curtain {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(130% 110% at 50% -10%, var(--hero-mid) 0%, transparent 55%),
        var(--g-nav);
    font-family: var(--font-sans);
    color: var(--inverse-text);
    position: relative;
    overflow: hidden;
    transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}

/* ambient orbs */
.curtain::before,
.curtain::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(6px);
}
.curtain::before {
    top: -14%; right: -8%;
    width: 540px; height: 540px;
    background: radial-gradient(circle, var(--hero-orb-accent) 0%, transparent 70%);
    animation: orbDrift1 14s ease-in-out infinite;
}
.curtain::after {
    bottom: -12%; left: -6%;
    width: 440px; height: 440px;
    background: radial-gradient(circle, var(--hero-orb-danger) 0%, transparent 70%);
    animation: orbDrift2 17s ease-in-out infinite;
}
@keyframes orbDrift1 {
    0%, 100% { transform: translate(0, 0) }
    50% { transform: translate(-26px, 20px) }
}
@keyframes orbDrift2 {
    0%, 100% { transform: translate(0, 0) }
    50% { transform: translate(22px, -22px) }
}

/* slow rotating aurora behind the mark */
.curtain-aurora {
    position: absolute;
    width: 720px; height: 720px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        var(--hero-orb-accent) 90deg,
        transparent 200deg,
        var(--hero-orb-info) 300deg,
        transparent 360deg);
    filter: blur(60px);
    opacity: .4;
    animation: auroraSpin 24s linear infinite;
}
@keyframes auroraSpin { to { transform: rotate(360deg) } }

/* exit animation */
.curtain.exiting { opacity: 0; transform: translateY(-8px) }
.curtain.exiting .brandmark { transform: scale(1.08) }

/* content stack */
.curtain-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    animation: contentRise .55s cubic-bezier(.22,1,.36,1) both;
}

/* ── BRAND MARK with progress ring ── */
.brandmark {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    display: grid;
    place-items: center;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.brandmark-glow {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-orb-accent) 0%, transparent 68%);
    animation: markGlow 2.6s ease-in-out infinite;
}
.brandmark-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        var(--g-create) calc(var(--p, 0) * 1%),
        var(--inverse-border) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    transition: background .5s cubic-bezier(.22,1,.36,1);
}
/* rotating highlight that travels around the ring */
.brandmark-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        transparent 0 76%,
        var(--inverse-text-strong) 87%,
        transparent 95%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    opacity: .45;
    animation: ringSweep 2.4s linear infinite;
}
.brandmark-core {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--inverse-surface-active), var(--inverse-surface-soft));
    border: 1px solid var(--inverse-border);
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 1px 0 var(--inverse-border-strong),
        0 10px 28px var(--inverse-shadow-strong);
}
.brandmark-core span {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--inverse-text-strong);
    line-height: 1;
}

/* ── TEXT ── */
.curtain-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--inverse-text-soft);
    margin: 0 0 10px;
}
.curtain-greeting {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    color: var(--inverse-text-strong);
    letter-spacing: -.3px;
    margin: 0 0 22px;
}

/* status (crossfades on each step via @key) */
.curtain-status-row {
    min-height: 18px;
    margin-bottom: 22px;
}
.curtain-status {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--inverse-text-muted);
    animation: statusIn .4s cubic-bezier(.22,1,.36,1) both;
}

/* step dots */
.curtain-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}
.cdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--inverse-border);
    background: transparent;
    transition: all .35s cubic-bezier(.22,1,.36,1);
}
.cdot.done {
    background: var(--g-ok);
    border-color: var(--g-ok);
}
.cdot.active {
    background: var(--g-create);
    border-color: var(--g-create);
    transform: scale(1.35);
    box-shadow: 0 0 12px 2px var(--hero-orb-accent);
}

/* meta line */
.curtain-meta {
    font-size: 10px;
    letter-spacing: .5px;
    color: var(--inverse-text-faint);
    margin: 0;
}

/* back link (unauthenticated state) */
.curtain-back {
    display: inline-block;
    margin-top: 18px;
    padding: 9px 18px;
    border: 1px solid var(--inverse-border);
    border-radius: var(--radius-pill);
    color: var(--inverse-text);
    font-size: 13px;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.curtain-back:hover {
    border-color: var(--inverse-border-strong);
    background: var(--inverse-surface);
}

/* ═══ ANIMATIONS ═══ */
@keyframes markGlow {
    0%, 100% { opacity: .5; transform: scale(1) }
    50% { opacity: .9; transform: scale(1.06) }
}
@keyframes ringSweep { to { transform: rotate(360deg) } }
@keyframes contentRise {
    from { opacity: 0; transform: translateY(12px) }
    to { opacity: 1; transform: translateY(0) }
}
@keyframes statusIn {
    from { opacity: 0; transform: translateY(4px) }
    to { opacity: 1; transform: translateY(0) }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
    .brandmark { width: 100px; height: 100px; margin-bottom: 24px }
    .brandmark-core { width: 70px; height: 70px }
    .brandmark-core span { font-size: 32px }
    .curtain-aurora { width: 480px; height: 480px }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    .curtain, .curtain::before, .curtain::after,
    .curtain-aurora, .brandmark-glow, .brandmark-ring::after,
    .curtain-content, .curtain-status {
        animation: none !important;
    }
    .curtain-content { opacity: 1 !important; transform: none !important }
    * { transition-duration: .01ms !important }
}

/* ═══════════════════════════════════════════════
   GOURA BUSY OVERLAY · loader branded transitorio para
   acciones in-page (Verificar / Crear / Guardar).
   Reusa el brandmark del curtain como capa flotante.
   Token-only. themes.css es la unica fuente de verdad.
   ═══════════════════════════════════════════════ */
.g-busy {
    /* SCOPED (no fullscreen): se ancla al contenedor relativo de la transaccion
       (.ws-txn-instance-body para paginas sin shell, o .gtrx-shell con shell) →
       cubre solo el cuerpo de la transaccion y deja nav/topbar/tabs usables.
       z-index por debajo de modales globales (F4/dialogs ~1000+). */
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--g-nav) 72%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(118%);
            backdrop-filter: blur(7px) saturate(118%);
    overflow: hidden;
    animation: gBusyIn .24s cubic-bezier(.22,1,.36,1) both;
}

.g-busy-aurora {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        var(--hero-orb-accent) 90deg,
        transparent 200deg,
        var(--hero-orb-info) 300deg,
        transparent 360deg);
    filter: blur(60px);
    opacity: .32;
    animation: auroraSpin 24s linear infinite;
}

.g-busy-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: contentRise .5s cubic-bezier(.22,1,.36,1) both;
}

/* mark compacto + aro indeterminado (rota en loop) */
.g-busy-mark {
    width: 96px;
    height: 96px;
    margin-bottom: 22px;
}
.g-busy-mark .brandmark-core { width: 66px; height: 66px; }
.g-busy-mark .brandmark-core span { font-size: 30px; }
.g-busy-mark .brandmark-ring { animation: gBusyRing 1.1s linear infinite; }

.g-busy-label {
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--inverse-text-muted);
    margin: 0;
    animation: statusIn .4s cubic-bezier(.22,1,.36,1) both;
}

@keyframes gBusyIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes gBusyRing { to { transform: rotate(360deg) } }

/* escotilla anti-bug: escape para que el loader nunca atrape al usuario */
.g-busy-actions {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: statusIn .4s cubic-bezier(.22,1,.36,1) both;
}
.g-busy-hint {
    font-size: 11px;
    letter-spacing: .4px;
    color: var(--inverse-text-faint);
    margin: 0;
}
.g-busy-cancel {
    appearance: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    color: var(--inverse-text);
    background: var(--inverse-surface);
    border: 1px solid var(--inverse-border);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.g-busy-cancel:hover {
    border-color: var(--g-err);
    background: var(--inverse-surface-active);
    color: var(--g-err);
}

@media (prefers-reduced-motion: reduce) {
    .g-busy, .g-busy-aurora, .g-busy-content,
    .g-busy-mark .brandmark-ring, .g-busy-label, .g-busy-actions {
        animation: none !important;
    }
}