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

/* ===== Text Style and Fonts Operating Area ===== */

:root{
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

body{
  font-family: var(--font-sans);
}

html {
  scroll-behavior: smooth;
}

/* ===== Transition Operating Area ===== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition-property: opacity, transform;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform; /* ใช้เฉพาะ element ที่จะ animate */
}

.reveal--up    { transform: translate3d(0, 14px, 0); }
.reveal--down  { transform: translate3d(0, -14px, 0); }
.reveal--left  { transform: translate3d(16px, 0, 0); }
.reveal--right { transform: translate3d(-16px, 0, 0); }
.reveal--in    { transform: translate3d(0, 0, 0); } /* เฉพาะ fade-in */

.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-delay-1  { transition-delay: 80ms; }
.reveal-delay-2  { transition-delay: 160ms; }
.reveal-delay-3  { transition-delay: 240ms; }
.reveal-delay-4  { transition-delay: 320ms; }
.reveal-delay-5  { transition-delay: 400ms; }
.reveal-delay-6  { transition-delay: 480ms; }
.reveal-delay-7  { transition-delay: 560ms; }
.reveal-delay-8  { transition-delay: 640ms; }
.reveal-delay-9  { transition-delay: 720ms; }
.reveal-delay-10 { transition-delay: 800ms; }

/* ผู้ใช้ที่ไม่ต้องการ motion */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}