@property --g1x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --g1y { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --g1stop { syntax: "<percentage>"; inherits: true; initial-value: 65%; }

@property --g2x { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --g2y { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --g2stop { syntax: "<percentage>"; inherits: true; initial-value: 65%; }

@property --g3x { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --g3y { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --g3stop { syntax: "<percentage>"; inherits: true; initial-value: 65%; }

/* BEM-like block */
.td-bg {
  --g1x: 50%;  --g1y: 0%;   --g1stop: 65%;
  --g2x: 0%;   --g2y: 100%; --g2stop: 65%;
  --g3x: 100%; --g3y: 100%; --g3stop: 65%;

  background-color: #0B023C;
  background-image:
    radial-gradient(circle at var(--g1x) var(--g1y), rgba(11, 2, 60, 0.9) 0%, transparent var(--g1stop)),
    radial-gradient(circle at var(--g2x) var(--g2y), rgba(160, 53, 219, 0.6) 0%, transparent var(--g2stop)),
    radial-gradient(circle at var(--g3x) var(--g3y), rgba(0, 81, 212, 0.4) 0%, transparent var(--g3stop));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Modifier: animace */
.td-bg--anim {
  animation:
    g1Move 8s ease-in-out infinite alternate,
    g2Move 10s ease-in-out infinite alternate,
    g3Move 12s ease-in-out infinite alternate;
}
/* Modifier pro fixní background */
.td-bg--fixed {
  background-attachment: fixed;
}

@keyframes g1Move {
  0%   { --g1x: 50%; --g1y: 0%;   --g1stop: 65%; }
  50%  { --g1x: 46%; --g1y: 4%;   --g1stop: 72%; }
  100% { --g1x: 54%; --g1y: 2%;   --g1stop: 68%; }
}

@keyframes g2Move {
  0%   { --g2x: 0%;  --g2y: 100%; --g2stop: 65%; }
  50%  { --g2x: 15%; --g2y: 90%;  --g2stop: 80%; }
  100% { --g2x: 5%;  --g2y: 98%;  --g2stop: 70%; }
}

@keyframes g3Move {
  0%   { --g3x: 100%; --g3y: 100%; --g3stop: 65%; }
  40%  { --g3x: 92%;  --g3y: 94%;  --g3stop: 74%; }
  100% { --g3x: 96%;  --g3y: 86%;  --g3stop: 69%; }
}