@elsapiens/styles 0.1.0

package/dist/backgrounds.css

@@ -0,0 +1,892 @@
+/* @elsapiens/sdk Animated Backgrounds
+ *
+ * Visible animated backgrounds with large floating shapes.
+ * Apply these classes to create atmospheric depth.
+ *
+ * Available backgrounds:
+ * - .el-bg-aurora - Large flowing aurora bands
+ * - .el-bg-mesh - Large floating gradient orbs
+ * - .el-bg-waves - Flowing wave curves
+ * - .el-bg-glow - Pulsing glow orbs
+ * - .el-bg-dots - Floating dot pattern
+ * - .el-bg-gradient-shift - Color shifting gradient
+ * - .el-bg-northern-lights - Dramatic aurora effect
+ * - .el-bg-particles - Floating particles
+ * - .el-bg-blobs - Large moving blob shapes
+ *
+ * For fixed backgrounds that don't scroll with content,
+ * apply the class to a fixed wrapper element or use
+ * background-attachment: fixed on the body.
+ */
+
+/* ============================================
+   Aurora / Northern Lights Effect
+   Large flowing gradient bands
+   ============================================ */
+.el-bg-aurora {
+  position: relative;
+  }
+
+.el-bg-aurora::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.5;
+  background:
+    radial-gradient(ellipse 80% 50% at 20% 30%, hsl(var(--wisteria-400)) 0%, transparent 50%),
+    radial-gradient(ellipse 60% 70% at 70% 60%, hsl(var(--wisteria-500)) 0%, transparent 50%),
+    radial-gradient(ellipse 90% 40% at 50% 80%, hsl(var(--wisteria-300)) 0%, transparent 50%);
+  animation: aurora-drift 15s ease-in-out infinite;
+  filter: blur(40px);
+}
+
+.el-bg-aurora::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background:
+    radial-gradient(ellipse 70% 60% at 80% 20%, hsl(var(--wisteria-300) / 0.5) 0%, transparent 50%),
+    radial-gradient(ellipse 50% 80% at 30% 70%, hsl(var(--wisteria-500) / 0.4) 0%, transparent 50%);
+  animation: aurora-drift 20s ease-in-out infinite reverse;
+  filter: blur(40px);
+}
+
+@keyframes aurora-drift {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(5%, -3%) scale(1.05);
+  }
+  50% {
+    transform: translate(-3%, 5%) scale(1.1);
+  }
+  75% {
+    transform: translate(-5%, -2%) scale(1.02);
+  }
+}
+
+.dark .el-bg-aurora::before {
+  opacity: 0.35;
+}
+
+.dark .el-bg-aurora::after {
+  opacity: 0.3;
+}
+
+/* ============================================
+   Mesh Gradient Background
+   Large floating gradient orbs that drift around
+   ============================================ */
+.el-bg-mesh {
+  position: relative;
+  }
+
+.el-bg-mesh::before {
+  content: '';
+  position: fixed;
+  width: 700px;
+  height: 700px;
+  top: -150px;
+  left: -100px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.4;
+  background: radial-gradient(circle, hsl(var(--wisteria-400)) 0%, transparent 70%);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: mesh-orb-1 25s ease-in-out infinite;
+}
+
+.el-bg-mesh::after {
+  content: '';
+  position: fixed;
+  width: 600px;
+  height: 600px;
+  bottom: -100px;
+  right: -50px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.35;
+  background: radial-gradient(circle, hsl(var(--wisteria-500)) 0%, transparent 70%);
+  border-radius: 50%;
+  filter: blur(50px);
+  animation: mesh-orb-2 30s ease-in-out infinite;
+}
+
+@keyframes mesh-orb-1 {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(100px, 80px) scale(1.2);
+  }
+  66% {
+    transform: translate(-50px, 120px) scale(0.9);
+  }
+}
+
+@keyframes mesh-orb-2 {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(-80px, -100px) scale(1.1);
+  }
+  66% {
+    transform: translate(60px, -60px) scale(1.15);
+  }
+}
+
+.dark .el-bg-mesh::before {
+  opacity: 0.5;
+}
+
+.dark .el-bg-mesh::after {
+  opacity: 0.45;
+}
+
+/* ============================================
+   Wave Animation
+   Large flowing curves that sweep across
+   ============================================ */
+.el-bg-waves {
+  position: relative;
+  }
+
+.el-bg-waves::before {
+  content: '';
+  position: fixed;
+  width: 200%;
+  height: 500px;
+  bottom: -50px;
+  left: -50%;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.35;
+  background:
+    radial-gradient(ellipse 40% 100% at 20% 100%, hsl(var(--wisteria-400)) 0%, transparent 70%),
+    radial-gradient(ellipse 50% 100% at 60% 100%, hsl(var(--wisteria-500)) 0%, transparent 70%),
+    radial-gradient(ellipse 35% 100% at 90% 100%, hsl(var(--wisteria-300)) 0%, transparent 70%);
+  filter: blur(40px);
+  animation: wave-sweep 12s ease-in-out infinite;
+}
+
+.el-bg-waves::after {
+  content: '';
+  position: fixed;
+  width: 150%;
+  height: 400px;
+  top: -50px;
+  left: -25%;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.3;
+  background:
+    radial-gradient(ellipse 60% 100% at 30% 0%, hsl(var(--wisteria-300)) 0%, transparent 60%),
+    radial-gradient(ellipse 40% 100% at 80% 0%, hsl(var(--wisteria-500)) 0%, transparent 60%);
+  filter: blur(50px);
+  animation: wave-sweep-top 15s ease-in-out infinite reverse;
+}
+
+@keyframes wave-sweep {
+  0%, 100% {
+    transform: translateX(0) scaleY(1);
+  }
+  50% {
+    transform: translateX(10%) scaleY(1.2);
+  }
+}
+
+@keyframes wave-sweep-top {
+  0%, 100% {
+    transform: translateX(0) scaleY(1);
+  }
+  50% {
+    transform: translateX(-8%) scaleY(1.15);
+  }
+}
+
+.dark .el-bg-waves::before {
+  opacity: 0.45;
+}
+
+.dark .el-bg-waves::after {
+  opacity: 0.4;
+}
+
+/* ============================================
+   Glow Effect
+   Large pulsing orbs in corners
+   ============================================ */
+.el-bg-glow {
+  position: relative;
+  }
+
+.el-bg-glow::before {
+  content: '';
+  position: fixed;
+  width: 500px;
+  height: 500px;
+  top: -200px;
+  right: -150px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background: radial-gradient(circle, hsl(var(--wisteria-400)) 0%, transparent 50%);
+  border-radius: 50%;
+  filter: blur(50px);
+  animation: glow-pulse 6s ease-in-out infinite;
+}
+
+.el-bg-glow::after {
+  content: '';
+  position: fixed;
+  width: 400px;
+  height: 400px;
+  bottom: -100px;
+  left: -100px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.15;
+  background: radial-gradient(circle, hsl(var(--wisteria-500)) 0%, transparent 50%);
+  border-radius: 50%;
+  filter: blur(40px);
+  animation: glow-pulse 8s ease-in-out infinite 3s;
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.2;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 0.35;
+  }
+}
+
+.dark .el-bg-glow::before,
+.dark .el-bg-glow::after {
+  opacity: 0.3;
+}
+
+/* ============================================
+   Animated Dots Pattern
+   Large dots that slowly float
+   ============================================ */
+.el-bg-dots {
+  position: relative;
+  }
+
+.el-bg-dots::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.25;
+  background-image:
+    radial-gradient(circle at 4px 4px, hsl(var(--wisteria-400)) 4px, transparent 4px);
+  background-size: 50px 50px;
+  animation: dots-float 50s linear infinite;
+}
+
+.el-bg-dots::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background-image:
+    radial-gradient(circle at 3px 3px, hsl(var(--wisteria-500)) 3px, transparent 3px);
+  background-size: 70px 70px;
+  animation: dots-float 70s linear infinite reverse;
+}
+
+@keyframes dots-float {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(60px, 60px);
+  }
+}
+
+.dark .el-bg-dots::before {
+  opacity: 0.35;
+}
+
+.dark .el-bg-dots::after {
+  opacity: 0.3;
+}
+
+/* ============================================
+   Gradient Shift
+   Large color bands that shift and move
+   ============================================ */
+.el-bg-gradient-shift {
+  position: relative;
+  }
+
+.el-bg-gradient-shift::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.15;
+  background: linear-gradient(
+    135deg,
+    hsl(var(--wisteria-300) / 0.8) 0%,
+    hsl(var(--wisteria-400) / 0.6) 25%,
+    transparent 50%,
+    hsl(var(--wisteria-500) / 0.6) 75%,
+    hsl(var(--wisteria-400) / 0.8) 100%
+  );
+  background-size: 200% 200%;
+  animation: gradient-shift 20s ease infinite;
+}
+
+.el-bg-gradient-shift::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.1;
+  background: linear-gradient(
+    -45deg,
+    transparent 0%,
+    hsl(var(--wisteria-400) / 0.5) 30%,
+    transparent 50%,
+    hsl(var(--wisteria-300) / 0.5) 70%,
+    transparent 100%
+  );
+  background-size: 200% 200%;
+  animation: gradient-shift 25s ease infinite reverse;
+}
+
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 0%;
+  }
+  25% {
+    background-position: 100% 0%;
+  }
+  50% {
+    background-position: 100% 100%;
+  }
+  75% {
+    background-position: 0% 100%;
+  }
+}
+
+.dark .el-bg-gradient-shift::before {
+  opacity: 0.22;
+}
+
+.dark .el-bg-gradient-shift::after {
+  opacity: 0.15;
+}
+
+/* ============================================
+   Northern Lights Full Effect
+   Dramatic large aurora bands
+   ============================================ */
+.el-bg-northern-lights {
+  position: relative;
+  }
+
+.el-bg-northern-lights::before {
+  content: '';
+  position: fixed;
+  width: 150%;
+  height: 100%;
+  top: 0;
+  left: -25%;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.25;
+  background:
+    radial-gradient(ellipse 100% 50% at 30% 20%, hsl(160 70% 45% / 0.6) 0%, transparent 50%),
+    radial-gradient(ellipse 80% 60% at 60% 40%, hsl(var(--wisteria-400) / 0.7) 0%, transparent 50%),
+    radial-gradient(ellipse 90% 40% at 80% 70%, hsl(280 70% 55% / 0.5) 0%, transparent 50%);
+  filter: blur(80px);
+  animation: northern-lights-dance 12s ease-in-out infinite;
+}
+
+.el-bg-northern-lights::after {
+  content: '';
+  position: fixed;
+  width: 120%;
+  height: 80%;
+  top: 10%;
+  left: -10%;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background:
+    radial-gradient(ellipse 60% 80% at 25% 50%, hsl(var(--wisteria-300) / 0.6) 0%, transparent 50%),
+    radial-gradient(ellipse 70% 50% at 75% 30%, hsl(200 70% 50% / 0.5) 0%, transparent 50%);
+  filter: blur(60px);
+  animation: northern-lights-shimmer 10s ease-in-out infinite 2s;
+}
+
+@keyframes northern-lights-dance {
+  0%, 100% {
+    transform: translateY(0) scaleY(1) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-30px) scaleY(1.1) rotate(1deg);
+  }
+  50% {
+    transform: translateY(20px) scaleY(0.95) rotate(-1deg);
+  }
+  75% {
+    transform: translateY(-15px) scaleY(1.05) rotate(0.5deg);
+  }
+}
+
+@keyframes northern-lights-shimmer {
+  0%, 100% {
+    transform: translateX(0) scale(1);
+    opacity: 0.2;
+  }
+  50% {
+    transform: translateX(30px) scale(1.1);
+    opacity: 0.35;
+  }
+}
+
+.dark .el-bg-northern-lights::before {
+  opacity: 0.4;
+}
+
+.dark .el-bg-northern-lights::after {
+  opacity: 0.35;
+}
+
+/* ============================================
+   Particles Effect
+   Larger floating orbs that drift
+   ============================================ */
+.el-bg-particles {
+  position: relative;
+  }
+
+.el-bg-particles::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle 80px at 10% 20%, hsl(var(--wisteria-400) / 0.3) 0%, transparent 100%),
+    radial-gradient(circle 60px at 30% 70%, hsl(var(--wisteria-500) / 0.25) 0%, transparent 100%),
+    radial-gradient(circle 100px at 70% 30%, hsl(var(--wisteria-300) / 0.3) 0%, transparent 100%),
+    radial-gradient(circle 50px at 85% 80%, hsl(var(--wisteria-400) / 0.2) 0%, transparent 100%),
+    radial-gradient(circle 70px at 50% 50%, hsl(var(--wisteria-500) / 0.2) 0%, transparent 100%);
+  filter: blur(20px);
+  animation: particles-drift 30s ease-in-out infinite;
+}
+
+.el-bg-particles::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle 90px at 20% 80%, hsl(var(--wisteria-300) / 0.25) 0%, transparent 100%),
+    radial-gradient(circle 70px at 60% 15%, hsl(var(--wisteria-500) / 0.2) 0%, transparent 100%),
+    radial-gradient(circle 55px at 90% 50%, hsl(var(--wisteria-400) / 0.25) 0%, transparent 100%);
+  filter: blur(25px);
+  animation: particles-drift-reverse 40s ease-in-out infinite;
+}
+
+@keyframes particles-drift {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(30px, -20px);
+  }
+  50% {
+    transform: translate(-20px, 30px);
+  }
+  75% {
+    transform: translate(15px, 15px);
+  }
+}
+
+@keyframes particles-drift-reverse {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(-25px, 25px);
+  }
+  50% {
+    transform: translate(35px, -15px);
+  }
+  75% {
+    transform: translate(-10px, -30px);
+  }
+}
+
+.dark .el-bg-particles::before {
+  opacity: 1;
+  background:
+    radial-gradient(circle 80px at 10% 20%, hsl(var(--wisteria-400) / 0.4) 0%, transparent 100%),
+    radial-gradient(circle 60px at 30% 70%, hsl(var(--wisteria-500) / 0.35) 0%, transparent 100%),
+    radial-gradient(circle 100px at 70% 30%, hsl(var(--wisteria-300) / 0.4) 0%, transparent 100%),
+    radial-gradient(circle 50px at 85% 80%, hsl(var(--wisteria-400) / 0.3) 0%, transparent 100%),
+    radial-gradient(circle 70px at 50% 50%, hsl(var(--wisteria-500) / 0.3) 0%, transparent 100%);
+}
+
+.dark .el-bg-particles::after {
+  opacity: 1;
+  background:
+    radial-gradient(circle 90px at 20% 80%, hsl(var(--wisteria-300) / 0.35) 0%, transparent 100%),
+    radial-gradient(circle 70px at 60% 15%, hsl(var(--wisteria-500) / 0.3) 0%, transparent 100%),
+    radial-gradient(circle 55px at 90% 50%, hsl(var(--wisteria-400) / 0.35) 0%, transparent 100%);
+}
+
+/* ============================================
+   Blobs Effect - Large morphing shapes
+   ============================================ */
+.el-bg-blobs {
+  position: relative;
+  }
+
+.el-bg-blobs::before {
+  content: '';
+  position: fixed;
+  width: 500px;
+  height: 400px;
+  top: -100px;
+  left: -100px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background: hsl(var(--wisteria-400));
+  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+  filter: blur(60px);
+  animation: blob-morph-1 20s ease-in-out infinite;
+}
+
+.el-bg-blobs::after {
+  content: '';
+  position: fixed;
+  width: 450px;
+  height: 350px;
+  bottom: -80px;
+  right: -80px;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.18;
+  background: hsl(var(--wisteria-500));
+  border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
+  filter: blur(50px);
+  animation: blob-morph-2 25s ease-in-out infinite;
+}
+
+@keyframes blob-morph-1 {
+  0%, 100% {
+    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    transform: translate(50px, 30px) rotate(5deg);
+  }
+  50% {
+    border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
+    transform: translate(20px, 80px) rotate(-5deg);
+  }
+  75% {
+    border-radius: 40% 50% 60% 50% / 60% 50% 40% 50%;
+    transform: translate(-30px, 40px) rotate(3deg);
+  }
+}
+
+@keyframes blob-morph-2 {
+  0%, 100% {
+    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    border-radius: 70% 30% 50% 50% / 30% 50% 70% 50%;
+    transform: translate(-40px, -50px) rotate(-4deg);
+  }
+  50% {
+    border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
+    transform: translate(-80px, -20px) rotate(6deg);
+  }
+  75% {
+    border-radius: 30% 70% 60% 40% / 50% 60% 40% 60%;
+    transform: translate(-20px, -60px) rotate(-3deg);
+  }
+}
+
+.dark .el-bg-blobs::before {
+  opacity: 0.3;
+}
+
+.dark .el-bg-blobs::after {
+  opacity: 0.28;
+}
+
+/* ============================================
+   Network Effect - Delicate constellation pattern
+   Small dots connected by thin lines that drift
+   ============================================ */
+.el-bg-network {
+  position: relative;
+  }
+
+.el-bg-network::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.4;
+  background:
+    /* Small dots - nodes */
+    radial-gradient(circle 3px at 12% 18%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 28% 12%, hsl(var(--wisteria-500)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 45% 22%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 62% 15%, hsl(var(--wisteria-300)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 78% 28%, hsl(var(--wisteria-500)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 88% 18%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 18% 42%, hsl(var(--wisteria-300)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 35% 48%, hsl(var(--wisteria-500)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 55% 38%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 72% 52%, hsl(var(--wisteria-300)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 85% 45%, hsl(var(--wisteria-500)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 22% 68%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 42% 72%, hsl(var(--wisteria-300)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 58% 65%, hsl(var(--wisteria-500)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 75% 78%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 92% 72%, hsl(var(--wisteria-300)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 15% 88%, hsl(var(--wisteria-500)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 38% 92%, hsl(var(--wisteria-400)) 0%, transparent 100%),
+    radial-gradient(circle 3px at 65% 85%, hsl(var(--wisteria-300)) 0%, transparent 100%),
+    radial-gradient(circle 2px at 82% 95%, hsl(var(--wisteria-500)) 0%, transparent 100%);
+  animation: network-drift 20s ease-in-out infinite;
+}
+
+.el-bg-network::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background:
+    /* Thin connecting lines */
+    linear-gradient(125deg, transparent 11.5%, hsl(var(--wisteria-400) / 0.6) 12%, hsl(var(--wisteria-400) / 0.6) 12.05%, transparent 12.5%),
+    linear-gradient(65deg, transparent 27.5%, hsl(var(--wisteria-500) / 0.5) 28%, hsl(var(--wisteria-500) / 0.5) 28.05%, transparent 28.5%),
+    linear-gradient(155deg, transparent 44.5%, hsl(var(--wisteria-300) / 0.5) 45%, hsl(var(--wisteria-300) / 0.5) 45.05%, transparent 45.5%),
+    linear-gradient(85deg, transparent 38.5%, hsl(var(--wisteria-400) / 0.4) 39%, hsl(var(--wisteria-400) / 0.4) 39.05%, transparent 39.5%),
+    linear-gradient(175deg, transparent 62.5%, hsl(var(--wisteria-500) / 0.5) 63%, hsl(var(--wisteria-500) / 0.5) 63.05%, transparent 63.5%),
+    linear-gradient(35deg, transparent 55.5%, hsl(var(--wisteria-300) / 0.4) 56%, hsl(var(--wisteria-300) / 0.4) 56.05%, transparent 56.5%),
+    linear-gradient(115deg, transparent 71.5%, hsl(var(--wisteria-400) / 0.5) 72%, hsl(var(--wisteria-400) / 0.5) 72.05%, transparent 72.5%),
+    linear-gradient(145deg, transparent 82.5%, hsl(var(--wisteria-500) / 0.4) 83%, hsl(var(--wisteria-500) / 0.4) 83.05%, transparent 83.5%);
+  animation: network-drift-reverse 25s ease-in-out infinite;
+}
+
+@keyframes network-drift {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  20% {
+    transform: translate(15px, -20px) scale(1.01);
+  }
+  40% {
+    transform: translate(-10px, 15px) scale(0.99);
+  }
+  60% {
+    transform: translate(20px, 10px) scale(1.02);
+  }
+  80% {
+    transform: translate(-15px, -10px) scale(1);
+  }
+}
+
+@keyframes network-drift-reverse {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  20% {
+    transform: translate(-20px, 15px) scale(0.99);
+  }
+  40% {
+    transform: translate(15px, -10px) scale(1.01);
+  }
+  60% {
+    transform: translate(-10px, -20px) scale(1);
+  }
+  80% {
+    transform: translate(10px, 20px) scale(1.02);
+  }
+}
+
+.dark .el-bg-network::before {
+  opacity: 0.5;
+}
+
+.dark .el-bg-network::after {
+  opacity: 0.3;
+}
+
+/* ============================================
+   Origami Effect - Subtle geometric shapes
+   A few elegant triangles and diamonds that float
+   ============================================ */
+.el-bg-origami {
+  position: relative;
+  }
+
+.el-bg-origami::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.35;
+  background:
+    /* Large triangle top-left */
+    conic-gradient(from 0deg at 15% 25%, hsl(var(--wisteria-400) / 0.5) 0deg, hsl(var(--wisteria-400) / 0.5) 60deg, transparent 60deg),
+    /* Diamond bottom-right */
+    conic-gradient(from 45deg at 80% 70%, hsl(var(--wisteria-500) / 0.4) 0deg, hsl(var(--wisteria-500) / 0.4) 90deg, transparent 90deg, transparent 180deg, hsl(var(--wisteria-500) / 0.4) 180deg, hsl(var(--wisteria-500) / 0.4) 270deg, transparent 270deg);
+  filter: blur(40px);
+  animation: origami-float 25s ease-in-out infinite;
+}
+
+.el-bg-origami::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.3;
+  background:
+    /* Triangle bottom-left */
+    conic-gradient(from 180deg at 25% 75%, hsl(var(--wisteria-300) / 0.45) 0deg, hsl(var(--wisteria-300) / 0.45) 60deg, transparent 60deg),
+    /* Small diamond top-right */
+    conic-gradient(from 45deg at 75% 20%, hsl(var(--wisteria-400) / 0.35) 0deg, hsl(var(--wisteria-400) / 0.35) 90deg, transparent 90deg, transparent 180deg, hsl(var(--wisteria-400) / 0.35) 180deg, hsl(var(--wisteria-400) / 0.35) 270deg, transparent 270deg);
+  filter: blur(50px);
+  animation: origami-drift 30s ease-in-out infinite reverse;
+}
+
+@keyframes origami-float {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  33% {
+    transform: translate(30px, -20px) rotate(2deg) scale(1.05);
+  }
+  66% {
+    transform: translate(-20px, 25px) rotate(-1deg) scale(0.98);
+  }
+}
+
+@keyframes origami-drift {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  33% {
+    transform: translate(-25px, 20px) rotate(-2deg) scale(1.03);
+  }
+  66% {
+    transform: translate(25px, -15px) rotate(2deg) scale(0.97);
+  }
+}
+
+.dark .el-bg-origami::before {
+  opacity: 0.45;
+}
+
+.dark .el-bg-origami::after {
+  opacity: 0.4;
+}
+
+/* ============================================
+   Utility: Ensure content stays above backgrounds
+   ============================================ */
+.el-bg-aurora > *,
+.el-bg-mesh > *,
+.el-bg-waves > *,
+.el-bg-glow > *,
+.el-bg-dots > *,
+.el-bg-gradient-shift > *,
+.el-bg-northern-lights > *,
+.el-bg-particles > *,
+.el-bg-blobs > *,
+.el-bg-network > *,
+.el-bg-origami > * {
+  position: relative;
+  z-index: 1;
+}
+
+
+/* ============================================
+   Clip backgrounds to main content area
+   Uses CSS variables set by the background container:
+   --bg-clip-left: sidebar offset
+   --bg-clip-top: top bar offset
+   Applied to the container element to clip all pseudo-elements
+   ============================================ */
+.el-bg-aurora,
+.el-bg-mesh,
+.el-bg-waves,
+.el-bg-glow,
+.el-bg-dots,
+.el-bg-gradient-shift,
+.el-bg-northern-lights,
+.el-bg-particles,
+.el-bg-blobs,
+.el-bg-network,
+.el-bg-origami {
+  clip-path: inset(var(--bg-clip-top, 0px) 0 0 var(--bg-clip-left, 0px));
+}
+
+/* ============================================
+   Reduced Motion Support
+   Disable animations for users who prefer reduced motion
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  .el-bg-aurora::before,
+  .el-bg-aurora::after,
+  .el-bg-mesh::before,
+  .el-bg-mesh::after,
+  .el-bg-waves::before,
+  .el-bg-waves::after,
+  .el-bg-glow::before,
+  .el-bg-glow::after,
+  .el-bg-dots::before,
+  .el-bg-dots::after,
+  .el-bg-gradient-shift::before,
+  .el-bg-gradient-shift::after,
+  .el-bg-northern-lights::before,
+  .el-bg-northern-lights::after,
+  .el-bg-particles::before,
+  .el-bg-particles::after,
+  .el-bg-blobs::before,
+  .el-bg-blobs::after,
+  .el-bg-network::before,
+  .el-bg-network::after,
+  .el-bg-origami::before,
+  .el-bg-origami::after {
+    animation: none;
+  }
+}