/* Custom Styles for Phiến Nguyệt Homestay */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --color-ivory: #FDFBF7;
  --color-beige-100: #F5EFE6;
  --color-beige-200: #EADFCF;
  --color-beige-300: #DBC9B5;
  --color-wood-300: #8C6D53;
  --color-wood-400: #6E5038;
  --color-wood-500: #523A27;
  --color-huegreen: #5E705D;
  --color-terracotta: #D87D65;
  --color-darkbrown: #2C221E;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--color-ivory);
  color: var(--color-darkbrown);
}

h1, h2, h3, .font-serif-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--color-beige-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-wood-300);
}

/* Subtle keyframe animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-float {
  animation: floatSlow 5s infinite ease-in-out;
}

/* Grain texture overlay */
.bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}