/**
 * Organic morph-blob loader variants — preview picker only.
 * Scoped under [data-loader-variant="N"] on #lmsPageLoading.
 */

/* ── blob palette (theme-aware) ── */

:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --lms-blob-a: #60a5fa;
  --lms-blob-b: #3b82f6;
  --lms-blob-c: #818cf8;
  --lms-blob-d: #38bdf8;
  --lms-blob-e: #6366f1;
  --lms-blob-f: #2563eb;
  --lms-blob-g: #7dd3fc;
  --lms-blob-h: #93c5fd;
  --lms-blob-i: #bfdbfe;
  --lms-blob-lava-1: #f472b6;
  --lms-blob-lava-2: #a78bfa;
  --lms-blob-glow: rgba(96, 165, 250, 0.4);
  --lms-blob-glow-soft: rgba(96, 165, 250, 0.35);
  --lms-blob-halo: rgba(96, 165, 250, 0.45);
  --lms-blob-shadow: rgba(37, 99, 235, 0.4);
  --lms-blob-bubble-highlight: rgba(255, 255, 255, 0.55);
  --lms-blob-picker-panel-bg: rgba(15, 23, 42, 0.65);
  --lms-blob-picker-panel-border: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] {
  /* Same blob colors as dark — only picker chrome differs */
  --lms-blob-picker-panel-bg: var(--cui-bg, #f1f5f9);
  --lms-blob-picker-panel-border: var(--cui-border, #e2e8f0);
}

/* ── shared ── */

.lms-page-loading[data-loader-variant] .lms-page-loading__panel {
  gap: 0.9rem;
  width: min(14.5rem, 100%);
  padding: 1.5rem 1.6rem 1.35rem;
  min-height: auto;
}

.lms-page-loading[data-loader-variant] .lms-page-loading__text {
  margin: 0;
}

.lms-blob-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
}

.lms-blob-stage--wide {
  width: 4.25rem;
}

.lms-blob-stage--tall {
  height: 4rem;
}

/* base blob mixin via class */
.lms-blob {
  display: block;
  background: linear-gradient(135deg, var(--lms-blob-a) 0%, var(--lms-blob-c) 55%, var(--lms-blob-d) 100%);
  filter: drop-shadow(0 0 10px var(--lms-blob-glow-soft));
}

/* ── V1 · Aurora morph ── */

.lms-loader-v1__blob {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 58% 42% 38% 62% / 52% 48% 52% 48%;
  animation: lms-blob-morph-a 2.6s ease-in-out infinite;
}

@keyframes lms-blob-morph-a {
  0%, 100% { border-radius: 58% 42% 38% 62% / 52% 48% 52% 48%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 42% 58% 64% 36% / 48% 56% 44% 52%; transform: rotate(120deg) scale(1.04); }
  66% { border-radius: 36% 64% 42% 58% / 56% 42% 58% 44%; transform: rotate(240deg) scale(0.96); }
}

/* ── V2 · Twin fuse ── */

.lms-loader-v2__pair {
  position: relative;
  width: 3.75rem;
  height: 2.5rem;
}

.lms-loader-v2__blob {
  position: absolute;
  top: 50%;
  width: 1.55rem;
  height: 1.55rem;
  margin-top: -0.775rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--lms-blob-a), var(--lms-blob-b));
  filter: drop-shadow(0 0 8px var(--lms-blob-glow));
  animation: lms-blob-fuse 1.8s ease-in-out infinite;
}

.lms-loader-v2__blob--a { left: 0.15rem; }
.lms-loader-v2__blob--b { right: 0.15rem; animation-delay: -0.9s; }

@keyframes lms-blob-fuse {
  0%, 100% { transform: translateX(0) scale(1); border-radius: 50%; }
  50% { transform: translateX(0.55rem) scale(1.12); border-radius: 45% 55% 52% 48% / 48% 52% 48% 52%; }
}

.lms-loader-v2__blob--b {
  animation-name: lms-blob-fuse-b;
}

@keyframes lms-blob-fuse-b {
  0%, 100% { transform: translateX(0) scale(1); border-radius: 50%; }
  50% { transform: translateX(-0.55rem) scale(1.12); border-radius: 55% 45% 48% 52% / 52% 48% 52% 48%; }
}

