/**
 * Sidekick Animated Component Styles
 */

:root {
  --sidekick-gradient-start: 10%;
  --sidekick-gradient-orange: #ffd8b7;
  --sidekick-gradient-pink: #f4c2ff;
  --sidekick-gradient-purple: #c6adff;
  --sidekick-gradient-blue: #a0cbff;
  --sidekick-gradient-end: 29%;
}

/* Sidekick card container styles */
.sidekick-card-container {
  aspect-ratio: 5/4;
  width: 10rem;
  background-color: white;
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-t6);
  line-height: 1.25rem;
  letter-spacing: -0.025em;
  font-weight: 600;
}

@media (min-width: 768px) {
  .sidekick-card-container {
    width: 13rem;
  }
}

@media (min-width: 1024px) {
  .sidekick-card-container {
    width: 15rem;
  }
}

@media (min-width: 1280px) {
  .sidekick-card-container {
    width: 16rem;
  }
}

/* Text color utilities */
.text-sidekick-gray {
  color: #6b7280;
}

.text-sidekick-purple {
  color: #7126ff;
}

/* Gradient animation setup */
@property --color1 {
  syntax: '<color>';
  initial-value: #ffd8b7;
  inherits: false;
}
@property --color2 {
  syntax: '<color>';
  initial-value: #ffd8b7;
  inherits: false;
}
@property --color3 {
  syntax: '<color>';
  initial-value: #ffd8b7;
  inherits: false;
}
@property --color4 {
  syntax: '<color>';
  initial-value: #f4c2ff;
  inherits: false;
}
@property --color5 {
  syntax: '<color>';
  initial-value: #f4c2ff;
  inherits: false;
}
@property --color6 {
  syntax: '<color>';
  initial-value: #c6adff;
  inherits: false;
}
@property --color7 {
  syntax: '<color>';
  initial-value: #c6adff;
  inherits: false;
}
@property --color8 {
  syntax: '<color>';
  initial-value: #a0cbff;
  inherits: false;
}
@property --color9 {
  syntax: '<color>';
  initial-value: #a0cbff;
  inherits: false;
}
@property --color10 {
  syntax: '<color>';
  initial-value: #a0cbff;
  inherits: false;
}
@property --color11 {
  syntax: '<color>';
  initial-value: #c6adff;
  inherits: false;
}
@property --color12 {
  syntax: '<color>';
  initial-value: #c6adff;
  inherits: false;
}
@property --color13 {
  syntax: '<color>';
  initial-value: #c6adff;
  inherits: false;
}
@property --color14 {
  syntax: '<color>';
  initial-value: #f4c2ff;
  inherits: false;
}

.sidekick-card-gradient {
  filter: blur(20px);
  position: absolute;
  inset: -30px;
  padding: 30px;
  animation: sidekick-gradient-animation 3s ease-in-out infinite;
  animation-play-state: paused;

  /* Performance optimizations */
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  background-image:
    radial-gradient(
      circle at 30% 70%,
      var(--color1) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 25% 50%,
      var(--color2) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 30% 30%,
      var(--color3) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 35% 29%,
      var(--color4) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 45% 29%,
      var(--color5) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 55% 29%,
      var(--color6) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 65% 29%,
      var(--color7) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 70% 30%,
      var(--color8) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 75% 50%,
      var(--color9) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 70% 70%,
      var(--color10) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 65% 71%,
      var(--color11) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 55% 71%,
      var(--color12) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 45% 71%,
      var(--color13) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    ),
    radial-gradient(
      circle at 35% 71%,
      var(--color14) var(--sidekick-gradient-start),
      transparent var(--sidekick-gradient-end)
    );
}

.sidekick-card:hover .sidekick-card-gradient,
.sidekick-card:focus .sidekick-card-gradient {
  animation-play-state: running;
  will-change: background-image;
}

