/* ═══════════════════════════════════════════════════════════════════════
   LAVALAMP GRADIENT — shared mesh layer for snackerylabs.com
   Loaded on: homepage, VD, WMF, SmartBlog, About, Contact.
   ═══════════════════════════════════════════════════════════════════════ */

.lavalamp {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #F6F4EA;
  overflow: hidden;
  pointer-events: none;
}
.lavalamp__blob {
  position: absolute;
  filter: blur(90px);
  will-change: transform, border-radius;
}
/* Yellow — soft lighter yellow only */
.lavalamp__blob--y1 {
  width: 500px; height: 500px;
  background: #FFE470;
  top: -120px; right: -160px;
  opacity: 0.65;
  border-radius: 50%;
  animation: ll-drift-1 5s ease-in-out infinite alternate, ll-morph-1 6s ease-in-out infinite;
}
.lavalamp__blob--y2 {
  width: 360px; height: 360px;
  background: #FFE470;
  top: 55%; right: 18%;
  opacity: 0.52;
  border-radius: 50%;
  animation: ll-drift-2 6s ease-in-out infinite alternate, ll-morph-2 7s ease-in-out infinite;
}
/* Bright vivid blue (replaces deep indigo) */
.lavalamp__blob--blue-bright {
  width: 540px; height: 540px;
  background: #4F8EF7;
  bottom: -160px; left: -200px;
  opacity: 0.58;
  border-radius: 50%;
  animation: ll-drift-3 5.5s ease-in-out infinite alternate, ll-morph-1 8s ease-in-out infinite;
}
/* Light indigo (replaces brand indigo) */
.lavalamp__blob--indigo-light {
  width: 420px; height: 420px;
  background: #6E73E8;
  top: 60%; left: 8%;
  opacity: 0.55;
  border-radius: 50%;
  animation: ll-drift-4 4.5s ease-in-out infinite alternate, ll-morph-3 7.5s ease-in-out infinite;
}
/* Sky blue accent (lighter cooler blue) */
.lavalamp__blob--sky {
  width: 380px; height: 380px;
  background: #7AB1FB;
  top: 15%; left: 15%;
  opacity: 0.52;
  border-radius: 50%;
  animation: ll-drift-5 6.5s ease-in-out infinite alternate, ll-morph-2 8.5s ease-in-out infinite;
}
.lavalamp__blob--white {
  width: 460px; height: 460px;
  background: #FFFFFF;
  top: 30%; right: 35%;
  opacity: 0.62;
  border-radius: 50%;
  animation: ll-drift-6 5s ease-in-out infinite alternate, ll-morph-3 6.5s ease-in-out infinite;
}

@keyframes ll-drift-1 { 0% {transform:translate3d(0,0,0) scale(1);} 100% {transform:translate3d(-180px,280px,0) scale(1.25);} }
@keyframes ll-drift-2 { 0% {transform:translate3d(0,0,0) scale(1);} 100% {transform:translate3d(260px,-240px,0) scale(0.80);} }
@keyframes ll-drift-3 { 0% {transform:translate3d(0,0,0) scale(1);} 100% {transform:translate3d(320px,-300px,0) scale(1.30);} }
@keyframes ll-drift-4 { 0% {transform:translate3d(0,0,0) scale(1);} 100% {transform:translate3d(280px,-200px,0) scale(1.20);} }
@keyframes ll-drift-5 { 0% {transform:translate3d(0,0,0) scale(1);} 100% {transform:translate3d(360px,280px,0) scale(1.15);} }
@keyframes ll-drift-6 { 0% {transform:translate3d(0,0,0) scale(1);} 100% {transform:translate3d(-300px,220px,0) scale(0.85);} }

@keyframes ll-morph-1 {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  25%      { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%      { border-radius: 30% 70% 70% 30% / 50% 60% 40% 50%; }
  75%      { border-radius: 70% 30% 50% 50% / 40% 60% 50% 60%; }
}
@keyframes ll-morph-2 {
  0%, 100% { border-radius: 50%; }
  33%      { border-radius: 40% 60% 70% 30% / 70% 30% 60% 40%; }
  66%      { border-radius: 70% 30% 40% 60% / 30% 70% 50% 50%; }
}
@keyframes ll-morph-3 {
  0%, 100% { border-radius: 50%; }
  50%      { border-radius: 30% 70% 60% 40% / 60% 40% 30% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .lavalamp__blob { animation: none !important; }
}

/* Mobile — reduce blob size + blur for perf */
@media (max-width: 800px) {
  .lavalamp__blob { filter: blur(70px); }
  .lavalamp__blob--y1, .lavalamp__blob--blue-bright { width: 380px; height: 380px; }
  .lavalamp__blob--y2, .lavalamp__blob--indigo-light, .lavalamp__blob--sky, .lavalamp__blob--white { width: 300px; height: 300px; }
}

/* NOTE: Do NOT apply a universal z-index to all siblings.
   That breaks the nav's overlay layering (search modal, mobile menu).
   Each page's own CSS handles z-index on the specific cream sections that need it. */