/* ── V3 · Halo core ── */

.lms-loader-v3__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lms-blob-halo) 0%, transparent 68%);
  animation: lms-blob-halo 2.2s ease-in-out infinite;
}

.lms-loader-v3__core {
  position: relative;
  z-index: 1;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 48% 52% 54% 46% / 52% 46% 54% 48%;
  background: linear-gradient(135deg, var(--lms-blob-a), var(--lms-blob-e));
  filter: drop-shadow(0 0 12px var(--lms-blob-glow));
  animation: lms-blob-morph-b 2s ease-in-out infinite;
}

@keyframes lms-blob-halo {
  0%, 100% { transform: scale(0.85); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0.95; }
}

@keyframes lms-blob-morph-b {
  0%, 100% { border-radius: 48% 52% 54% 46% / 52% 46% 54% 48%; }
  50% { border-radius: 54% 46% 48% 52% / 46% 54% 46% 54%; }
}

/* ── V4 · Liquid droplet ── */

.lms-loader-v4__drop {
  width: 2rem;
  height: 2.85rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--lms-blob-g) 0%, var(--lms-blob-b) 55%, var(--lms-blob-f) 100%);
  filter: drop-shadow(0 4px 14px var(--lms-blob-shadow));
  animation: lms-blob-drop 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes lms-blob-drop {
  0%, 100% { transform: scaleY(1) scaleX(1); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
  35% { transform: scaleY(1.14) scaleX(0.88); border-radius: 48% 52% 42% 58% / 68% 68% 32% 32%; }
  70% { transform: scaleY(0.92) scaleX(1.08); border-radius: 52% 48% 55% 45% / 55% 55% 45% 45%; }
}

/* ── V5 · Stretch pulse ── */

.lms-loader-v5__stretch {
  width: 2.75rem;
  height: 2.1rem;
  border-radius: 62% 38% 42% 58% / 48% 58% 42% 52%;
  background: linear-gradient(120deg, var(--lms-blob-a), var(--lms-blob-c));
  filter: drop-shadow(0 0 10px var(--lms-blob-glow-soft));
  animation: lms-blob-stretch 2.1s ease-in-out infinite;
}

@keyframes lms-blob-stretch {
  0%, 100% { transform: scaleX(1) scaleY(1); border-radius: 62% 38% 42% 58% / 48% 58% 42% 52%; }
  50% { transform: scaleX(1.28) scaleY(0.82); border-radius: 38% 62% 58% 42% / 58% 42% 58% 42%; }
}

/* ── V6 · Trio dance ── */

.lms-loader-v6__trio {
  position: relative;
  width: 3.25rem;
  height: 3rem;
}

.lms-loader-v6__dot {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lms-blob-a), var(--lms-blob-d));
  filter: drop-shadow(0 0 6px var(--lms-blob-glow));
  animation: lms-blob-trio 2.4s ease-in-out infinite;
}

.lms-loader-v6__dot:nth-child(1) { top: 0; left: 50%; margin-left: -0.55rem; }
.lms-loader-v6__dot:nth-child(2) { bottom: 0.1rem; left: 0.15rem; animation-delay: -0.8s; }
.lms-loader-v6__dot:nth-child(3) { bottom: 0.1rem; right: 0.15rem; animation-delay: -1.6s; }

@keyframes lms-blob-trio {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
  33% { transform: translate(0, 0.35rem) scale(1.15); border-radius: 46% 54% 52% 48% / 48% 52% 46% 54%; }
  66% { transform: translate(0, -0.2rem) scale(0.9); border-radius: 54% 46% 48% 52% / 52% 48% 54% 46%; }
}

/* ── V7 · Lava shift ── */

.lms-loader-v7__lava {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%;
  background: linear-gradient(
    120deg,
    var(--lms-blob-lava-1) 0%,
    var(--lms-blob-c) 25%,
    var(--lms-blob-d) 50%,
    var(--lms-blob-a) 75%,
    var(--lms-blob-lava-2) 100%
  );
  background-size: 220% 220%;
  filter: drop-shadow(0 0 12px var(--lms-blob-glow-soft));
  animation: lms-blob-lava 3s ease-in-out infinite, lms-blob-morph-c 2.8s ease-in-out infinite;
}

