/* ══════════════════════════════════════════════════════════════
   WealthOS — Loading animations (pure CSS/SVG, no JS, no libs)
   On-brand alternatives to a generic spinner. Uses theme variables
   from style.css (--accent, --accent-light, --border, --font-mono)
   with hard fallbacks so it also works standalone.

   Usage:
     <span class="wos-loader wos-loader--spark" role="status" aria-label="Cargando">
       <svg viewBox="0 0 130 60" ...>…</svg>
     </span>
   Or the simplest ones need no inner markup — see each block.
   Every animation is disabled under prefers-reduced-motion.
════════════════════════════════════════════════════════════════ */

.wos-loader { display: inline-flex; align-items: center; justify-content: center; }
.wos-loader__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary, #8892a4); margin-top: 12px;
}

/* ─── 1. Self-drawing sparkline ─────────────────────────────────
   <span class="wos-loader wos-loader--spark">
     <svg width="130" height="60" viewBox="0 0 130 60" fill="none">
       <path class="wl-line" d="M4 46 L26 40 L48 44 L70 26 L92 32 L116 10"
             stroke="var(--accent,#3B82F6)" stroke-width="3"
             stroke-linecap="round" stroke-linejoin="round"/>
       <circle class="wl-tip" cx="116" cy="10" r="4.5" fill="var(--accent-light,#60A5FA)"/>
     </svg>
   </span> */
@keyframes wl-draw { to { stroke-dashoffset: 0; } }
@keyframes wl-tip  { 0%,100% { transform: translateY(0);   opacity:.5; }
                     50%     { transform: translateY(-3px); opacity: 1; } }
.wos-loader--spark .wl-line {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: wl-draw 1.6s ease-in-out infinite alternate;
}
.wos-loader--spark .wl-tip {
  transform-box: fill-box; transform-origin: center;
  animation: wl-tip 1.6s ease-in-out infinite;
}

/* ─── 2. Living bars (no inner markup needed) ───────────────────
   <span class="wos-loader wos-loader--bars" aria-label="Cargando">
     <i></i><i></i><i></i><i></i><i></i>
   </span> */
