/* Animated Gradient Border for Search Form Container */
@keyframes gradientRotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.animated-gradient-border {
  position: relative;
  border: 8px solid transparent;
  border-radius: 1rem;
  background: linear-gradient(
      45deg,
      var(--color-primary),
      var(--color-secondary),
      var(--color-accent),
      var(--color-secondary),
      var(--color-primary)
    )
    0 0 / 400% 400%;
  background-clip: padding-box;
  animation: gradientRotate 4s ease infinite;
}

.animated-gradient-border::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  z-index: -1;
  border-radius: 1rem;
  background: linear-gradient(
      45deg,
      var(--color-primary),
      var(--color-secondary),
      var(--color-accent),
      var(--color-secondary),
      var(--color-primary)
    )
    0 0 / 400% 400%;
  animation: gradientRotate 4s ease infinite, gradientShift 8s linear infinite;
}

/* Enhanced conic gradient with smooth angle animation */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes gradientAngle {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

/* Alternative version with conic gradient for more dynamic effect */
.animated-gradient-border-conic {
  position: relative;
  border: 3px solid transparent;
  border-radius: 1rem;
  background: white;
  background-clip: padding-box;
}

.animated-gradient-border-conic::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  border-radius: 1rem;
  background: conic-gradient(
    from var(--gradient-angle) at 50% 50%,
    var(--color-primary-content) 0deg,
    var(--color-secondary) 72deg,
    var(--color-accent) 144deg,
    var(--color-secondary) 216deg,
    var(--color-accent) 288deg,
    var(--color-primary-content) 360deg
  );
  animation: gradientAngle 4s linear infinite;
}

/* Subtle pulsing variant */
.animated-gradient-border-pulse {
  position: relative;
  border: 7px solid transparent;
  border-radius: 1rem;
  background: white;
  background-clip: padding-box;
}

.animated-gradient-border-pulse::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  z-index: -1;
  border-radius: 1rem;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 25%,
    var(--color-accent) 50%,
    color-mix(in srgb, var(--color-secondary) 80%, transparent) 75%,
    color-mix(in srgb, var(--color-primary) 90%, transparent) 100%
  );
  animation: gradientPulse 2s ease-in-out infinite alternate;
}

@keyframes gradientPulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}