/* Custom CSS for styles that Tailwind utility classes don't cover easily */

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-up {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* Custom Scrollbar for Webkit (Light Theme) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F5F7F9;
}

::-webkit-scrollbar-thumb {
  background: #CFD7DF;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #92A2B1;
}

/* Pyramid Clip Paths */
.clip-path-pyramid-top {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 100%;
}

.clip-path-trapezoid {
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  width: 100%;
}

.clip-path-trapezoid-bottom {
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  width: 100%;
}

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