/* Two stacked animated layers behind the content. Themes pick one via data-bg. */
.wb-root::before, .wb-root::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.wb-root[data-bg="none"]::before, .wb-root[data-bg="none"]::after { content: none; }

/* ---- blobs: soft floating circles (sticker 4b, spa 5b) ---- */
.wb-root[data-bg="blobs"]::before {
  width: 200px; height: 200px; left: -40px; bottom: 120px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wb-accent) 45%, #fff);
  opacity: .55; filter: blur(6px);
  animation: wb-float 12s ease-in-out infinite;
}
.wb-root[data-bg="blobs"]::after {
  width: 150px; height: 150px; right: -30px; top: 200px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wb-accent) 25%, #fff);
  opacity: .7; filter: blur(6px);
  animation: wb-float 16s ease-in-out infinite reverse;
}
@keyframes wb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -26px); }
}
/* on dark cards the pastel blobs turn into dimmer glows */
.wb-root.mode-dark[data-bg="blobs"]::before { opacity: .22; }
.wb-root.mode-dark[data-bg="blobs"]::after { opacity: .18; }

/* ---- escaneo: scanlines + mesh glow (brutalista 4c) ---- */
.wb-root[data-bg="escaneo"]::before {
  /* oversized strip animated with transform (GPU-composited); animating
     background-position instead repaints the full viewport every frame */
  inset: 0 0 -224px 0;
  background-image: linear-gradient(color-mix(in srgb, var(--wb-accent) 10%, transparent) 1px, transparent 1px);
  background-size: 100% 8px;
  animation: wb-scan 20s linear infinite;
}
.wb-root[data-bg="escaneo"]::after {
  width: 300px; height: 300px; left: 50%; margin-left: -150px; top: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--wb-accent) 30%, transparent), transparent 70%);
  filter: blur(22px);
  animation: wb-mesh 20s ease-in-out infinite;
}
@keyframes wb-scan { from { transform: translateY(0); } to { transform: translateY(-224px); } }
@keyframes wb-mesh {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(6%, -5%) scale(1.15); }
  66% { transform: translate(-5%, 5%) scale(1.05); }
}

/* ---- mesh: glow only (available to any theme) ---- */
.wb-root[data-bg="mesh"]::before {
  width: 320px; height: 320px; left: -80px; bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--wb-accent) 28%, transparent), transparent 70%);
  filter: blur(22px);
  animation: wb-mesh 20s ease-in-out infinite;
}
.wb-root[data-bg="mesh"]::after { display: none; }

/* ---- cromo: counter-rotating conic gradients (cromo 5a) ---- */
.wb-root[data-bg="cromo"]::before {
  width: 420px; height: 420px; left: -90px; top: -120px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #DCEBFF, #8FBEFF, var(--wb-accent), #BFD9FF, #DCEBFF);
  filter: blur(34px); opacity: .55;
  animation: wb-spin 26s linear infinite;
}
.wb-root[data-bg="cromo"]::after {
  width: 300px; height: 300px; right: -110px; bottom: 90px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--wb-accent), #9DC7FF, #E6F0FF, var(--wb-accent));
  filter: blur(32px); opacity: .4;
  animation: wb-spin 34s linear infinite reverse;
}
@keyframes wb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }