/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Required field indicator */
label.required::after {
  content: " *";
  color: #ef4444;
}

/* Submit button spinner */
@keyframes campaign-spinner {
  to {
    transform: rotate(360deg);
  }
}
.campaign-submit-spinner {
  animation: campaign-spinner 0.75s linear infinite;
}

/* Shine animation for text */
@keyframes shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shine-text {
  color: var(--page-text);
  background-color: transparent;
  background-image: linear-gradient(
    270deg,
    transparent 0%,
    transparent 40%,
    var(--agent-shine) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 10s ease-in-out;
}

/* Patron card title: a shine band sweeps across text that is otherwise painted in
   --page-text, so contrast never drops below the base color by much.
   Rests for most of the cycle, then sweeps. The gradient is 250% of the element so
   every glyph always has background to clip; the position stays within 0%-100% for
   the same reason. Outside that range the text would have no fill and vanish. */
@keyframes patron-title-shine {
  0%,
  60% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}

.patron-shine-text {
  color: var(--page-text);
  /* The gradient is sized to the element box, not the glyphs. Without this a short
     title in a full-width h3 would send the band across mostly empty space. */
  width: fit-content;
  max-width: 100%;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .patron-shine-text {
    background-image: linear-gradient(
      100deg,
      var(--page-text) 0%,
      var(--page-text) 28%,
      var(--patron-shine) 50%,
      var(--page-text) 72%,
      var(--page-text) 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: patron-title-shine 6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .patron-shine-text {
    background-image: none;
    -webkit-text-fill-color: var(--page-text);
    animation: none;
  }
}