@keyframes lms-blob-lava {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes lms-blob-morph-c {
  0%, 100% { border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%; transform: rotate(0deg); }
  50% { border-radius: 56% 44% 48% 52% / 44% 56% 44% 56%; transform: rotate(180deg); }
}

/* ── V8 · Soft merge (metaball) ── */

.lms-loader-v8__merge {
  position: relative;
  width: 3.5rem;
  height: 2.5rem;
  filter: blur(0.35px);
}

.lms-loader-v8__ball {
  position: absolute;
  top: 50%;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.875rem;
  border-radius: 50%;
  background: var(--lms-blob-a);
  animation: lms-blob-merge 2s ease-in-out infinite;
}

.lms-loader-v8__ball--a { left: 0.35rem; }
.lms-loader-v8__ball--b { right: 0.35rem; background: var(--lms-blob-c); animation-delay: -1s; }

@keyframes lms-blob-merge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.65rem); }
}

.lms-loader-v8__ball--b {
  animation-name: lms-blob-merge-b;
}

@keyframes lms-blob-merge-b {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-0.65rem); }
}

/* ── V9 · Spin morph (original favourite) ── */

.lms-loader-v9__blob {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 42% 58% 62% 38% / 48% 42% 58% 52%;
  background: linear-gradient(135deg, var(--lms-blob-a), var(--lms-blob-c));
  filter: drop-shadow(0 0 12px var(--lms-blob-glow));
  animation: lms-blob-spin-morph 2.8s ease-in-out infinite;
}

@keyframes lms-blob-spin-morph {
  0%, 100% { border-radius: 42% 58% 62% 38% / 48% 42% 58% 52%; transform: rotate(0deg); }
  33% { border-radius: 58% 42% 38% 62% / 52% 58% 42% 48%; transform: rotate(120deg); }
  66% { border-radius: 38% 62% 58% 42% / 42% 52% 48% 58%; transform: rotate(240deg); }
}

/* ── V10 · Donut morph ── */

.lms-loader-v10__ring {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: conic-gradient(from 0deg, var(--lms-blob-a), var(--lms-blob-c), var(--lms-blob-d), var(--lms-blob-a));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.72rem), #000 calc(100% - 0.68rem));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.72rem), #000 calc(100% - 0.68rem));
  filter: drop-shadow(0 0 10px var(--lms-blob-glow-soft));
  animation: lms-blob-donut 2.6s ease-in-out infinite;
}

@keyframes lms-blob-donut {
  0%, 100% { border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 52% 48% 46% 54% / 48% 52% 46% 54%; transform: rotate(180deg) scale(1.06); }
}

/* ── V11 · Bubble rise ── */

.lms-loader-v11__stack {
  position: relative;
  width: 2.5rem;
  height: 3.25rem;
}

.lms-loader-v11__bubble {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lms-blob-bubble-highlight), transparent 42%),
    linear-gradient(145deg, var(--lms-blob-g), var(--lms-blob-b));
  filter: drop-shadow(0 2px 8px var(--lms-blob-shadow));
  animation: lms-blob-rise 2.2s ease-in-out infinite;
}

.lms-loader-v11__bubble:nth-child(1) {
  bottom: 0;
  width: 1.65rem;
  height: 1.65rem;
  margin-left: -0.825rem;
}

.lms-loader-v11__bubble:nth-child(2) {
  bottom: 0.85rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: -0.575rem;
  animation-delay: -0.7s;
  opacity: 0.85;
}

.lms-loader-v11__bubble:nth-child(3) {
  bottom: 1.55rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: -0.4rem;
  animation-delay: -1.4s;
  opacity: 0.7;
}

@keyframes lms-blob-rise {
  0%, 100% { transform: translateY(0) scale(1); border-radius: 50%; }
  50% { transform: translateY(-0.45rem) scale(1.08); border-radius: 46% 54% 50% 50% / 48% 52% 48% 52%; }
}

/* ── V12 · Petal bloom ── */

.lms-loader-v12__bloom {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
}

.lms-loader-v12__petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1.35rem;
  margin: -0.675rem 0 0 -0.5rem;
  border-radius: 50% 50% 42% 58% / 55% 55% 45% 45%;
  background: linear-gradient(160deg, var(--lms-blob-h), var(--lms-blob-b));
  filter: drop-shadow(0 0 6px var(--lms-blob-glow-soft));
  transform-origin: center 1.35rem;
  animation: lms-blob-petal-scale 2.4s ease-in-out infinite;
}

