/* ─────────────────────────────────────────────────────────────────────────────
   e17-mesh.css — animated CSS mesh gradient backgrounds
   Pure CSS — orbital gradient blobs that drift across sections
───────────────────────────────────────────────────────────────────────────── */

/* ── Hero mesh gradient — base ambient field ── */
.hero {
  background-color: var(--void, oklch(3.5% 0.015 265));
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, oklch(74% 0.20 246 / 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%, oklch(93% 0.27 122 / 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 60% 20%, oklch(74% 0.20 246 / 0.06) 0%, transparent 60%);
  animation: mesh-drift-1 18s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes mesh-drift-1 {
  0%   { transform: translate(0%, 0%) rotate(0deg); }
  33%  { transform: translate(3%, 2%) rotate(0.5deg); }
  66%  { transform: translate(-2%, 4%) rotate(-0.5deg); }
  100% { transform: translate(4%, -2%) rotate(1deg); }
}

/* ── Features section mesh ── */
.features {
  position: relative;
  overflow: hidden;
}

.features::before {
  content: '';
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 10% 80%, oklch(93% 0.27 122 / 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 90% 20%, oklch(74% 0.20 246 / 0.06) 0%, transparent 60%);
  animation: mesh-drift-2 22s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes mesh-drift-2 {
  0%   { transform: translate(0%, 0%); }
  50%  { transform: translate(-3%, 2%); }
  100% { transform: translate(2%, -3%); }
}

/* ── Waitlist section — intense gradient convergence ── */
.waitlist {
  position: relative;
  overflow: hidden;
}

.waitlist::before {
  content: '';
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, oklch(93% 0.27 122 / 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 80%, oklch(74% 0.20 246 / 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 80% 20%, oklch(93% 0.27 122 / 0.06) 0%, transparent 60%);
  animation: mesh-drift-3 16s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes mesh-drift-3 {
  0%   { transform: scale(1) translate(0%, 0%); }
  50%  { transform: scale(1.04) translate(-2%, 1%); }
  100% { transform: scale(0.97) translate(3%, -2%); }
}

/* Ensure section content stays above the mesh */
.features > *:not(.features::before),
.waitlist > *:not(.waitlist::before) {
  position: relative;
  z-index: 1;
}

/* ── Reduced motion — static gradients ── */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .features::before,
  .waitlist::before {
    animation: none;
  }
}