/* ============================================================
   LOADER COMPONENT  ·  v4  (the 8-phase analysis sequence, screen 7)

   v4 EVOLUTION — CANONICAL LIBRARY RULE APPLIED:
   v3 used `.loader-icon::before { animation: spinRing }` — a rotating
   ring. The Sudegy Design Intelligence Library PROHIBITS generic
   spinners and skeleton loaders, and codifies loading as an
   "object-as-light-source" warm-gold BLOOM: a luminance-driven,
   breathing halo (ease-in-out, ~2s), NEVER a rotation, NEVER the
   competitor's cool blue-white particle orb. This file replaces the
   spinner with that bloom. The mark, the 8 step rows, the .l-step/
   .done/.active classes the JS toggles, and #lbar are untouched.
   ============================================================ */
#s7 { background: transparent; justify-content: center; align-items: center; text-align: center; padding: 40px 32px; }
.loader-wrap { width: 100%; max-width: 320px; position: relative; }

/* The mark sits at the centre of a breathing gold bloom — the system
   "thinking", emitting light rather than spinning a wheel. */
.loader-icon {
  position: relative; z-index: 1;
  width: 50px; height: 50px; border-radius: var(--r-md);
  background: var(--grad-gold); color: var(--obsidian);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 30px;
  font-family: var(--ff-latin-display); font-weight: 800; font-size: 19px;
  box-shadow: var(--edge-light-strong), var(--glow-gold-md);
  animation: loaderCore var(--breath) ease-in-out infinite;
}
@keyframes loaderCore {
  0%,100% { box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(196,154,74,.22), 0 4px 18px rgba(196,154,74,.20); }
  50%     { box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(196,154,74,.30), 0 8px 30px rgba(221,184,104,.42); }
}
/* the bloom itself — soft warm light gathering and releasing */
.loader-icon::before {
  content: ''; position: absolute; inset: -38px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,184,104,.40) 0%, rgba(196,154,74,.16) 38%, transparent 68%);
  animation: loaderBloom var(--breath) ease-in-out infinite;
}
@keyframes loaderBloom {
  0%,100% { opacity: .55; transform: scale(.86); }
  50%     { opacity: 1;   transform: scale(1.12); }
}
/* a second, slower outer ring of light — depth, not rotation */
.loader-icon::after {
  content: ''; position: absolute; inset: -16px; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(221,184,104,.18);
  animation: loaderHalo 3.4s ease-in-out infinite;
}
@keyframes loaderHalo {
  0%,100% { opacity: .25; transform: scale(.95); }
  50%     { opacity: .55; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-icon, .loader-icon::before, .loader-icon::after { animation: none; }
  .loader-icon::before { opacity: .7; transform: none; }
}

.loader-title { font-family: var(--ff-display); font-size: var(--fs-xl); font-weight: 800; color: var(--snow); margin-bottom: 8px; letter-spacing: -0.01em; }
.loader-sub { font-size: var(--fs-sm); color: var(--mist-dim); margin-bottom: 44px; line-height: 1.6; }
.loader-steps { text-align: right; display: flex; flex-direction: column; gap: 11px; margin-bottom: 32px; }
[dir="ltr"] .loader-steps { text-align: left; }
.l-step { display: flex; align-items: center; gap: 12px; opacity: .2; transition: opacity .45s var(--ease-out); }
.l-step.active { opacity: 1; }
.l-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0;
  color: transparent; transition: all .4s var(--ease-out);
}
.l-step.active .l-check { border-color: var(--gold); box-shadow: 0 0 10px rgba(196,154,74,.30); }
.l-step.done .l-check { background: var(--gold); border-color: var(--gold); color: var(--obsidian); box-shadow: 0 0 12px rgba(196,154,74,.35); }
.l-text { font-size: var(--fs-sm); color: var(--mist); flex: 1; transition: color .4s var(--ease-out); }
.l-step.active .l-text { color: var(--snow); }
.loader-bar { height: 2px; background: var(--hairline-strong); overflow: hidden; border-radius: 999px; }
.loader-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); width: 0;
  transition: width .45s var(--ease-out); box-shadow: 0 0 12px rgba(221,184,104,.5);
}

/* ============================================================
   v4.2 — LOADER AS INTELLIGENCE GATHERING
   The small mark + halo becomes a large gold energy orb (canvas, see
   centerpiece.js, gather mode): particles converging, core pulsing.
   This is "intelligence thinking", never a spinner.
   ============================================================ */
.loader-orb {
  position: relative; width: min(64vw, 230px); height: min(64vw, 230px);
  margin: 0 auto 26px;
}
.loader-orb::before {
  content: ''; position: absolute; inset: -12%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(221,184,104,.30) 0%, rgba(196,154,74,.10) 42%, transparent 70%);
  animation: loaderBloom 2.6s ease-in-out infinite;
}
/* the legacy mark is replaced by the orb */
.loader-wrap .loader-icon { display: none; }
.loader-title { font-size: var(--fs-2xl); }
.loader-sub { max-width: 280px; margin-left: auto; margin-right: auto; }