/* 
 * Animation gradient styles
 * Extracted from background-gradient-animation component to fix Vercel build issues
 */

.gradient-background {
  background-image: linear-gradient(40deg, var(--gradient-background-start), var(--gradient-background-end));
}

.gradient-first {
  background: radial-gradient(circle at center, var(--first-color) 0, var(--first-color) 50%) no-repeat;
  mix-blend-mode: var(--blending-value);
  width: var(--size);
  height: var(--size);
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  transform-origin: center center;
  opacity: 100;
}

.gradient-second {
  background: radial-gradient(circle at center, rgba(var(--second-color), 0.8) 0, rgba(var(--second-color), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending-value);
  width: var(--size);
  height: var(--size);
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  transform-origin: calc(50% - 400px);
  opacity: 100;
}

.gradient-third {
  background: radial-gradient(circle at center, rgba(var(--third-color), 0.8) 0, rgba(var(--third-color), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending-value);
  width: var(--size);
  height: var(--size);
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  transform-origin: calc(50% + 400px);
  opacity: 100;
}

.gradient-fourth {
  background: radial-gradient(circle at center, rgba(var(--fourth-color), 0.8) 0, rgba(var(--fourth-color), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending-value);
  width: var(--size);
  height: var(--size);
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  transform-origin: calc(50% - 200px);
  opacity: 70;
}

.gradient-fifth {
  background: radial-gradient(circle at center, rgba(var(--fifth-color), 0.8) 0, rgba(var(--fifth-color), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending-value);
  width: var(--size);
  height: var(--size);
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  opacity: 100;
}

.gradient-pointer {
  background: radial-gradient(circle at center, rgba(var(--pointer-color), 0.8) 0, rgba(var(--pointer-color), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending-value);
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 70;
}