/* Custom styles */
html {
  scroll-behavior: smooth;
}

/* Lazy-render below-the-fold sections (browser skips work until near viewport) */
#work,
#about,
#process,
#results,
#insights,
#contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

.page-transition {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Scroll-in animations (only when JS adds .animate-in; respects reduced motion) */
@keyframes scrollIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.has-js .scroll-animate {
  opacity: 0;
  transform: translateY(12px);
}

html.has-js .scroll-animate.animate-in {
  animation: scrollIn 0.5s ease-out forwards;
}

html.has-js .scroll-animate.animate-in.stagger-1 { animation-delay: 0.1s; }
html.has-js .scroll-animate.animate-in.stagger-2 { animation-delay: 0.2s; }
html.has-js .scroll-animate.animate-in.stagger-3 { animation-delay: 0.3s; }
html.has-js .scroll-animate.animate-in.stagger-4 { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html.has-js .scroll-animate,
  html.has-js .scroll-animate.animate-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.has-js .scroll-animate.animate-in.stagger-1,
  html.has-js .scroll-animate.animate-in.stagger-2,
  html.has-js .scroll-animate.animate-in.stagger-3,
  html.has-js .scroll-animate.animate-in.stagger-4 {
    animation-delay: 0s;
  }
}