/* =========================================================
   YD DISTRIBUTION — Fold Text (global)
   พอร์ตเอฟเฟกต์ "Fold Text" (reactbits.dev/text-animations/fold-text)
   มาเป็น CSS ล้วน (ไม่ใช้ GSAP) ให้ใช้ได้ทั้งระบบ

   คอนเซ็ปต์: หัวข้อ "พับลงมา" จากบานพับด้านบน (rotateX) พร้อมเงารอยพับ
              จาง ๆ แล้วคลี่ออกเป็นปกติ — เล่นครั้งเดียวตอนเลื่อนมาเห็น
              ไม่มี hover ไม่มี loop ไม่มีวิ้ง

   ปรับจูนทั้งระบบได้ที่ :root ด้านล่างจุดเดียว
   ========================================================= */

:root {
  --yd-fold-dur: 0.58s;           /* ความเร็วการพับต่อชิ้น */
  --yd-fold-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* ผ่อนออกนุ่ม ไม่มีเด้ง */
  --yd-fold-perspective: 620px;   /* ความลึก 3D */
  --yd-fold-angle: -82deg;        /* องศาที่พับขึ้นไปก่อนคลี่ */
  --yd-fold-crease: 0.28;         /* ความเข้มของเงารอยพับ (0 = ปิด) */
  --yd-fold-rise: 7px;            /* ระยะลอยขึ้นของ eyebrow / คำโปรย */
}

/* ---------- ชิ้นส่วนที่ถูกพับ ---------- */
.yd-fold__pc {
  position: relative;
  display: inline-block;
  line-height: inherit;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
}

/* ชิ้นที่เป็น element เดิมของหน้า (เช่น <i class="bi">) — ไม่แตะ display เว้นแต่เป็น inline */
.yd-fold__pc--el {
  transform-origin: 50% 0%;
  backface-visibility: hidden;
}
.yd-fold__pc--ib {
  display: inline-block;
}

/* armed = ตั้งท่าไว้ก่อน (ยังไม่เล่น) */
.yd-fold--armed .yd-fold__pc,
.yd-fold--armed .yd-fold__pc--el {
  opacity: 0;
  transform: perspective(var(--yd-fold-perspective)) rotateX(var(--yd-fold-angle));
}

/* in = สั่งเล่น */
.yd-fold--in .yd-fold__pc,
.yd-fold--in .yd-fold__pc--el {
  animation: ydFoldIn var(--yd-fold-dur) var(--yd-fold-ease) both;
  animation-delay: var(--yd-fold-d, 0s);
  will-change: transform, opacity;
}

@keyframes ydFoldIn {
  from {
    opacity: 0;
    transform: perspective(var(--yd-fold-perspective)) rotateX(var(--yd-fold-angle));
  }
  to {
    opacity: 1;
    transform: perspective(var(--yd-fold-perspective)) rotateX(0deg);
  }
}

/* ---------- เงารอยพับ (เฉพาะชิ้นที่เป็นข้อความ ไม่ไปทับ ::after ของ component เดิม) ---------- */
.yd-fold__pc::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.02em;
  pointer-events: none;
  border-radius: 0.1em;
  opacity: 0;
  mix-blend-mode: multiply;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.5) 0%,
    rgba(15, 23, 42, 0.16) 45%,
    rgba(255, 255, 255, 0.2) 100%
  );
}
.yd-fold--in .yd-fold__pc::after {
  animation: ydFoldCrease var(--yd-fold-dur) var(--yd-fold-ease) both;
  animation-delay: var(--yd-fold-d, 0s);
}
@keyframes ydFoldCrease {
  from {
    opacity: var(--yd-fold-crease);
  }
  to {
    opacity: 0;
  }
}

/* ---------- ตัวประกอบ: eyebrow / คำโปรย ลอยขึ้นเบา ๆ ให้ hero เป็นชุดเดียวกัน ---------- */
.yd-fold-rise {
  opacity: 0;
}
.yd-fold-rise--in {
  animation: ydFoldRise 0.55s var(--yd-fold-ease) both;
  animation-delay: var(--yd-fold-d, 0s);
}
@keyframes ydFoldRise {
  from {
    opacity: 0;
    transform: translateY(var(--yd-fold-rise));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- เคารพ prefers-reduced-motion (JS ก็ข้ามอยู่แล้ว — อันนี้กันชั้นสอง) ---------- */
@media (prefers-reduced-motion: reduce) {
  .yd-fold--armed .yd-fold__pc,
  .yd-fold--armed .yd-fold__pc--el,
  .yd-fold--in .yd-fold__pc,
  .yd-fold--in .yd-fold__pc--el,
  .yd-fold-rise,
  .yd-fold-rise--in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .yd-fold__pc::after {
    opacity: 0 !important;
    animation: none !important;
  }
}

/* ---------- พิมพ์ออกกระดาษ = ไม่เอาเอฟเฟกต์ ---------- */
@media print {
  .yd-fold--armed .yd-fold__pc,
  .yd-fold--armed .yd-fold__pc--el,
  .yd-fold-rise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}