/* =====================================================================
   composer/effects.css — Effect Modules (Phase 4)

   Decorative layers applied around a block. Each reads BRAND TOKENS for colour
   (rgb(var(--ds-*-rgb))) so it stays on-theme, and owns its own animation. No
   hardcoded colours/fonts/radii — token gate compliant. Effects sit behind
   content (z-index 0); block content is lifted to z-index 1.
   ===================================================================== */

.cx-fx { position: relative; isolation: isolate; overflow: hidden; }
.cx-fx > * { position: relative; z-index: 1; }
.cx-fx::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* ── Gradient mesh: drifting brand-tinted blobs ──────────────────────── */
.cx-fx--gradient-mesh::before {
  background:
    radial-gradient(42% 60% at 15% 20%, rgba(var(--ds-primary-rgb, 79,70,229), 0.18), transparent 60%),
    radial-gradient(42% 60% at 85% 15%, rgba(var(--ds-accent-rgb, 236,72,153), 0.16), transparent 60%),
    radial-gradient(52% 60% at 50% 100%, rgba(var(--ds-secondary-rgb, 99,102,241), 0.12), transparent 60%);
  filter: blur(30px);
  animation: cx-fx-drift 18s ease-in-out infinite alternate;
}
@keyframes cx-fx-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -3%, 0) scale(1.05); }
}

/* ── Aurora: animated brand sweep ────────────────────────────────────── */
.cx-fx--aurora::before {
  background: linear-gradient(120deg,
    rgba(var(--ds-primary-rgb, 79,70,229), 0.16),
    rgba(var(--ds-accent-rgb, 236,72,153), 0.16),
    rgba(var(--ds-secondary-rgb, 99,102,241), 0.16));
  background-size: 220% 220%;
  animation: cx-fx-aurora 16s ease infinite;
}
@keyframes cx-fx-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Spotlight: radial brand glow spilling from the top ──────────────── */
.cx-fx--spotlight::before {
  background:
    radial-gradient(58% 52% at 50% 0%, rgba(var(--ds-primary-rgb, 79,70,229), 0.22), transparent 70%),
    radial-gradient(40% 40% at 82% 8%, rgba(var(--ds-accent-rgb, 236,72,153), 0.12), transparent 66%);
}

/* ── Grain: static editorial speckle ─────────────────────────────────── */
.cx-fx--grain::before {
  background-image: radial-gradient(rgba(var(--ds-primary-rgb, 79,70,229), 0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.7;
}

/* Accessibility: never animate for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .cx-fx::before { animation: none !important; }
}