.lms-loader-v12__petal:nth-child(1) { --petal-rot: 0deg; }
.lms-loader-v12__petal:nth-child(2) { --petal-rot: 90deg; animation-delay: -0.6s; }
.lms-loader-v12__petal:nth-child(3) { --petal-rot: 180deg; animation-delay: -1.2s; }
.lms-loader-v12__petal:nth-child(4) { --petal-rot: 270deg; animation-delay: -1.8s; }

.lms-loader-v12__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%;
  background: var(--lms-blob-i);
  box-shadow: 0 0 10px var(--lms-blob-glow);
  animation: lms-blob-morph-b 1.8s ease-in-out infinite;
}

@keyframes lms-blob-petal-scale {
  0%, 100% { transform: rotate(var(--petal-rot, 0deg)) scale(1); }
  50% { transform: rotate(var(--petal-rot, 0deg)) scale(1.18); }
}

/* ── Picker gallery ── */

.loader-picker {
  max-width: 72rem;
  margin: 0 auto;
}

.loader-picker__intro {
  margin-bottom: 1.75rem;
}

.loader-picker__intro h1 {
  margin: 0 0 0.5rem;
  font-size: 1.65rem;
  color: var(--cui-heading, #f8fafc);
}

.loader-picker__intro p {
  margin: 0;
  color: var(--cui-text-muted, #94a3b8);
  line-height: 1.6;
}

.loader-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .loader-picker__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.loader-picker__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.15rem 0.85rem 1rem;
  border: 1px solid var(--cui-border, rgba(148, 163, 184, 0.2));
  border-radius: 1rem;
  background: var(--cui-surface, #111827);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  font: inherit;
  color: inherit;
  text-align: center;
}

.loader-picker__tile:hover,
.loader-picker__tile.is-selected {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), 0 12px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

html[data-theme="light"] .loader-picker__tile:hover,
html[data-theme="light"] .loader-picker__tile.is-selected {
  border-color: var(--cui-soft-border, rgba(37, 99, 235, 0.35));
  box-shadow: 0 0 0 1px var(--cui-soft-border, rgba(37, 99, 235, 0.14)), var(--cui-shadow-hover, 0 2px 8px rgba(37, 99, 235, 0.14));
}

.loader-picker__tile.is-selected {
  background: rgba(37, 99, 235, 0.08);
}

html[data-theme="light"] .loader-picker__tile.is-selected {
  background: var(--cui-soft-bg, rgba(37, 99, 235, 0.06));
}

.loader-picker__num {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: var(--cui-accent, #2563eb);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.loader-picker__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.75rem;
  width: 100%;
  padding-top: 0.5rem;
}

.loader-picker__mini-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 4.25rem;
  min-width: 5.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--lms-blob-picker-panel-bg);
  border: 1px solid var(--lms-blob-picker-panel-border);
}

.loader-picker__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cui-heading, #f8fafc);
}

.loader-picker__desc {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--cui-text-muted, #94a3b8);
}

.loader-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.75rem;
  align-items: center;
}

.loader-picker__chosen {
  flex: 1;
  min-width: 12rem;
  font-size: 0.9rem;
  color: var(--cui-text-muted, #94a3b8);
}

.loader-picker__chosen strong {
  color: var(--cui-heading, #f8fafc);
}

html[data-theme="light"] .loader-picker__mini-panel {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

/* blob overlay panel in light mode */
html[data-theme="light"] .lms-page-loading[data-loader-variant] .lms-page-loading__panel {
  background: var(--cui-surface, #ffffff);
  border-color: var(--cui-border, #e2e8f0);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 16px 36px rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .lms-page-loading[data-loader-variant] .lms-page-loading__panel::before {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.14),
    rgba(255, 255, 255, 0.6) 45%,
    rgba(30, 58, 138, 0.1) 100%
  );
  opacity: 0.75;
}

html[data-theme="light"] .lms-page-loading[data-loader-variant] .lms-page-loading__text {
  color: var(--cui-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  [class*="lms-loader-v"] *,
  [class*="lms-loader-v"] {
    animation: none !important;
  }
}