/* assets/css/vault-loader.css
   ─────────────────────────────────────────────────────────────────────────
   Global loading feedback: nothing in the app should ever look frozen.

   Three layers, deliberately staged so fast actions never flash:
     1. Top progress bar  — appears immediately on navigation / slow fetch.
     2. Navigation scrim  — only after ~140ms, for genuinely slow page loads.
     3. Button busy state — inline spinner on the control you actually clicked.

   Everything animates on transform/opacity only, so it stays on the GPU and
   cannot cause layout thrash mid-navigation.

   Skeletons extend the existing `.skeleton` + `shimmer` in design-system.css
   rather than introducing a competing system.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Top progress bar ─────────────────────────────────────────────────── */
#vault-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2147483000;          /* above modals, below nothing */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#vault-progress.active { opacity: 1; }

#vault-progress .vp-bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;      /* grow from the left */
    background: linear-gradient(90deg, #00E599 0%, #3b82f6 60%, #6366f1 100%);
    box-shadow: 0 0 12px rgba(0, 229, 153, 0.55), 0 0 4px rgba(59, 130, 246, 0.5);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* ── 2. Navigation scrim ─────────────────────────────────────────────────── */
#vault-nav-veil {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 7, 18, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    pointer-events: none;         /* never trap clicks if it lingers */
}
#vault-nav-veil.active { opacity: 1; visibility: visible; }

#vault-nav-veil .vnv-ring {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: #00E599;
    border-bottom-color: #3b82f6;
    animation: vaultNavSpin 0.9s linear infinite;
}
@keyframes vaultNavSpin { to { transform: rotate(360deg); } }

/* ── 3. Button busy state ────────────────────────────────────────────────── */
.vault-busy {
    position: relative !important;
    pointer-events: none;         /* blocks the double-submit */
    opacity: 0.75;
}
.vault-busy > * { opacity: 0.45; }
.vault-busy::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: vaultNavSpin 0.7s linear infinite;
    opacity: 1;
}

/* ── 4. Skeletons ────────────────────────────────────────────────────────── */
/* `.skeleton` (design-system.css) supplies the shimmer; these are the shapes.
   Kept as its own namespace so they compose with any module's own styles. */
.vsk {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
    display: block;
}
.vsk-line    { height: 12px; margin-bottom: 10px; }
.vsk-line.w90{ width: 90%; } .vsk-line.w75{ width: 75%; }
.vsk-line.w60{ width: 60%; } .vsk-line.w40{ width: 40%; }
.vsk-title   { height: 20px; width: 45%; margin-bottom: 14px; border-radius: 6px; }
.vsk-avatar  { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.vsk-thumb   { width: 100%; height: 110px; border-radius: 12px; margin-bottom: 12px; }

.vsk-card {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 20px;
    background: rgba(255,255,255,0.02);
}
.vsk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.vsk-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vsk-row .vsk-body { flex: 1; min-width: 0; }
.vsk-row .vsk-line:last-child { margin-bottom: 0; }

/* Content fading in once its skeleton is swapped out. */
.vault-fade-in {
    animation: vaultFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vaultFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Lazy images: hold space, then fade in when decoded (no pop-in jank). */
img.vault-lazy {
    opacity: 0;
    transition: opacity 0.35s ease;
    background: rgba(255,255,255,0.03);
}
img.vault-lazy.vault-loaded { opacity: 1; }

/* ── 5. Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #vault-progress .vp-bar,
    #vault-nav-veil,
    .vault-fade-in,
    img.vault-lazy { transition: none; animation: none; }
    #vault-nav-veil .vnv-ring,
    .vault-busy::after { animation-duration: 1.6s; }
    .vsk { animation: none; }
}