/* GEOMETRIC ART — CSS Only */

/* ---- AMBIENT BLOBS (page-wide, behind everything) ---- */
.ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.amb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.amb-1 {
  width: 600px; height: 600px;
  background: var(--accent);
  opacity: 0.12;
  top: -10%; left: -5%;
  animation: ambFloat1 20s ease-in-out infinite;
}
.amb-2 {
  width: 500px; height: 500px;
  background: var(--teal);
  opacity: 0.10;
  top: 30%; right: -10%;
  animation: ambFloat2 25s ease-in-out infinite;
}
.amb-3 {
  width: 450px; height: 450px;
  background: var(--warm);
  opacity: 0.08;
  bottom: 10%; left: 20%;
  animation: ambFloat3 18s ease-in-out infinite;
}
.amb-4 {
  width: 350px; height: 350px;
  background: #A855F7;
  opacity: 0.07;
  top: 60%; left: 60%;
  animation: ambFloat1 22s ease-in-out infinite reverse;
}
.amb-5 {
  width: 400px; height: 400px;
  background: #3B82F6;
  opacity: 0.06;
  top: 80%; right: 30%;
  animation: ambFloat2 28s ease-in-out infinite reverse;
}

@keyframes ambFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, -40px) scale(1.1); }
  50% { transform: translate(-30px, 50px) scale(0.95); }
  75% { transform: translate(40px, 20px) scale(1.05); }
}
@keyframes ambFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-50px, 30px) scale(0.9); }
  50% { transform: translate(40px, -40px) scale(1.1); }
  75% { transform: translate(-20px, -20px) scale(1.05); }
}
@keyframes ambFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, 20px) scale(1.08); }
  66% { transform: translate(-30px, -40px) scale(0.92); }
}

/* ---- HERO BLOBS (local, brighter) ---- */
.blob-container {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); will-change: transform;
}
.blob-1 {
  width: clamp(300px, 40vw, 600px); height: clamp(300px, 40vw, 600px);
  background: var(--accent); opacity: 0.25;
  top: 10%; left: 15%;
  animation: bf1 12s ease-in-out infinite;
}
.blob-2 {
  width: clamp(250px, 35vw, 500px); height: clamp(250px, 35vw, 500px);
  background: var(--teal); opacity: 0.18;
  top: 40%; right: 10%;
  animation: bf2 15s ease-in-out infinite;
}
.blob-3 {
  width: clamp(200px, 30vw, 400px); height: clamp(200px, 30vw, 400px);
  background: var(--warm); opacity: 0.15;
  bottom: 10%; left: 40%;
  animation: bf3 10s ease-in-out infinite;
}
@keyframes bf1 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.1)}
  66%{transform:translate(-20px,20px) scale(.95)}
}
@keyframes bf2 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-30px,40px) scale(.9)}
  66%{transform:translate(25px,-25px) scale(1.08)}
}
@keyframes bf3 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(35px,15px) scale(1.05)}
  66%{transform:translate(-15px,-35px) scale(.92)}
}

/* GRID PATTERN */
.grid-pattern {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.03;
  background-image:linear-gradient(var(--text-muted) 1px,transparent 1px),linear-gradient(90deg,var(--text-muted) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);
}

/* DOT GRID */
.dot-grid {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.05;
  background-image:radial-gradient(circle,var(--text-muted) 1px,transparent 1px);
  background-size:24px 24px;
}

/* SCROLL PROGRESS */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  z-index:var(--z-progress); width:0%; transition:width .1s linear;
}