.mask {
  position: absolute;
  width: var(--mask-size);
  height: var(--mask-size);
  color: var(--mask-color, rgba(255,255,255,0.08));
  opacity: var(--mask-opacity, 1);
  filter: blur(var(--mask-blur, 0px));
  pointer-events: none;
}

.mask svg { width: 100%; height: 100%; display: block; }

/* Motion selection */
.mask--motion-none { animation: none; }

.mask--motion-rotate {
  animation: mask-rotate var(--mask-motion, 14s) linear infinite;
}

.mask--motion-floatY {
  animation: mask-floatY var(--mask-motion, 10s) var(--mask-ease, ease-in-out) infinite;
}

.mask--motion-floatX {
  animation: mask-floatX var(--mask-motion, 10s) var(--mask-ease, ease-in-out) infinite;
}

.mask--motion-bounceY {
  animation: mask-bounceY var(--mask-motion, 2s) var(--mask-ease, ease-in-out) infinite;
}

.mask--motion-wobble {
  animation: mask-wobble var(--mask-motion, 8s) var(--mask-ease, ease-in-out) infinite;
}

/* Keyframes */
@keyframes mask-rotate {
  to { transform: rotate(360deg); }
}

@keyframes mask-floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--mask-distance, 18px) * -1)); }
}

@keyframes mask-floatX {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--mask-distance, 18px)); }
}

@keyframes mask-bounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--mask-distance, 18px) * -1)); }
}

@keyframes mask-wobble {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(calc(var(--mask-distance, 18px) * 0.6), calc(var(--mask-distance, 18px) * -0.4)) rotate(4deg); }
  50%  { transform: translate(0, calc(var(--mask-distance, 18px) * 0.4)) rotate(0deg); }
  75%  { transform: translate(calc(var(--mask-distance, 18px) * -0.6), calc(var(--mask-distance, 18px) * -0.2)) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Mobile: reduce movement + size */
@media (max-width: 767px) {
  .mask { width: calc(var(--mask-size) * 0.7); height: calc(var(--mask-size) * 0.7); }
  .mask { --mask-distance: 12px; } /* override if not explicitly set */
}
.mask--no-rotate { animation: none; }

@keyframes mask-rotate { to { transform: rotate(360deg); } }

.mask svg { width: 100%; height: 100%; }

/* positions (match your old ones, but cleaner) */
.mask--pos-tlo { top: 100px; left: -18%; }
.mask--pos-tro { top: 100px; right: -18%; }
.mask--pos-blo { bottom: 100px; left: -18%; }
.mask--pos-bro { bottom: 100px; right: -18%; }

.mask--pos-tl { top: 100px; left: 6%; }
.mask--pos-tr { top: 100px; right: 6%; }
.mask--pos-bl { bottom: 100px; left: 6%; }
.mask--pos-br { bottom: 100px; right: 6%; }

/* visibility */
.mask--vis-mobile { display: none; }
.mask--vis-desktop { display: block; }
.mask--vis-all { display: block; }

@media (max-width: 767px) {
  .mask { width: calc(var(--mask-size) * 0.7); height: calc(var(--mask-size) * 0.7); }
  .mask--vis-desktop { display: none; }
  .mask--vis-mobile { display: block; }

  /* safer mobile offscreen defaults */
  .mask--pos-tlo { left: -260px; top: 40px; }
  .mask--pos-tro { right: -260px; top: 40px; }
  .mask--pos-blo { left: -260px; bottom: -120px; }
  .mask--pos-bro { right: -260px; bottom: -120px; }
}