@keyframes fadeInUpSubtle {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible.fade-in-up {
  animation: fadeInUpSubtle 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-on-scroll.is-visible.fade-scale-in {
  animation: fadeScaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }
.delay-400 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-500 { animation-delay: 500ms; transition-delay: 500ms; }
.delay-600 { animation-delay: 600ms; transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

body {
  background-color: #f8fafc;
  color: #0d141c;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
  background-color: #000000;
  color: #e0e0e0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
li {
  transition: color 0.3s ease;
}

body.dark .text-\[\#0d141c\],
body.dark .text-gray-800 {
  color: #e0e0e0 !important;
}

.dark .layout-content-container .bg-white {
  background-color: #1a1a1a !important;
}

.dark .layout-content-container .bg-white p,
.dark .layout-content-container .bg-white li,
.dark .layout-content-container .bg-white h1,
.dark .layout-content-container .bg-white h2,
.dark .layout-content-container .bg-white h3,
.dark .layout-content-container .bg-white span {
  color: #e0e0e0 !important;
}

.dark .layout-content-container .bg-white .text-blue-800,
.dark .layout-content-container .bg-white .text-blue-700 {
  color: #90cdf4 !important;
}

body.dark footer {
  background-color: #000000 !important;
}

.active {
  color: #2563eb !important;
}

.dark .active {
  color: #60a5fa !important;
}

.active:hover {
  color: #1d4ed8 !important;
}

.dark .active:hover {
  color: #93c5fd !important;
}

.dark .bg-blue-100 {
  background-color: #1e3a8a !important;
}

.dark .text-blue-700 {
  color: #ffffff !important;
}

.dark .hover\:bg-blue-200:hover {
  background-color: #1e40af !important;
}

.dark .bg-blue-100 svg {
  color: #ffffff !important;
}