/* Custom Font Imports - Clean and Editorial */
/* Using Cormorant Garamond for that classic, elegant serif look */
/* Using Montserrat for a clean, geometric sans-serif contrast */

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    /* Ensure the background texture feels matte */
    background-color: #F9F8F4;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-down {
  animation: fadeDown 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Scroll Reveal Classes */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}

/* Typography Refinements */
h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
}

/* Selection Color */
::selection {
  background: rgba(140, 136, 129, 0.3); /* Muted Stone opacity */
  color: #2C2C2C;
}

/* Thai Language Overrides */
/* When body has class .lang-th, override font families */
body.lang-th .font-serif {
  font-family: 'Noto Serif Thai', serif !important;
  /* Adjust line height slightly for Thai characters which can be taller */
  line-height: 1.6; 
}

body.lang-th .font-sans {
  font-family: 'Noto Sans Thai', sans-serif !important;
}

/* Adjust letter spacing for Thai as it usually needs less spacing than stylized caps */
body.lang-th .tracking-widest {
  letter-spacing: 0.1em;
}

body.lang-th .tracking-\[0\.15em\] {
  letter-spacing: 0.05em;
}

/* Subtle Breathing Animation for SVG Lines */
@keyframes breathe {
  0%, 100% { stroke-opacity: 0.6; }
  50% { stroke-opacity: 1; }
}

svg path {
  transition: stroke-opacity 0.5s ease;
}

/* Apply to the family illustration specifically if needed, or generally */
section svg path {
  /* No auto animation to keep it very still/calm, but maybe on hover of the container? */
}

/* Hover effect for the Legacy Section SVG */
section:hover svg path {
  animation: breathe 4s infinite ease-in-out;
}