/* ---------- Animated Mesh for Light Theme ---------- */
:root { --mx:50; --my:50; }

.mesh-wrap { overflow: hidden; }

.mesh-layer{
  position:absolute; inset:-20%;
  filter: blur(45px) saturate(115%);
  transform: translate3d(calc((var(--mx) - 50) * .20px), calc((var(--my) - 50) * .20px), 0);
  will-change: transform, filter;
}

/* Softer, airy palette using brand tints */
.mesh-1{
  /* purple + orange + lavender, on light */
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(94,60,145,.35), transparent 65%),
    radial-gradient(35% 40% at 75% 20%, rgba(247,141,31,.25), transparent 60%),
    radial-gradient(55% 45% at 50% 80%, rgba(162,140,200,.30), transparent 60%);
  mix-blend-mode: multiply;
  animation: drift1 22s ease-in-out infinite alternate, hue 40s linear infinite;
}
.mesh-2{
  opacity:.65; mix-blend-mode: screen;
  background:
    radial-gradient(35% 35% at 15% 70%, rgba(247,141,31,.18), transparent 60%),
    radial-gradient(25% 30% at 85% 65%, rgba(94,60,145,.22), transparent 60%);
  animation: drift2 26s ease-in-out infinite alternate-reverse, hue 60s linear infinite;
}
.mesh-3{
  opacity:.40; mix-blend-mode: overlay;
  background:
    radial-gradient(30% 25% at 50% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(20% 20% at 60% 85%, rgba(255,255,255,.45), transparent 60%);
  animation: drift3 18s ease-in-out infinite alternate;
}

/* Fine film grain tuned for light */
.mesh-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.10; mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100%" height="100%" filter="url(%23n)" opacity="0.35" fill="black"/></svg>');
  background-size: 220px 220px; animation: grain 1.2s steps(2) infinite;
}

/* Motion (kept stronger as you asked earlier) */
@keyframes drift1 { 0%{transform: translate3d(0,0,0);} 100%{transform: translate3d(60px,-30px,0);} }
@keyframes drift2 { 0%{transform: translate3d(0,0,0);} 100%{transform: translate3d(-70px,40px,0);} }
@keyframes drift3 { 0%{transform: translate3d(0,0,0);} 100%{transform: translate3d(40px,60px,0);} }
@keyframes hue    { to { filter: hue-rotate(18deg); } }
@keyframes grain  { to { background-position: 160px 0; } }

/* Dots overlay becomes soft slate */
.light [aria-hidden="true"] svg [fill="white"]{ fill: rgba(15,23,42,.08); }

@media (prefers-reduced-motion: reduce){
  .mesh-layer,.mesh-grain{ animation: none !important; }
}