/*
 * 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.
 */

/* Outlier Score Shimmer Animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.outlier-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* Shimmer animation for gradient text */
@keyframes shimmer-text {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.outlier-shimmer-text {
  background-size: 200% 100%;
  animation: shimmer-text 3s ease-in-out infinite;
}

/* Viral Video Border Gradients */
.viral-border-blue {
  border: 3px solid;
  border-image: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8) 1;
  border-radius: 0.5rem;
  position: relative;
}

.viral-border-blue::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
  border-radius: 0.5rem;
  z-index: -1;
}

.viral-border-red {
  border: 3px solid;
  border-image: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c) 1;
  border-radius: 0.5rem;
  position: relative;
}

.viral-border-red::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);
  border-radius: 0.5rem;
  z-index: -1;
}

.viral-border-purple {
  border: 3px solid;
  border-image: linear-gradient(135deg, #a855f7, #9333ea, #7e22ce) 1;
  border-radius: 0.5rem;
  position: relative;
}

.viral-border-purple::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, #a855f7, #9333ea, #7e22ce);
  border-radius: 0.5rem;
  z-index: -1;
}