@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;700&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Noto Serif SC', serif;
  }
}

@layer components {
  .text-shadow-glow {
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  
  .backdrop-blur-custom {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .hover-fade-in {
    transition: opacity 0.5s ease-in-out;
  }
  
  .hover-fade-in:hover {
    opacity: 0.8;
  }
}