/* Scoped animations & motion guards */
#content-cloud .slick-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: one-spin .8s linear infinite;
}

#content-cloud .slick-skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: one-shimmer 1.5s infinite;
  border-radius: 4px;
  min-height: 14px;
}

@keyframes one-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* For absolutely-positioned icons that use translateY(-50%) for centering. */
@keyframes one-spin-y { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes one-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* SSH Authentication Card animations */
@keyframes sshFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sshSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

#content-cloud .slick-status-running::before { content: ""; position: absolute; width: 6px; height: 6px; background: var(--brand-primary); border-radius: 50%; left: 8px; top: 50%; transform: translateY(-50%); animation: one-pulse 2s infinite; }
@keyframes one-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Tag badge pop-in animation */
@keyframes slick-pop-in {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.tag-updated .slick-tag,
.tag-updated .tag-badge { animation: slick-pop-in 0.3s ease-out; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #content-cloud .slick-spinner,
  #content-cloud .slick-skeleton,
  #content-cloud .slick-status-running::before,
  #content-cloud .one-refresh-btn.spinning .one-refresh-icon,
  #content-cloud .status-icon,
  #content-cloud .status-progress-bar,
  #content-cloud .search-container.searching .search-icon,
  .tag-updated .slick-tag,
  .tag-updated .tag-badge { animation: none !important; }
}