.gicons {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict; 
  
  transition: opacity 0.35s linear;
}

.gicons .gi-g {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.gicons .gi-g.on {
  opacity: 1;
  visibility: visible;
}

.gicons .gi {
  position: absolute;
  left: var(--gi-x, 0);
  top: var(--gi-y, 0);
  width: var(--gi-w, 48px);
  height: var(--gi-h, 48px);
  opacity: var(--gi-o, 0.2);
  
  image-rendering: pixelated;
  transform: translate(-50%, -50%) scale(var(--gi-flip, 1), 1)
    rotate(var(--gi-r, 0deg));
  
  animation: giSway var(--gi-t, 15s) var(--gi-d, 0s) ease-in-out infinite;
}
@keyframes giSway {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: var(--gi-sx, 3px) -6px;
  }
  50% {
    translate: 0 -9px;
  }
  75% {
    translate: calc(var(--gi-sx, 3px) * -1) -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gicons .gi {
    animation: none;
    translate: none;
  }
}

html.gc-cierre-quieto .gicons .gi {
  animation-play-state: paused;
}

@media (max-width: 620px) {
  .gicons {
    opacity: 0.55;
  }
}