/*
 * Mular CRM preloader — the parts Bootstrap has no classes for.
 * ---------------------------------------------------------------
 * Layout, spacing, shapes and type come from Bootstrap classes in the markup
 * (index.html boot preloader and src/components/Preloader.jsx), and the font
 * is Bootstrap's body font. This file only adds: brand colours per theme, the
 * frosted veil + blurred aurora, the orbit geometry and its animations.
 * Bootstrap's CSS is linked before this file in index.html, so both are in
 * place on first paint. Theme comes from html[data-theme].
 */

.mc-preloader {
  --mc-navy: #003a66;
  --mc-green: #35870f;
  --mc-mint: #cbffb3;
  --mc-white: #ffffff;

  /* Light theme */
  --pl-veil: rgba(244, 247, 251, 0.74);
  --pl-track: rgba(0, 58, 102, 0.1);
  --pl-arc-1: var(--mc-green);
  --pl-arc-2: var(--mc-navy);
  --pl-arc-3: #7fd65a; /* mint deepened just enough to read on a light veil */
  --pl-dot-1: var(--mc-green);
  --pl-dot-2: var(--mc-navy);
  --pl-dot-3: var(--mc-white);
  --pl-dot-edge: 0 0 0 2px rgba(0, 58, 102, 0.22), 0 2px 6px rgba(0, 58, 102, 0.28);
  --pl-core-bg: radial-gradient(circle at 30% 25%, #ffffff 0%, #ffffff 55%, #f1f6fb 100%);
  --pl-core-ring: rgba(0, 58, 102, 0.08);
  --pl-core-shadow: 0 18px 40px -16px rgba(0, 58, 102, 0.45), 0 2px 6px rgba(0, 58, 102, 0.08);
  --pl-pulse: var(--mc-green);
  --pl-glow-a: rgba(53, 135, 15, 0.26);
  --pl-glow-b: rgba(0, 58, 102, 0.22);
  --pl-glow-c: rgba(203, 255, 179, 0.55);
  /* Bootstrap text colour inside the preloader (used by .text-body-secondary). */
  --bs-secondary-color: #4a5a6e;
  --bs-border-width: 1px;

  z-index: 2000; /* above everything, including modals (Bootstrap's z-* stops at 3) */
  background: var(--pl-veil);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  animation: mc-pl-in 0.35s ease both;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

[data-theme='dark'] .mc-preloader {
  --pl-veil: rgba(5, 10, 19, 0.78);
  --pl-track: rgba(255, 255, 255, 0.08);
  --pl-arc-1: var(--mc-mint);
  --pl-arc-2: var(--mc-white);
  --pl-arc-3: var(--mc-green);
  --pl-dot-1: var(--mc-mint);
  --pl-dot-2: var(--mc-white);
  --pl-dot-3: var(--mc-green);
  --pl-dot-edge: 0 0 10px rgba(203, 255, 179, 0.55);
  --pl-core-bg: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.03) 100%);
  --pl-core-ring: rgba(255, 255, 255, 0.14);
  --pl-core-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --pl-pulse: var(--mc-mint);
  --pl-glow-a: rgba(53, 135, 15, 0.34);
  --pl-glow-b: rgba(0, 58, 102, 0.75);
  --pl-glow-c: rgba(203, 255, 179, 0.16);
  --bs-secondary-color: rgba(255, 255, 255, 0.72);
}

/* Boot preloader (index.html): nothing has rendered behind it yet, so it gets
   a solid base instead of a veil over the browser's white page. */
#app-preloader {
  background-color: #f4f7fb;
}

[data-theme='dark'] #app-preloader {
  background-color: #060a13;
}

/* Aurora: brand-colour glows, heavily blurred, drifting slowly. */
.mc-preloader::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(32% 32% at 32% 38%, var(--pl-glow-a), transparent 70%),
    radial-gradient(36% 36% at 68% 62%, var(--pl-glow-b), transparent 70%),
    radial-gradient(26% 26% at 58% 30%, var(--pl-glow-c), transparent 70%);
  filter: blur(48px);
  animation: mc-pl-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.mc-preloader.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.mc-preloader.is-leaving .mc-pl-stage {
  transform: scale(1.06);
  opacity: 0;
}

