/* =========================================
   HERO GRADIENT
   Animated radial gradient background.
   Apply .hero-gradient to the hero section.
   ========================================= */

/* --- @property registrations (required for animating CSS custom properties) --- */

@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 93% }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 93% }
@property --c-0 { syntax: '<color>'; inherits: false; initial-value: hsla(212, 0%, 0%, 1) }
@property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 14.49% }
@property --s-end-0 { syntax: '<percentage>'; inherits: false; initial-value: 72% }

@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 26% }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: 9% }
@property --c-1 { syntax: '<color>'; inherits: false; initial-value: hsla(212, 0%, 0%, 1) }
@property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 0% }
@property --s-end-1 { syntax: '<percentage>'; inherits: false; initial-value: 45% }

@property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 15% }
@property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 79% }
@property --c-2 { syntax: '<color>'; inherits: false; initial-value: hsla(257, 91%, 42%, 0.7) }
@property --s-start-2 { syntax: '<percentage>'; inherits: false; initial-value: 2.93% }
@property --s-end-2 { syntax: '<percentage>'; inherits: false; initial-value: 36% }

@property --x-3 { syntax: '<percentage>'; inherits: false; initial-value: 40% }
@property --y-3 { syntax: '<percentage>'; inherits: false; initial-value: 104% }
@property --c-3 { syntax: '<color>'; inherits: false; initial-value: hsla(212, 100%, 55%, 0.75) }
@property --s-start-3 { syntax: '<percentage>'; inherits: false; initial-value: 3.99% }
@property --s-end-3 { syntax: '<percentage>'; inherits: false; initial-value: 47.58% }

@property --x-4 { syntax: '<percentage>'; inherits: false; initial-value: 0% }
@property --y-4 { syntax: '<percentage>'; inherits: false; initial-value: 60% }
@property --c-4 { syntax: '<color>'; inherits: false; initial-value: hsla(224, 80%, 48%, 1) }
@property --s-start-4 { syntax: '<percentage>'; inherits: false; initial-value: 2.39% }
@property --s-end-4 { syntax: '<percentage>'; inherits: false; initial-value: 42% }

@property --x-5 { syntax: '<percentage>'; inherits: false; initial-value: 92% }
@property --y-5 { syntax: '<percentage>'; inherits: false; initial-value: 37% }
@property --c-5 { syntax: '<color>'; inherits: false; initial-value: hsla(248, 70%, 42%, 1) }
@property --s-start-5 { syntax: '<percentage>'; inherits: false; initial-value: 2.93% }
@property --s-end-5 { syntax: '<percentage>'; inherits: false; initial-value: 36% }

@property --x-6 { syntax: '<percentage>'; inherits: false; initial-value: 101% }
@property --y-6 { syntax: '<percentage>'; inherits: false; initial-value: 16% }
@property --c-6 { syntax: '<color>'; inherits: false; initial-value: hsla(212, 100%, 55%, 0.5) }
@property --s-start-6 { syntax: '<percentage>'; inherits: false; initial-value: 13.17% }
@property --s-end-6 { syntax: '<percentage>'; inherits: false; initial-value: 31.75% }

@property --x-7 { syntax: '<percentage>'; inherits: false; initial-value: 90% }
@property --y-7 { syntax: '<percentage>'; inherits: false; initial-value: 13% }
@property --c-7 { syntax: '<color>'; inherits: false; initial-value: hsla(304, 80%, 38%, 1) }
@property --s-start-7 { syntax: '<percentage>'; inherits: false; initial-value: 1% }
@property --s-end-7 { syntax: '<percentage>'; inherits: false; initial-value: 42% }

@property --x-8 { syntax: '<percentage>'; inherits: false; initial-value: 104% }
@property --y-8 { syntax: '<percentage>'; inherits: false; initial-value: 56% }
@property --c-8 { syntax: '<color>'; inherits: false; initial-value: hsla(167, 80%, 60%, 0.6) }
@property --s-start-8 { syntax: '<percentage>'; inherits: false; initial-value: 3.99% }
@property --s-end-8 { syntax: '<percentage>'; inherits: false; initial-value: 26% }