@keyframes sidekick-gradient-animation {
  0% {
    --color1: var(--sidekick-gradient-orange);
    --color2: var(--sidekick-gradient-orange);
    --color3: var(--sidekick-gradient-orange);
    --color4: var(--sidekick-gradient-pink);
    --color5: var(--sidekick-gradient-pink);
    --color6: var(--sidekick-gradient-purple);
    --color7: var(--sidekick-gradient-purple);
    --color8: var(--sidekick-gradient-blue);
    --color9: var(--sidekick-gradient-blue);
    --color10: var(--sidekick-gradient-blue);
    --color11: var(--sidekick-gradient-purple);
    --color12: var(--sidekick-gradient-purple);
    --color13: var(--sidekick-gradient-pink);
    --color14: var(--sidekick-gradient-pink);
  }

  7% {
    --color1: var(--sidekick-gradient-pink);
    --color2: var(--sidekick-gradient-orange);
    --color3: var(--sidekick-gradient-orange);
    --color4: var(--sidekick-gradient-orange);
    --color5: var(--sidekick-gradient-pink);
    --color6: var(--sidekick-gradient-pink);
    --color7: var(--sidekick-gradient-purple);
    --color8: var(--sidekick-gradient-purple);
    --color9: var(--sidekick-gradient-blue);
    --color10: var(--sidekick-gradient-blue);
    --color11: var(--sidekick-gradient-blue);
    --color12: var(--sidekick-gradient-purple);
    --color13: var(--sidekick-gradient-purple);
    --color14: var(--sidekick-gradient-pink);
  }

  14% {
    --color1: var(--sidekick-gradient-pink);
    --color2: var(--sidekick-gradient-pink);
    --color3: var(--sidekick-gradient-orange);
    --color4: var(--sidekick-gradient-orange);
    --color5: var(--sidekick-gradient-orange);
    --color6: var(--sidekick-gradient-pink);
    --color7: var(--sidekick-gradient-pink);
    --color8: var(--sidekick-gradient-purple);
    --color9: var(--sidekick-gradient-purple);
    --color10: var(--sidekick-gradient-blue);
    --color11: var(--sidekick-gradient-blue);
    --color12: var(--sidekick-gradient-blue);
    --color13: var(--sidekick-gradient-purple);
    --color14: var(--sidekick-gradient-purple);
  }

  21% {
    --color1: var(--sidekick-gradient-purple);
    --color2: var(--sidekick-gradient-pink);
    --color3: var(--sidekick-gradient-pink);
    --color4: var(--sidekick-gradient-orange);
    --color5: var(--sidekick-gradient-orange);
    --color6: var(--sidekick-gradient-orange);
    --color7: var(--sidekick-gradient-pink);
    --color8: var(--sidekick-gradient-pink);
    --color9: var(--sidekick-gradient-purple);
    --color10: var(--sidekick-gradient-purple);
    --color11: var(--sidekick-gradient-blue);
    --color12: var(--sidekick-gradient-blue);
    --color13: var(--sidekick-gradient-blue);
    --color14: var(--sidekick-gradient-purple);
  }

  28% {
    --color1: var(--sidekick-gradient-purple);
    --color2: var(--sidekick-gradient-purple);
    --color3: var(--sidekick-gradient-pink);
    --color4: var(--sidekick-gradient-pink);
    --color5: var(--sidekick-gradient-orange);
    --color6: var(--sidekick-gradient-orange);
    --color7: var(--sidekick-gradient-orange);
    --color8: var(--sidekick-gradient-pink);
    --color9: var(--sidekick-gradient-pink);
    --color10: var(--sidekick-gradient-purple);
    --color11: var(--sidekick-gradient-purple);
    --color12: var(--sidekick-gradient-blue);
    --color13: var(--sidekick-gradient-blue);
    --color14: var(--sidekick-gradient-blue);
  }

  35% {
    --color1: var(--sidekick-gradient-blue);
    --color2: var(--sidekick-gradient-purple);
    --color3: var(--sidekick-gradient-purple);
    --color4: var(--sidekick-gradient-pink);
    --color5: var(--sidekick-gradient-pink);
    --color6: var(--sidekick-gradient-orange);
    --color7: var(--sidekick-gradient-orange);
    --color8: var(--sidekick-gradient-orange);
    --color9: var(--sidekick-gradient-pink);
    --color10: var(--sidekick-gradient-pink);
    --color11: var(--sidekick-gradient-purple);
    --color12: var(--sidekick-gradient-purple);
    --color13: var(--sidekick-gradient-blue);
    --color14: var(--sidekick-gradient-blue);
  }

  42% {
    --color1: var(--sidekick-gradient-blue);
    --color2: var(--sidekick-gradient-blue);
    --color3: var(--sidekick-gradient-purple);
    --color4: var(--sidekick-gradient-purple);
    --color5: var(--sidekick-gradient-pink);
    --color6: var(--sidekick-gradient-pink);
    --color7: var(--sidekick-gradient-orange);
    --color8: var(--sidekick-gradient-orange);
    --color9: var(--sidekick-gradient-orange);
    --color10: var(--sidekick-gradient-pink);
    --color11: var(--sidekick-gradient-pink);
    --color12: var(--sidekick-gradient-purple);
    --color13: var(--sidekick-gradient-purple);
    --color14: var(--sidekick-gradient-blue);
  }

  49% {
    --color1: var(--sidekick-gradient-blue);
    --color2: var(--sidekick-gradient-blue);
    --color3: var(--sidekick-gradient-blue);
    --color4: var(--sidekick-gradient-purple);
    --color5: var(--sidekick-gradient-purple);
    --color6: var(--sidekick-gradient-pink);
    --color7: var(--sidekick-gradient-pink);
    --color8: var(--sidekick-gradient-orange);
    --color9: var(--sidekick-gradient-orange);
    --color10: var(--sidekick-gradient-orange);
    --color11: var(--sidekick-gradient-pink);
    --color12: var(--sidekick-gradient-pink);
    --color13: var(--sidekick-gradient-purple);
    --color14: var(--sidekick-gradient-purple);
  }

  56% {
    --color1: var(--sidekick-gradient-purple);
    --color2: var(--sidekick-gradient-blue);
    --color3: var(--sidekick-gradient-blue);
    --color4: var(--sidekick-gradient-blue);
    --color5: var(--sidekick-gradient-purple);
    --color6: var(--sidekick-gradient-purple);
    --color7: var(--sidekick-gradient-pink);
    --color8: var(--sidekick-gradient-pink);
    --color9: var(--sidekick-gradient-orange);
    --color10: var(--sidekick-gradient-orange);
    --color11: var(--sidekick-gradient-orange);
    --color12: var(--sidekick-gradient-pink);
    --color13: var(--sidekick-gradient-pink);
    --color14: var(--sidekick-gradient-purple);
  }

  63% {
    --color1: var(--sidekick-gradient-purple);
    --color2: var(--sidekick-gradient-purple);
    --color3: var(--sidekick-gradient-blue);
    --color4: var(--sidekick-gradient-blue);
    --color5: var(--sidekick-gradient-blue);
    --color6: var(--sidekick-gradient-purple);
    --color7: var(--sidekick-gradient-purple);
    --color8: var(--sidekick-gradient-pink);
    --color9: var(--sidekick-gradient-pink);
    --color10: var(--sidekick-gradient-orange);
    --color11: var(--sidekick-gradient-orange);
    --color12: var(--sidekick-gradient-orange);
    --color13: var(--sidekick-gradient-pink);
    --color14: var(--sidekick-gradient-pink);
  }

  70% {
    --color1: var(--sidekick-gradient-pink);
    --color2: var(--sidekick-gradient-purple);
    --color3: var(--sidekick-gradient-purple);
    --color4: var(--sidekick-gradient-blue);
    --color5: var(--sidekick-gradient-blue);
    --color6: var(--sidekick-gradient-blue);
    --color7: var(--sidekick-gradient-purple);
    --color8: var(--sidekick-gradient-purple);
    --color9: var(--sidekick-gradient-pink);
    --color10: var(--sidekick-gradient-pink);
    --color11: var(--sidekick-gradient-orange);
    --color12: var(--sidekick-gradient-orange);
    --color13: var(--sidekick-gradient-orange);
    --color14: var(--sidekick-gradient-pink);
  }

  77% {
    --color1: var(--sidekick-gradient-pink);
    --color2: var(--sidekick-gradient-pink);
    --color3: var(--sidekick-gradient-purple);
    --color4: var(--sidekick-gradient-purple);
    --color5: var(--sidekick-gradient-blue);
    --color6: var(--sidekick-gradient-blue);
    --color7: var(--sidekick-gradient-blue);
    --color8: var(--sidekick-gradient-purple);
    --color9: var(--sidekick-gradient-purple);
    --color10: var(--sidekick-gradient-pink);
    --color11: var(--sidekick-gradient-pink);
    --color12: var(--sidekick-gradient-orange);
    --color13: var(--sidekick-gradient-orange);
    --color14: var(--sidekick-gradient-orange);
  }

  84% {
    --color1: var(--sidekick-gradient-orange);
    --color2: var(--sidekick-gradient-pink);
    --color3: var(--sidekick-gradient-pink);
    --color4: var(--sidekick-gradient-purple);
    --color5: var(--sidekick-gradient-purple);
    --color6: var(--sidekick-gradient-blue);
    --color7: var(--sidekick-gradient-blue);
    --color8: var(--sidekick-gradient-blue);
    --color9: var(--sidekick-gradient-purple);
    --color10: var(--sidekick-gradient-purple);
    --color11: var(--sidekick-gradient-pink);
    --color12: var(--sidekick-gradient-pink);
    --color13: var(--sidekick-gradient-orange);
    --color14: var(--sidekick-gradient-orange);
  }

  91% {
    --color1: var(--sidekick-gradient-orange);
    --color2: var(--sidekick-gradient-orange);
    --color3: var(--sidekick-gradient-pink);
    --color4: var(--sidekick-gradient-pink);
    --color5: var(--sidekick-gradient-purple);
    --color6: var(--sidekick-gradient-purple);
    --color7: var(--sidekick-gradient-blue);
    --color8: var(--sidekick-gradient-blue);
    --color9: var(--sidekick-gradient-blue);
    --color10: var(--sidekick-gradient-purple);
    --color11: var(--sidekick-gradient-purple);
    --color12: var(--sidekick-gradient-pink);
    --color13: var(--sidekick-gradient-pink);
    --color14: var(--sidekick-gradient-orange);
  }

  100% {
    --color1: var(--sidekick-gradient-orange);
    --color2: var(--sidekick-gradient-orange);
    --color3: var(--sidekick-gradient-orange);
    --color4: var(--sidekick-gradient-pink);
    --color5: var(--sidekick-gradient-pink);
    --color6: var(--sidekick-gradient-purple);
    --color7: var(--sidekick-gradient-purple);
    --color8: var(--sidekick-gradient-blue);
    --color9: var(--sidekick-gradient-blue);
    --color10: var(--sidekick-gradient-blue);
    --color11: var(--sidekick-gradient-purple);
    --color12: var(--sidekick-gradient-purple);
    --color13: var(--sidekick-gradient-pink);
    --color14: var(--sidekick-gradient-pink);
  }
}