.mc-pl-stage {
  transition: transform 0.45s ease, opacity 0.45s ease;
  animation: mc-pl-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ── Orbit geometry ───────────────────────────────────────────────────── */
.mc-pl-orbit {
  --s: 11.5rem;
  width: var(--s);
  height: var(--s);
}

.mc-pl-track { --bs-border-color: var(--pl-track); }
.mc-pl-track-1, .mc-pl-arc-1, .mc-pl-carrier-1, .mc-pl-carrier-4 { inset: 0; }
.mc-pl-track-2, .mc-pl-arc-2, .mc-pl-carrier-2 { inset: 11%; }
.mc-pl-track-3, .mc-pl-arc-3, .mc-pl-carrier-3 { inset: 22%; }

/* Comet arc: a conic gradient trimmed to a thin ring, spinning. */
.mc-pl-arc {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: mc-pl-spin linear infinite;
}

.mc-pl-arc-1 {
  background: conic-gradient(from 0deg, transparent 0 58%, var(--pl-arc-1) 100%);
  animation-duration: 2.4s;
}

.mc-pl-arc-2 {
  /* Spins anticlockwise, so the bright head is at the start of the sweep. */
  background: conic-gradient(from 180deg, var(--pl-arc-2) 0%, transparent 40% 100%);
  animation-duration: 3.2s;
  animation-direction: reverse;
}

.mc-pl-arc-3 {
  background: conic-gradient(from 90deg, transparent 0 55%, var(--pl-arc-3) 100%);
  animation-duration: 1.9s;
}

/* Orbiting dots: a carrier the size of its track spins; the dot rides its
   top (Bootstrap's top-0 start-50 translate-middle), starting at the arc head. */
.mc-pl-carrier { animation: mc-pl-spin linear infinite; }
.mc-pl-carrier-1 { animation-duration: 2.4s; }
.mc-pl-carrier-2 { transform: rotate(180deg); animation: mc-pl-spin-from-180 3.2s linear infinite reverse; }
.mc-pl-carrier-3 { transform: rotate(90deg); animation: mc-pl-spin-from-90 1.9s linear infinite; }
.mc-pl-carrier-4 { animation-duration: 6s; animation-direction: reverse; }

.mc-pl-dot { width: 0.7rem; height: 0.7rem; }
.mc-pl-carrier-1 .mc-pl-dot { background: var(--pl-dot-1); box-shadow: 0 0 12px var(--pl-dot-1); }
.mc-pl-carrier-2 .mc-pl-dot { background: var(--pl-dot-2); box-shadow: 0 0 10px var(--pl-dot-2); width: 0.6rem; height: 0.6rem; }
.mc-pl-carrier-3 .mc-pl-dot { background: var(--pl-dot-3); box-shadow: var(--pl-dot-edge); width: 0.55rem; height: 0.55rem; }
/* A small white satellite drifting the other way round the outer track. */
.mc-pl-carrier-4 .mc-pl-dot { background: var(--mc-white); box-shadow: var(--pl-dot-edge); width: 0.42rem; height: 0.42rem; }

/* ── Glass disc + logo mark ───────────────────────────────────────────── */
.mc-pl-core {
  inset: 29%;
  background: var(--pl-core-bg);
  box-shadow: 0 0 0 1px var(--pl-core-ring), var(--pl-core-shadow);
  animation: mc-pl-breathe 2.4s ease-in-out infinite;
}

/* Soft pulse ring radiating from the disc. */
.mc-pl-core::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--pl-pulse);
  opacity: 0;
  animation: mc-pl-pulse 2.4s ease-out infinite;
}

.mc-pl-mark { width: 70%; height: auto; user-select: none; -webkit-user-drag: none; }
.mc-pl-wordmark { height: 1.5rem; width: auto; }

/* Full-colour art in light, reversed art in dark. (Bootstrap's own colour
   modes key off data-bs-theme; this app themes with data-theme.) */
.mc-preloader .mc-pl-art-dark,
[data-theme='dark'] .mc-preloader .mc-pl-art-light { display: none !important; }
[data-theme='dark'] .mc-preloader .mc-pl-art-dark { display: block !important; }

/* Bouncing status dots in brand colours. */
.mc-pl-dots span { width: 0.375rem; height: 0.375rem; animation: mc-pl-bounce 1.2s ease-in-out infinite; }
.mc-pl-dots span:nth-child(1) { background: var(--pl-dot-2); }
.mc-pl-dots span:nth-child(2) { background: var(--pl-dot-1); animation-delay: 0.15s; }
.mc-pl-dots span:nth-child(3) { background: var(--pl-arc-3); animation-delay: 0.3s; }

@media (max-width: 575.98px) {
  .mc-pl-orbit { --s: 8.75rem; }
  .mc-pl-wordmark { height: 1.3rem; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */
@keyframes mc-pl-spin { to { transform: rotate(360deg); } }
@keyframes mc-pl-spin-from-180 { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
@keyframes mc-pl-spin-from-90 { from { transform: rotate(90deg); } to { transform: rotate(450deg); } }
@keyframes mc-pl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes mc-pl-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes mc-pl-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes mc-pl-drift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08); } }
@keyframes mc-pl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mc-pl-rise { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mc-preloader::before,
  .mc-pl-arc,
  .mc-pl-carrier,
  .mc-pl-core,
  .mc-pl-core::after,
  .mc-pl-stage {
    animation: none;
  }
  .mc-pl-dots span { animation-duration: 2.4s; }
}