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

/* Dashboard dropzone animations */
@keyframes pulse-border {
  0%, 100% {
    border-color: rgb(96, 165, 250);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    border-color: rgb(59, 130, 246);
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);
  }
}

.animate-pulse-border {
  animation: pulse-border 2s ease-in-out infinite;
}

/* Content types animation - smooth continuous scroll */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Translate by exactly half the width (one full set of 20 items) */
    /* Each item is 220px wide + 24px gap = 244px per item */
    /* 20 items × 244px = 4880px */
    transform: translateX(-4880px);
  }
}

.animate-scroll-left {
  animation: scroll-left 72s linear infinite;
  will-change: transform;
}

/* Processing document animations */
@keyframes border-shimmer {
  0%, 100% {
    background-position: -100% 0;
  }
  50% {
    background-position: 200% 0;
  }
}

@keyframes bg-pulse {
  0%, 100% {
    background-color: rgb(255 255 255); /* white */
  }
  50% {
    background-color: rgb(248 250 252); /* very subtle blue tint */
  }
}

.processing-document {
  animation: bg-pulse 4s ease-in-out infinite;
  position: relative;
}

.processing-document::before,
.processing-document::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgb(59 130 246) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: border-shimmer 6s ease-in-out infinite;
}

.processing-document::before {
  top: 0;
}

.processing-document::after {
  bottom: 0;
}