/* Base */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Fade in up animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.9s ease-out forwards; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F7F3EC; }
::-webkit-scrollbar-thumb { background: #D4A24C; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #C8873B; }

/* Selection */
::selection { background: #D4A24C; color: white; }

/* Subtle grain on dark sections (optional decoration) */
.bg-brand-dark { position: relative; }

/* Ensure images don't get distorted when loading */
img { max-width: 100%; height: auto; }

/* Form focus rings cleanup */
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.12); }

/* Button hover scale */
.btn-scale { transition: transform 0.2s ease; }
.btn-scale:hover { transform: translateY(-2px); }

/* Project filter */
.project-card { transition: opacity 0.4s, transform 0.4s; }
.project-card.hidden-project { display: none; }

/* Header shadow on scroll */
#site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* Prevent horizontal overflow on small screens */
body { overflow-x: hidden; }

/* Hero gradient overlay improvements */
@media (max-width: 768px) {
  h1.font-display { line-height: 1.1; }
}