/* Velixo page loader and section spinners for app.velixo.market. */
.vx-loader { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(ellipse 50% 40% at 50% 46%, rgba(255, 107, 53, 0.16), rgba(255, 62, 108, 0.06) 55%, transparent 80%), #060608; transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease; animation: vx-out 0.5s ease 8s forwards; }
.vx-loader.vx-out { opacity: 0; visibility: hidden; transform: scale(1.03); pointer-events: none; }
.vx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vx-mark { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.vx-mark img { width: 44px; height: 44px; position: relative; filter: drop-shadow(0 0 18px rgba(255, 107, 53, 0.55)); animation: vx-pulse 1.8s ease-in-out infinite; }
.vx-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 18%, #ff6b35 45%, #ff3e6c 75%, #00f0ff 96%, transparent 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: vx-spin 1.1s linear infinite; }
.vx-ring::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: inherit; filter: blur(14px); opacity: 0.45; }
.vx-words { height: 1.15em; overflow: hidden; font: 600 clamp(40px, 9vw, 64px)/1.15 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.01em; }
.vx-roll { display: flex; flex-direction: column; animation: vx-roll 3.6s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.vx-roll span { display: block; height: 1.15em; text-align: center; background: linear-gradient(90deg, #ff6b35, #ff3e6c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vx-bar { width: min(220px, 60vw); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vx-bar span { display: block; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff6b35, #ff3e6c, transparent); animation: vx-sweep 1.2s ease-in-out infinite; }

.vx-loader.vx-rh { background: radial-gradient(ellipse 50% 40% at 50% 46%, rgba(204, 255, 0, 0.12), transparent 75%), #060608; }
.vx-rh .vx-ring { background: conic-gradient(from 0deg, transparent 0 18%, #8fb300 50%, #ccff00 96%, transparent 100%); }
.vx-rh .vx-mark img { filter: drop-shadow(0 0 18px rgba(204, 255, 0, 0.45)); }
.vx-rh .vx-roll span { background: linear-gradient(90deg, #ccff00, #e9ff8a); -webkit-background-clip: text; background-clip: text; }
.vx-rh .vx-bar span { background: linear-gradient(90deg, transparent, #ccff00, transparent); }
.vx-loader.vx-light { background: radial-gradient(ellipse 50% 40% at 50% 46%, rgba(255, 107, 53, 0.14), transparent 75%), #f6f5f2; }
.vx-loader.vx-rh.vx-light { background: radial-gradient(ellipse 50% 40% at 50% 46%, rgba(204, 255, 0, 0.22), transparent 75%), #f6f5f2; }
.vx-light .vx-bar { background: rgba(0, 0, 0, 0.08); }
.vx-rh.vx-light .vx-roll span { background: linear-gradient(90deg, #4a6300, #6b8c00); -webkit-background-clip: text; background-clip: text; }
.vx-rh.vx-light .vx-bar span { background: linear-gradient(90deg, transparent, #6b8c00, transparent); }

/* Section spinners on every page */
.loading-spinner { width: 40px; height: 40px; border: 0 !important; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 18%, #ff6b35 45%, #ff3e6c 75%, #00f0ff 96%, transparent 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: vx-spin 0.9s linear infinite; margin: 0 auto 14px; }
body.rh .loading-spinner { background: conic-gradient(from 0deg, transparent 0 18%, #8fb300 50%, #ccff00 96%, transparent 100%); }
body.rh.light-mode .loading-spinner { background: conic-gradient(from 0deg, transparent 0 18%, #6b8c00 50%, #4a6300 96%, transparent 100%); }
.loading { font-size: 14px; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--text3, #7e7e96) 30%, var(--text, #eeeef0) 50%, var(--text3, #7e7e96) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: vx-shine 1.8s linear infinite; }

@keyframes vx-spin { to { transform: rotate(360deg); } }
@keyframes vx-pulse { 50% { transform: scale(0.92); } }
@keyframes vx-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes vx-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes vx-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes vx-roll {
  0%, 25% { transform: translateY(0); }
  33%, 58% { transform: translateY(-1.15em); }
  66%, 91% { transform: translateY(-2.3em); }
  100% { transform: translateY(-3.45em); }
}

@media (prefers-reduced-motion: reduce) {
  .vx-ring, .vx-mark img, .vx-roll, .vx-bar span, .loading { animation: none; }
  .loading-spinner { animation-duration: 2.4s; }
  .vx-loader { animation: vx-out 0s linear 8s forwards; }
}