html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Reveal on scroll animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero slow zoom */
.hero-slide img {
  animation: kenburns 8s ease-out forwards;
}
@keyframes kenburns {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

/* Slow pulse for floating button */
@keyframes pulse-slow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(184, 146, 74, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(184, 146, 74, 0);
  }
}
.animate-pulse-slow {
  animation: pulse-slow 2.2s infinite;
}

/* =========================================
   Header: 2 modes
   - top   (default, over hero photo): white text + dark gradient
   - scrolled : cream background + dark text
   ========================================= */

/* ---- TOP state (over photo) ---- */
#site-header {
  color: #ffffff;
}
/* 上部に暗いグラデーションを敷いて文字を読みやすく */
#site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 15, 8, 0.75) 0%,
    rgba(20, 15, 8, 0.35) 60%,
    rgba(20, 15, 8, 0) 100%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: -1;
}
/* トップ状態の文字に軽い影をつけて可読性UP */
#site-header:not(.scrolled) .nav-link,
#site-header:not(.scrolled) a[href^='tel:'],
#site-header:not(.scrolled) #menu-icon {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* トップ状態：電話アイコンとロゴを明るく */
#site-header:not(.scrolled) a[href^='tel:'] .text-thai-gold {
  color: #e7c98a;
}
#site-header:not(.scrolled) .logo-img {
  filter: brightness(0) invert(1);
}
/* トップ状態の言語スイッチ枠線 */
#site-header:not(.scrolled) .lang-switch {
  border-color: rgba(255, 255, 255, 0.45);
}

/* ---- SCROLLED state (cream bg) ---- */
#site-header.scrolled {
  color: #2a2118; /* thai-dark */
  background-color: rgba(247, 242, 233, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 16px rgba(42, 33, 24, 0.08);
}
#site-header.scrolled::before {
  opacity: 0;
}
#site-header.scrolled #header-inner {
  height: 4rem;
}
#site-header.scrolled .lang-switch {
  border-color: rgba(184, 146, 74, 0.4);
}

/* nav underline */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* prevent body scroll when menu open */
body.menu-open {
  overflow: hidden;
}