:root {
  --primary: #ff1a1a;
  --accent-orange: #ff6a00;
  --accent-pink: #ff4db8;
}

body {
  font-family: 'Spline Sans', sans-serif;
  background: transparent;
  overflow-x: hidden;
  color: #0f172a;
  position: relative;
  min-height: 100vh;
}

.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.85;
  pointer-events: none;
}


/* Base blob */
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

/* Animations */
@keyframes flow-1 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(15%, 20%) scale(1.3) rotate(120deg); }
  66% { transform: translate(-10%, 15%) scale(0.8) rotate(240deg); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); }
}

@keyframes flow-2 {
  0% { transform: translate(0, 0) scale(1.1) rotate(0deg); }
  50% { transform: translate(-20%, -15%) scale(1.4) rotate(-180deg); }
  100% { transform: translate(0, 0) scale(1.1) rotate(-360deg); }
}

@keyframes flow-3 {
  0% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(25%, -10%) scale(1.2); }
  80% { transform: translate(-15%, 5%) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Blobs */
.blob-1 {
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--primary) 0%, rgba(255,26,26,0) 75%);
  top: -15%;
  left: -10%;
  animation: flow-1 12s infinite linear;
}

.blob-2 {
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, var(--accent-orange) 0%, rgba(255,106,0,0) 75%);
  bottom: -25%;
  right: -15%;
  animation: flow-2 15s infinite linear;
}

.blob-3 {
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--accent-pink) 0%, rgba(255,77,184,0) 75%);
  top: 25%;
  left: 25%;
  animation: flow-3 10s infinite ease-in-out;
}

.blob-4 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--primary) 0%, rgba(255,26,26,0) 75%);
  top: 5%;
  right: 10%;
  animation: flow-1 18s infinite reverse linear;
}