/* ============================================================
   ParsinX — Backgrounds
   Animated backdrop presets + image/scrim helpers. Use via the
   Backdrop component, or apply the .px-bg-* class to any element.
   All presets are theme-aware and respect prefers-reduced-motion.
   ============================================================ */

/* ---- Backdrop scaffolding ---- */
.px-backdrop { position: relative; isolation: isolate; }
.px-backdrop__layer {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--surface-app);
}
.px-backdrop.is-fixed .px-backdrop__layer { position: fixed; }
.px-backdrop__content { position: relative; z-index: 1; }

/* Image fill + legibility scrim */
.px-bg-photo {
  position: absolute; inset: 0;
  background-image: var(--px-bg-image);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.px-backdrop__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-app) 55%, transparent) 0%,
      color-mix(in srgb, var(--surface-app) 78%, transparent) 100%);
}

/* ============================================================
   ANIMATED PRESETS  (each self-contained — base fill + glow layers)
   ============================================================ */

/* --- 1. Aurora: two big glow blobs drifting --- */
.px-bg-aurora { background: var(--surface-app); position: relative; overflow: hidden; }
.px-bg-aurora::before, .px-bg-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: var(--px-bg-strength, 0.8); will-change: transform;
}
.px-bg-aurora::before {
  width: 60%; height: 70%; top: -15%; inset-inline-start: -10%;
  background: radial-gradient(circle, var(--px-azure) 0%, transparent 70%);
  animation: px-aurora-a 18s var(--ease-in-out) infinite;
}
.px-bg-aurora::after {
  width: 55%; height: 65%; bottom: -20%; inset-inline-end: -5%;
  background: radial-gradient(circle, var(--px-violet) 0%, transparent 70%);
  animation: px-aurora-b 22s var(--ease-in-out) infinite;
}
@keyframes px-aurora-a {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(18%, 12%) scale(1.18); }
}
@keyframes px-aurora-b {
  0%,100% { transform: translate(0,0) scale(1.1); }
  50%     { transform: translate(-14%, -10%) scale(1); }
}

/* --- 2. Mesh: multi-stop gradient mesh, slow hue drift via position --- */
.px-bg-mesh {
  background:
    radial-gradient(40% 50% at 18% 22%, color-mix(in srgb,var(--px-azure) 55%, transparent), transparent),
    radial-gradient(45% 55% at 82% 18%, color-mix(in srgb,var(--px-violet) 50%, transparent), transparent),
    radial-gradient(50% 60% at 60% 88%, color-mix(in srgb,var(--px-cyan) 42%, transparent), transparent),
    radial-gradient(40% 50% at 95% 70%, color-mix(in srgb,var(--px-magenta) 38%, transparent), transparent),
    var(--surface-app);
  background-size: 200% 200%;
  animation: px-mesh-drift 26s var(--ease-in-out) infinite;
}
@keyframes px-mesh-drift {
  0%,100% { background-position: 0% 0%, 100% 0%, 50% 100%, 100% 60%, 0 0; }
  50%     { background-position: 20% 30%, 70% 20%, 40% 70%, 80% 40%, 0 0; }
}

/* --- 3. Grid: tech grid + sweeping glow band --- */
.px-bg-grid {
  background:
    linear-gradient(color-mix(in srgb,var(--px-azure) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--px-azure) 14%, transparent) 1px, transparent 1px),
    var(--surface-app);
  background-size: 46px 46px, 46px 46px, 100% 100%;
}
.px-bg-grid::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb,var(--px-azure) 30%, transparent), transparent 70%);
  animation: px-grid-sweep 9s var(--ease-in-out) infinite;
}
@keyframes px-grid-sweep {
  0%,100% { transform: translateY(-12%); opacity: .7; }
  50%     { transform: translateY(40%);  opacity: 1; }
}

/* --- 4. Orbs: three floating blurred orbs --- */
.px-bg-orbs { background: var(--surface-app); }
.px-bg-orbs .px-orb {
  position: absolute; border-radius: 50%; filter: blur(48px);
  opacity: var(--px-bg-strength, 0.55); will-change: transform;
}

/* --- 5. Beams: diagonal light beams sweeping --- */
.px-bg-beams {
  background: var(--surface-app);
  background-image: repeating-linear-gradient(115deg,
      transparent 0, transparent 60px,
      color-mix(in srgb,var(--px-azure) 10%, transparent) 60px,
      color-mix(in srgb,var(--px-azure) 10%, transparent) 62px,
      transparent 62px, transparent 130px,
      color-mix(in srgb,var(--px-cyan) 8%, transparent) 130px,
      color-mix(in srgb,var(--px-cyan) 8%, transparent) 132px);
  background-size: 200% 100%;
  animation: px-beams-slide 14s linear infinite;
}
.px-bg-beams::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 20%, color-mix(in srgb,var(--px-violet) 22%, transparent), transparent 65%);
}
@keyframes px-beams-slide {
  to { background-position: 200% 0; }
}

/* ---- Light theme: soften animated presets on white ---- */
[data-theme="light"] .px-bg-aurora::before,
[data-theme="light"] .px-bg-aurora::after { opacity: var(--px-bg-strength, 0.4); }
[data-theme="light"] .px-bg-orbs .px-orb { opacity: var(--px-bg-strength, 0.32); }
[data-theme="light"] .px-bg-mesh { filter: saturate(0.9); }

@media (prefers-reduced-motion: reduce) {
  .px-bg-aurora::before, .px-bg-aurora::after,
  .px-bg-mesh, .px-bg-grid::before, .px-bg-beams,
  .px-bg-orbs .px-orb { animation: none !important; }
}