/* ==========================================================================
   TIO Upload – Optimizing State Indicator
   Targets WordPress core upload elements directly (no .tio-wrap scope).
   ========================================================================== */

/* --- Keyframes ---------------------------------------------------------- */

@keyframes tio-gradient-shift {
  0%   { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Classic Upload Page (media-new.php) -------------------------------- */

/* Progress bar gradient shimmer */
.media-item.tio-optimizing .bar {
  background-image: linear-gradient(90deg, #30d9cc, #ffc733, #30d9cc) !important;
  background-size: 200% 100% !important;
  animation: tio-gradient-shift 1.5s linear infinite !important;
}

/* Percent text — force black so it's visible on the gradient bar */
.media-item.tio-optimizing .percent {
  color: #000 !important;
}

/* --- Gutenberg / Media Modal -------------------------------------------- */

/* Progress bar gradient shimmer in modal uploads */
.attachment.uploading.tio-optimizing .media-progress-bar > div {
  background-image: linear-gradient(90deg, #30d9cc, #ffc733, #30d9cc) !important;
  background-size: 200% 100% !important;
  animation: tio-gradient-shift 1.5s linear infinite !important;
}

/* "Optimizing..." label injected into the attachment */
.tio-optimizing-label {
  font-size: 11px;
  text-align: center;
  padding: 4px 0;
  color: #000;
}