@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background: #eacfac; /* fallback */
  font-family: Tahoma, sans-serif;
  color: #fff;
  text-align: center;
}

#bg_header {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-width: 1000px;
  aspect-ratio: 1820/900;
  margin: 0 auto;
  overflow: hidden;
}
#bg_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
    transform: scale(1.0);         /* เริ่มจากเล็กกว่าปกติ */
  transition: transform 8s ease; /* ใช้เวลา 8 วินาทีค่อย ๆ ขยาย */

}

#bg_image.zoom-out {
  transform: scale(1.2);
}
#bg_wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

#bg_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
#bg_wrapper img.visible {
  opacity: 1;
}

/* ภาพเคลื่อนไหว */
#bg_wrapper img:nth-child(1) {
  animation: fadeZoom1 6s ease forwards;
}
@keyframes fadeZoom1 {
  from { opacity: 0; transform: scale(1.2); }
  to   { opacity: 1; transform: scale(1); }
}

 #bg_wrapper img:nth-child(2) {
  animation: fadeZoom2 8s ease forwards;
}
@keyframes fadeZoom2 {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 0.8; transform: scale(1); }
}

#bg_wrapper img:nth-child(3) {
  animation: slideLeft 7s ease forwards;
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

#bg_wrapper img:nth-child(4) {
  animation: mainHighlight 6s ease forwards;
}

@keyframes mainHighlight {
  0% {
    opacity: 0;
    transform: scale(0.8) translateX(50px); /* เริ่มเล็กและเลื่อนมานิดหน่อย */
    filter: brightness(0.7);               /* ทำให้มืดลง */
  }
  50% {
    opacity: 1;
    transform: scale(1.1) translateX(0);   /* ขยายขึ้นเล็กน้อย */
    filter: brightness(1.2);               /* สว่างขึ้น */
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);     /* กลับมาขนาดปกติ */
    filter: brightness(1);                 /* คงความชัดเจน */
  }
}

#bg_wrapper img:nth-child(5) {
  animation: pulseFade 4s ease forwards, floatSide 6s ease-in-out infinite;
  z-index: 5;
}

/* ✅ เฟด + ซูมออก */
@keyframes pulseFade {
  0%   { opacity: 0; transform: scale(1.2); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ✅ ลอยซ้ายขวาเบาๆ */
@keyframes floatSide {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(15px); }
  100% { transform: translateX(0); }
}

#bg_wrapper img:nth-child(6) {
  animation: blurFade 5s ease forwards;
  position: relative;   /* ต้องกำหนด position ก่อนถึงจะใช้ z-index ได้ */
  z-index: 10;          /* มากกว่า child(6) */
}
@keyframes blurFade {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}



#org-name {
  position: absolute;
  left: 50%;
  top: 89%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  /* font-weight: bold; */
  /* text-shadow: 0 2px 5px rgba(0,0,0,0.6); */
  color: #764600;
  z-index: 2;
  white-space: nowrap;
}

/* ค่าเริ่มต้น: ปุ่มสำหรับจอเล็ก (<768px) */
.btn-wrapper {
  position: absolute;
  left: 50%;
  top: 92%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  z-index: 2;
}
/* จอใหญ่กว่า 768px → ปรับตำแหน่งปุ่มใหม่ */
@media (min-width: 768px) {
  .btn-wrapper {
    left: 50%;
    top: 92%;
    transform: translateX(-50%);
  }
}

.btn-wrapper a {
  min-width: 140px;
  padding: 10px 0;
  background: rgb(128, 94, 0);
  border: 2px solid #926b00;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease;
  text-align: center;
}

.btn-wrapper a:hover {
  background: #d6bb60;
  color: #000;
  transform: scale(1.05);
}







.charm-regular {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}

.charm-bold {
  font-family: "Charm", cursive;
  font-weight: 700;
  font-style: normal;
}

#intro-text {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #764600;
  z-index: 3;
    font-family: "Charm", cursive; /* ✅ ใช้ฟอนต์ Charm */

}

#intro-text .intro-h1 {
  font-size: clamp(1rem, 3vw, 2.5rem);  /* ย่อ–ขยายเหมือนปุ่ม */
  font-weight: bold;
  margin: 0.5em 0;
  white-space: nowrap;   /* ไม่ตัดบรรทัด */
  overflow: visible;     /* ไม่ซ่อนข้อความ */
}

#intro-text .intro-h2 {
  font-size: clamp(1.3rem, 2.2vw, 1rem);
  margin: 0.4em 0;
  display: block;
  white-space: nowrap;
  overflow: visible;
  
  letter-spacing: 0.05em;       /* 🔑 ขยายระยะห่างตัวอักษร (ทำให้ดูกว้างขึ้น) */
  line-height: 1.1;             /* 🔑 ลดช่องไฟระหว่างบรรทัด */
}

#intro-text .intro-h3 {
  font-size: clamp(0.8rem, 2vw, 1.4rem);
  margin: 0.4em 0;
  display: block;
  white-space: nowrap;
  overflow: visible;
}

/* ✅ ระยะห่างเฉพาะ h2b, h2b1 */
#intro-text .h2b,
#intro-text .h2b1 {
  margin-bottom: 20px !important;
}

/* ✅ ระยะห่างเฉพาะ h2c, h2d */
#intro-text .h2c,
#intro-text .h2d {
  margin-bottom: 20px !important;
}

/* ✅ ระยะห่างพิเศษจาก JSON (ใช้ key "br1") */
#intro-text .intro-space {
  display: block;
  height: 10px;
  width: 100%;
}
/* จอกว้างปานกลาง (1501px - 1749px) → ลดลง ~10% */
@media (max-width: 1749px) and (min-width: 1501px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.9); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
@media (max-width: 1500px) and (min-width: 1201px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.8); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
@media (max-width: 1200px) and (min-width: 1100px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.7); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
@media (max-width: 1100px) and (min-width: 768px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.6); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
/* เริ่มต้น: ซ่อน Mobile Layout */
#default-card {
  display: none;
}
#mobile-buttons {
  display: none;
}

/* ✅ แสดง Mobile Layout + ซ่อน Desktop เมื่อจอ <= 767px */
@media (max-width: 767px) {
  /* ซ่อน Desktop Layout */
  #bg_header,
  #global-buttons {
    display: none !important;
  }

  /* แสดง Mobile Layout */
  #default-card {
    display: block !important;
  }
  #mobile-buttons {
    display: flex !important;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    z-index: 9999;
    position: relative;
  }

  /* ชื่อองค์กรบน mobile */
  #org-name-mobile {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.0rem;
    color: #764600;
  }

  /* ปุ่ม Mobile */
  #mobile-buttons a {
    min-width: 110px;
    padding: 8px 0;
    font-size: 0.9rem;
    background: rgb(128, 94, 0);
    border: 2px solid #926b00;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
      white-space: nowrap;    /* ✅ ไม่ตัดบรรทัด */
  }

  #mobile-buttons a:hover {
    background: #d6bb60;
    color: #000;
  }
}

/* ✅ ซ่อน Mobile Layout เมื่อจอ >= 768px */
@media (min-width: 768px) {
  #default-card,
  #mobile-buttons {
    display: none !important;
  }

  /* Desktop layout กลับมา */
  #global-buttons {
    display: flex !important;
    justify-content: center;
    gap: 30px;
  }
}
@keyframes shineMove {
  0%   { left: -150%; }
  100% { left: 150%; }
}

#bg_wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(45deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  opacity: 0.7;
  pointer-events: none;
}

#bg_wrapper.shine::after {
  animation: shineMove 2s ease forwards;
}