@keyframes wl-bar { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.wos-loader--bars { display: inline-flex; align-items: flex-end; gap: 6px; height: 40px; }
.wos-loader--bars i {
  width: 7px; height: 100%; border-radius: 4px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--accent-light,#60A5FA), var(--accent,#3B82F6));
  animation: wl-bar 1.1s ease-in-out infinite;
}
.wos-loader--bars i:nth-child(2){ animation-delay:.13s; }
.wos-loader--bars i:nth-child(3){ animation-delay:.26s; }
.wos-loader--bars i:nth-child(4){ animation-delay:.39s; }
.wos-loader--bars i:nth-child(5){ animation-delay:.52s; }

/* ─── 3. Coin / ring (no inner markup needed) ───────────────────
   <span class="wos-loader wos-loader--coin" aria-label="Cargando"></span>
   Renders a spinning arc ring with a pulsing $ in the center. */
@keyframes wl-spin  { to { transform: rotate(360deg); } }
@keyframes wl-pulse { 0%,100% { opacity:.35; } 50% { opacity: 1; } }
.wos-loader--coin { position: relative; width: 44px; height: 44px; }
.wos-loader--coin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid var(--border, #1e2640);
  border-top-color: var(--accent, #3B82F6);
  animation: wl-spin 1.1s cubic-bezier(.6,.1,.4,.9) infinite;
}
.wos-loader--coin::after {
  content: "$"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 17px; font-weight: 500;
  color: var(--accent-light, #60A5FA); animation: wl-pulse 1.1s ease-in-out infinite;
}

/* ─── Full-panel overlay wrapper (optional) ─────────────────────
   Drop a loader inside a panel while its data loads:
   <div class="wos-loader-panel"> …loader… </div> */
.wos-loader-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 160px; width: 100%;
}

/* ─── 4. Vault: money flowing in from many sources (hero loader) ─
   The signature loader — coins stream from 6 asset sources into a
   central bank/vault. Great for full-screen / dashboard first load.

   <div class="wos-vault" role="status" aria-label="Cargando tu patrimonio">
     <div class="wos-vault__scene">
       <span class="wos-vault__src s1">…icon…</span>  (s1…s6)
       … repeat s2–s6 …
       <span class="wos-vault__avatar">…person svg or initials…</span>
       <span class="wos-vault__coin c1"></span>       (c1…c6)
       … repeat c2–c6 …
     </div>
     <div class="wos-vault__count" data-target="2847300">MX$0</div>
     <div class="wos-vault__label">Reuniendo tu patrimonio…</div>
   </div>

   Put an inline SVG (stroke=currentColor) inside each .src for a clean,
   modern look: chart / bank / columns / building / coin / house.
   Optional count-up: see wos-vault.js snippet in the docs comment. */
.wos-vault { display:flex; flex-direction:column; align-items:center; gap:20px; }
.wos-vault__scene { position:relative; width:280px; height:200px; }
.wos-vault__src {
  position:absolute; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background: var(--bg-panel, #111525); border:1px solid var(--border, #232b45);
  color: var(--text-secondary, #8892a4);
}
.wos-vault__src svg { width:18px; height:18px; }
.wos-vault__src.s1{left:6px;top:8px}    .wos-vault__src.s2{right:6px;top:8px}
.wos-vault__src.s3{left:0;top:84px}     .wos-vault__src.s4{right:0;top:84px}
.wos-vault__src.s5{left:36px;bottom:6px}.wos-vault__src.s6{right:36px;bottom:6px}
.wos-vault__avatar {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%; display:grid; place-items:center; z-index:3; color:#fff; overflow:hidden;
  background: linear-gradient(160deg, var(--accent,#3B82F6), var(--accent-deep,#1E40AF));
  box-shadow:0 0 0 6px rgba(59,130,246,.12), 0 12px 30px rgba(59,130,246,.35);
  animation: wl-breathe 2.4s ease-in-out infinite;
}
/* head+shoulders SVG sits slightly low so the "shoulders" bleed off the circle */
.wos-vault__avatar svg { width:52px; height:52px; margin-top:8px; }
/* If the user has real initials/photo, drop them in instead of the SVG:
   <span class="wos-vault__avatar">JS</span>  → add font styles as needed. */
@keyframes wl-breathe {
  0%,100%{ box-shadow:0 0 0 6px rgba(59,130,246,.12), 0 12px 30px rgba(59,130,246,.30); }
  50%    { box-shadow:0 0 0 13px rgba(59,130,246,.05), 0 12px 34px rgba(59,130,246,.48); }
}
.wos-vault__coin {
  position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; z-index:2; opacity:0;
  background: radial-gradient(circle at 35% 30%, var(--accent-light,#60A5FA), var(--accent,#3B82F6));
  box-shadow:0 0 8px rgba(96,165,250,.6);
  display:grid; place-items:center; font:600 9px/1 var(--font-mono,monospace); color: var(--bg-sidebar,#0c0f1a);
}
.wos-vault__coin::after{ content:'$'; }
@keyframes wl-flow {
  0%{opacity:0; offset-distance:0%; transform:scale(.6)}
  12%{opacity:1; transform:scale(1)} 82%{opacity:1}
  100%{opacity:0; offset-distance:100%; transform:scale(.35)}
}
.wos-vault__coin.c1{offset-path:path('M-118 -84 L0 0');animation:wl-flow 1.7s linear infinite}
.wos-vault__coin.c2{offset-path:path('M118 -84 L0 0');animation:wl-flow 1.7s linear .28s infinite}
.wos-vault__coin.c3{offset-path:path('M-140 0 L0 0');animation:wl-flow 1.7s linear .56s infinite}
.wos-vault__coin.c4{offset-path:path('M140 0 L0 0');animation:wl-flow 1.7s linear .84s infinite}
.wos-vault__coin.c5{offset-path:path('M-96 84 L0 0');animation:wl-flow 1.7s linear 1.12s infinite}
.wos-vault__coin.c6{offset-path:path('M96 84 L0 0');animation:wl-flow 1.7s linear 1.4s infinite}
.wos-vault__count { font:500 22px/1 var(--font-mono,monospace); color: var(--text-primary,#eef0ff); text-align:center; }
.wos-vault__label { font:400 11px/1 var(--font-body,sans-serif); letter-spacing:.14em; text-transform:uppercase; color: var(--text-secondary,#8892a4); }

/* Real user initials inside the avatar (falls back to the person SVG) */
.wos-vault__initials { font:600 26px/1 var(--font-mono,monospace); letter-spacing:.04em; color:#fff; }

/* Indeterminate: gentle shimmer on the number while the total is unknown */
@keyframes wl-count-wait { 0%,100%{opacity:.4} 50%{opacity:.9} }
.wos-vault__count--wait { animation: wl-count-wait 1.3s ease-in-out infinite; }

/* Soft fade when the loader unmounts */
@keyframes wl-vault-out { to { opacity:0; transform:scale(.97); } }
.wos-vault--out { animation: wl-vault-out .4s ease forwards; }

/* Scale the 280px scene down on very small screens without overflow */
.wos-vault { max-width:100%; }
@media (max-width: 380px) {
  .wos-vault__scene { transform: scale(.8); }
  .wos-vault { gap:12px; }
}

/* offset-path fallback: coins can't travel → fade them in place near the
   avatar so the scene still reads as a static composition, not broken. */
@supports not (offset-path: path('M0 0')) {
  .wos-vault__coin { offset-distance:0 !important; }
  .wos-vault__coin.c1,.wos-vault__coin.c2,.wos-vault__coin.c3,
  .wos-vault__coin.c4,.wos-vault__coin.c5,.wos-vault__coin.c6 {
    animation: wl-pulse 1.7s ease-in-out infinite; opacity:.85;
  }
}

/* ─── Dashboard first-load overlay (hosts the vault) ─────────────── */
.dash-loading {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-base, #080b14);
  opacity: 1; transition: opacity .45s ease;
}
.dash-loading[hidden] { display: none; }
.dash-loading--out { opacity: 0; }
.dash-loading__inner { width: 100%; max-width: 320px; padding: 24px; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) {
  .dash-loading { transition: none; }
  .wos-vault--out { animation: none; }
  .wos-vault__count--wait { animation: none; opacity:.7; }
}

/* ─── Respect reduced motion everywhere ─────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .wos-loader--spark .wl-line { animation: none; stroke-dashoffset: 0; }
  .wos-loader--spark .wl-tip,
  .wos-loader--bars i,
  .wos-loader--coin::before,
  .wos-loader--coin::after,
  .wos-vault__avatar { animation: none; }
  .wos-vault__coin { animation: none; opacity:.9; offset-distance:60%; }
}