@property --x-9 { syntax: '<percentage>'; inherits: false; initial-value: 97% }
@property --y-9 { syntax: '<percentage>'; inherits: false; initial-value: 19% }
@property --c-9 { syntax: '<color>'; inherits: false; initial-value: hsla(219, 83%, 45%, 0.55) }
@property --s-start-9 { syntax: '<percentage>'; inherits: false; initial-value: 18.6% }
@property --s-end-9 { syntax: '<percentage>'; inherits: false; initial-value: 42% }

/* --- Keyframes --- */

@keyframes hero-gradient-animation {
  0% {
    --x-0: 93%;  --y-0: 93%;  --c-0: hsla(212, 0%, 0%, 1);       --s-start-0: 14.49%; --s-end-0: 72%;
    --x-1: 26%;  --y-1: 9%;   --c-1: hsla(212, 0%, 0%, 1);       --s-start-1: 0%;     --s-end-1: 45%;
    --x-2: 15%;  --y-2: 79%;  --c-2: hsla(257, 91%, 42%, 0.7);   --s-start-2: 2.93%;  --s-end-2: 36%;
    --x-3: 40%;  --y-3: 104%; --c-3: hsla(212, 100%, 55%, 0.75); --s-start-3: 3.99%;  --s-end-3: 47.58%;
    --x-4: 0%;   --y-4: 60%;  --c-4: hsla(224, 80%, 48%, 1);     --s-start-4: 2.39%;  --s-end-4: 42%;
    --x-5: 92%;  --y-5: 37%;  --c-5: hsla(248, 70%, 42%, 1);     --s-start-5: 2.93%;  --s-end-5: 36%;
    --x-6: 101%; --y-6: 16%;  --c-6: hsla(212, 100%, 55%, 0.5);  --s-start-6: 13.17%; --s-end-6: 31.75%;
    --x-7: 90%;  --y-7: 13%;  --c-7: hsla(304, 80%, 38%, 1);     --s-start-7: 1%;     --s-end-7: 42%;
    --x-8: 104%; --y-8: 56%;  --c-8: hsla(167, 80%, 60%, 0.6);   --s-start-8: 3.99%;  --s-end-8: 26%;
    --x-9: 97%;  --y-9: 19%;  --c-9: hsla(219, 83%, 45%, 0.55);  --s-start-9: 18.6%;  --s-end-9: 42%;
  }
  100% {
    --x-0: 7%;   --y-0: 9%;   --c-0: hsla(306, 0%, 0%, 1);       --s-start-0: 2.39%;  --s-end-0: 43.9%;
    --x-1: 96%;  --y-1: 93%;  --c-1: hsla(306, 0%, 0%, 1);       --s-start-1: 9%;     --s-end-1: 54.81%;
    --x-2: -2%;  --y-2: 103%; --c-2: hsla(318, 70%, 50%, 1);     --s-start-2: 3%;     --s-end-2: 38%;
    --x-3: 33%;  --y-3: 82%;  --c-3: hsla(180, 100%, 55%, 0.6);  --s-start-3: 2.39%;  --s-end-3: 32.07%;
    --x-4: 37%;  --y-4: 81%;  --c-4: hsla(212, 88%, 48%, 0.8);   --s-start-4: 4.41%;  --s-end-4: 50%;
    --x-5: 54%;  --y-5: 99%;  --c-5: hsla(272, 98%, 58%, 0.65);  --s-start-5: 3%;     --s-end-5: 45%;
    --x-6: 104%; --y-6: 43%;  --c-6: hsla(263, 100%, 55%, 0.5);  --s-start-6: 6%;     --s-end-6: 42.5%;
    --x-7: 104%; --y-7: -16%; --c-7: hsla(299, 60%, 42%, 1);     --s-start-7: 5%;     --s-end-7: 28%;
    --x-8: 97%;  --y-8: 30%;  --c-8: hsla(180, 100%, 55%, 0.45); --s-start-8: 2.39%;  --s-end-8: 38%;
    --x-9: 78%;  --y-9: 4%;   --c-9: hsla(219, 83%, 45%, 0.8);   --s-start-9: 5%;     --s-end-9: 32%;
  }
}

/* --- Class --- */

.hero-gradient {
  background-color: hsl(305, 0%, 0%);
  background-image:
    radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
    radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
    radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
    radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
    radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
    radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)),
    radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)),
    radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)),
    radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)),
    radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
  animation: hero-gradient-animation 7s ease-in-out infinite alternate;
  will-change: background;
}

/* Pause animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient {
    animation: none;
  }
}