/* การ์ดชวนไปหน้าลอยกระทง (หน้าแรก บนสุดก่อน Hero ช่วงแคมเปญ พ.ย. 2026)
   ภาพพื้นหลังเรนเดอร์จากฉาก 3D ของ /loykrathong/ (KRATHONG_GL.scene 1920×960) — ฝั่งซ้ายเป็นฟ้าว่างไว้วางข้อความ
   ทั้งการ์ดเป็นลิงก์เดียว · ฉากเป็นกลางคืนเสมอ จึงไม่มีโหมดสว่าง/มืดแยก
   เต็มจอ (กว้างเต็ม viewport สูงเท่าจอลบ header) · ภาพซูม/เลื่อนช้าๆ โคมลอยขึ้น ปุ่มมีแสงวาบ — ปิดหมดเมื่อ reduced-motion */

.kt-promo {
  --ktp-gold: #f6c66e;
  --ktp-cream: #fff4de;
  --ktp-night: #0b1230;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  /* ทะลุ padding ของ .shell--home ออกเต็มจอ · header สูง 53px มือถือ · 59px แท็บเล็ต · 63px จอใหญ่ */
  --ktp-header: 53px;
  min-height: calc(100svh - var(--ktp-header));
  margin-inline: calc(50% - 50vw);
  margin-block: calc(-1 * var(--space-sm)) var(--space-lg);
  background: var(--ktp-night);
  color: var(--ktp-cream);
  text-decoration: none;
}

.kt-promo__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 100%; /* จอแคบยังเห็นกระทงกับวัดอรุณ */
  transform-origin: 70% 85%;
  animation: ktp-drift 26s ease-in-out infinite alternate;
}
@keyframes ktp-drift {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.12) translateX(-1.5%); }
}

/* โคมลอย: จุดไฟอุ่นลอยขึ้นฟ้าแล้วจางหาย (ตำแหน่ง/จังหวะต่อดวงตั้งใน style ของ HTML) */
.kt-promo__lanterns { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kt-promo__lanterns i {
  position: absolute;
  left: var(--x);
  bottom: 30%;
  width: calc(10px * var(--s, 1));
  height: calc(13px * var(--s, 1));
  border-radius: 40% 40% 30% 30%;
  background: radial-gradient(circle at 50% 70%, #fff1c4 0%, #f6b75a 45%, #c8642a 100%);
  box-shadow: 0 0 calc(14px * var(--s, 1)) rgba(255, 190, 100, .75);
  opacity: 0;
  animation: ktp-rise var(--t, 16s) linear var(--d, 0s) infinite;
}
@keyframes ktp-rise {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: .95; }
  50%  { transform: translate(14px, -28vh); }
  80%  { opacity: .7; }
  100% { opacity: 0; transform: translate(-6px, -58vh); }
}

/* ข้อความค่อยๆ โผล่ตอนเปิดหน้า */
.kt-promo__copy > * { animation: ktp-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.kt-promo__copy > :nth-child(2) { animation-delay: .12s; }
.kt-promo__copy > :nth-child(3) { animation-delay: .24s; }
.kt-promo__copy > :nth-child(4) { animation-delay: .4s; }
@keyframes ktp-in { from { opacity: 0; transform: translateY(14px); } }

/* ลูกศรบอกว่ามีร้านอยู่ข้างล่าง (ตกแต่งเฉยๆ ทั้งแบนเนอร์เป็นลิงก์) */
.kt-promo__more {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  color: rgba(255, 244, 222, .75);
  font: 500 .8rem/1 var(--font-body);
  text-shadow: 0 1px 2px rgba(4, 8, 26, .9);
  animation: ktp-bob 2.4s ease-in-out infinite;
}
@keyframes ktp-bob { 50% { transform: translateY(5px); } }

/* เงาไล่จากซ้าย/บน ให้ข้อความอ่านง่ายบนฟ้าเส้นแปรง */
.kt-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(8, 12, 34, .72) 0%, rgba(8, 12, 34, .3) 55%, rgba(8, 12, 34, 0) 75%);
}

.kt-promo__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  max-width: 34rem;
  padding: 1.75rem 1.5rem;
  text-shadow: 0 1px 2px rgba(4, 8, 26, .9), 0 0 18px rgba(4, 8, 26, .8);
}

.kt-promo__kicker {
  margin: 0;
  color: var(--ktp-gold);
  font: 500 .95rem/1.2 var(--font-body);
}

.kt-promo__title {
  margin: 0;
  color: var(--ktp-cream);
  font: 500 clamp(2.1rem, 7vw, 3.6rem)/1.1 var(--font-display);
  text-wrap: balance;
}
.kt-promo__title em { color: var(--ktp-gold); font-style: normal; }

.kt-promo__sub {
  margin: 0;
  max-width: 28rem;
  font: 400 1rem/1.6 var(--font-body);
  color: rgba(255, 244, 222, .92);
}

.kt-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .4rem;
  padding: .6rem 1.3rem;
  border-radius: 999px;
  background: var(--ktp-gold);
  color: var(--ktp-night);
  font: 600 1rem/1 var(--font-body);
  text-shadow: none;
  box-shadow: 0 6px 20px rgba(246, 198, 110, .28);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* แสงวาบพาดปุ่มทุก ~4 วิ */
.kt-promo__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
  translate: -120% 0;
  animation: ktp-shine 4.2s ease-in-out 1.4s infinite;
}
@keyframes ktp-shine { 0%, 55% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
.kt-promo__cta::after { content: "→"; transition: transform .2s ease; }

.kt-promo:hover .kt-promo__cta { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(246, 198, 110, .42); }
.kt-promo:hover .kt-promo__cta::after { transform: translateX(3px); }
.kt-promo:focus-visible { outline: 3px solid var(--ktp-gold); outline-offset: 3px; }

@media (min-width: 48rem) { .kt-promo { --ktp-header: 59px; } }

@media (min-width: 60rem) {
  .kt-promo { --ktp-header: 63px; margin-block-start: calc(-1 * var(--space-lg)); }
}

@media (min-width: 860px) {
  .kt-promo { align-items: center; }
  .kt-promo::before {
    background: linear-gradient(to right, rgba(8, 12, 34, .78) 0%, rgba(8, 12, 34, .45) 38%, rgba(8, 12, 34, 0) 62%);
  }
  .kt-promo__copy { max-width: 40rem; padding: 2.5rem clamp(3rem, 7vw, 7rem); }
  .kt-promo__art { object-position: 60% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kt-promo__art, .kt-promo__cta, .kt-promo__cta::after { transition: none; }
  .kt-promo__art, .kt-promo__copy > *, .kt-promo__cta::before, .kt-promo__more { animation: none; }
  .kt-promo__lanterns { display: none; }
  .kt-promo:hover .kt-promo__cta { transform: none; }
}