html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for fixed header h-20 (80px) + offset padding */
}
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
.custom-grid-bg {
  background-size: 40px 40px;
  background-image:
    linear-gradient(
      to right,
      rgba(228, 228, 231, 0.15) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(228, 228, 231, 0.15) 1px,
      transparent 1px
    );
}

/* Nav link hover underline effect */
.nav-link-custom {
  position: relative;
}
.nav-link-custom::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2.2px;
  bottom: -4px;
  left: 0;
  background-color: #1e40af; /* vietha-blue */
  transform-origin: bottom right;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link-custom:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Page Entrance Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-100 {
  animation-delay: 100ms;
}
.delay-200 {
  animation-delay: 200ms;
}
.delay-300 {
  animation-delay: 300ms;
}
.delay-500 {
  animation-delay: 500ms;
}

/* Scroll Reveal Animations */
.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-item.delay-100 {
  transition-delay: 100ms;
}
.reveal-item.delay-150 {
  transition-delay: 150ms;
}
.reveal-item.delay-200 {
  transition-delay: 200ms;
}
.reveal-item.delay-300 {
  transition-delay: 300ms;
}