@import url("about.css");
@import url("banner.css");
@import url("contact.css");
@import url("footer.css");
@import url("nav.css");
@import url("project.css");
@import url("service.css");
@import url("responsive.css"); /* โค้ดเดิมที่ยังคงอยู่ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY & FONTS */
body {
  font-family: "IBM Plex Sans Thai", sans-serif;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Nav bar ----------------------------------------------------------------*/
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === Global Button Style === */
button,
a.btn,
.contact-btn,
.btn-contact,
.submit-btn,
.form-modal__ok,
.form-modal__close {
  border-radius: 16px; 
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
button:hover,
a.btn:hover,
.contact-btn:hover,
.btn-contact:hover,
.carousel-btn:hover:not([disabled]),
.submit-btn:hover,
.form-modal__ok:hover,
.form-modal__close:hover {
  filter: brightness(0.7); /* ✅ simple universal hover effect */
  /* transform: translateY(1px); */
}

/* เพิ่มโค้ดนี้เพื่อลบ Hover effect บนมือถือ */
@media (hover: none) and (pointer: coarse) {
  .contact-btn:hover {
    background-color: #fea232; /* หรือสีเดิมที่ต้องการ */
    color: #ffffff;
    filter: none;
  }
  .nav-menu a:hover {
    color: #ffffff; /* หรือสีเดิมที่ต้องการ */
  }
}

/* Global unified horizontal padding */
.banner,
.navbar,
.projects-container,
.contact-section,
.footer-bottom {
  padding-inline: var(--pad-x);
}

/* ===== Scroll to Top Button ===== */
#scroll-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fea232;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: all 0.3s ease;
  cursor: pointer;
}
/* #scroll-to-top:hover {
  background-color: #e3810a;
} */

#scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* สำหรับเบราว์เซอร์ Firefox */
}

/* Mobile: sections มีขนาดเท่ากัน */

.about-section,
.services-section,
.projects-section,
.contact-section {
  font-size: 16px;
}

/* ===== Premium (visible) scroll animations for banner ===== */
@media (prefers-reduced-motion: no-preference) {
  /* state เริ่ม */
  .fade-in-up.anim-init,
  .slide-in-left.anim-init,
  .slide-in-right.anim-init {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  /* เพิ่ม “ระยะ” และ “เวลา” ให้เห็นชัดขึ้น แต่ยังสุภาพ */
  .fade-in-up.anim-init     { transform: translateY(24px); }
  .slide-in-left.anim-init  { transform: translateX(-28px); }
  .slide-in-right.anim-init { transform: translateX(28px); }

  .fade-in-up.appear,
  .slide-in-left.appear,
  .slide-in-right.appear {
    opacity: 1;
    transform: none;
    transition:
      opacity .95s cubic-bezier(.22,.61,.36,1),
      transform 1.05s cubic-bezier(.22,.61,.36,1);
  }

  /* ปุ่มในแบนเนอร์ (ถ้าห่อด้วย data-anim="fade") ให้ไหลนุ่มกว่านิด */
  .button-container.fade-in-up.appear {
    transition-duration: 1.1s; /* นุ่มขึ้นอีกเล็กน้อย */
  }
/*   
  .appear { transition-delay: 0ms !important; } */
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .slide-in-left, .slide-in-right {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}