/**
 * Components Base CSS
 * Contains shared animations and global UI utility components
 */

/* Shared Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tzq-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Global Section Elements */

.tzq-section--compact { padding: var(--tzq-spacing-lg) 0; }
.tzq-section--spacious { padding: var(--tzq-spacing-4xl) 0; }

.tzq-section__header {
  margin-bottom: var(--tzq-spacing-xl);
  text-align: center;
}

.tzq-section__title {
  font-family: var(--tzq-font-heading);
  font-size: var(--tzq-text-3xl);
  font-weight: 800;
  color: var(--tzq-text-primary);
  margin-bottom: var(--tzq-spacing-xs);
}

.tzq-section__subtitle {
  font-size: var(--tzq-text-lg);
  color: var(--tzq-text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

/* Report Issue Form specific styles (remaining bits) */
.tzq-required {
  color: var(--tzq-error);
  margin-left: var(--tzq-spacing-xs);
}

.tzq-report-message {
  margin-top: var(--tzq-spacing-lg);
  padding: var(--tzq-spacing-md);
  border-radius: var(--tzq-radius-md);
  font-size: var(--tzq-text-sm);
  display: none;
}

.tzq-report-message.tzq-report-loading,
.tzq-report-message.tzq-report-success,
.tzq-report-message.tzq-report-error {
  display: block;
}

.tzq-report-loading {
  background: var(--tzq-bg-blue-light);
  border: 1px solid var(--tzq-primary-light);
  color: var(--tzq-primary-dark);
}

.tzq-report-success {
  background: var(--tzq-success-light);
  border: 1px solid var(--tzq-primary-light);
  color: var(--tzq-success-dark);
}

.tzq-report-error {
  background: var(--tzq-error-light);
  border: 1px solid var(--tzq-primary-light);
  color: var(--tzq-error-dark);
}