/* Tabelo - Animations & Utilities */

/* ===== Keyframe Animations ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Smooth Scrolling ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Utility Classes ===== */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-muted);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

/* ===== Placeholder Content ===== */
.placeholder {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.placeholder h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.placeholder p {
  font-size: 1.125rem;
  max-width: 600px;
  text-align: center;
}

/* ===== Accessibility: Reduce Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}