/* =====================================================================
 * assets/css/motion.css — ชุดแอนิเมชันหน้าสาธารณะ สไตล์ 21st.dev
 * ใช้คู่กับ assets/js/motion.js (ใส่คลาสอย่างเดียว ไม่ต้องเขียน JS ต่อหน้า)
 *
 *   .reveal            เลื่อนขึ้น + blur-in ตอนเลื่อนมาถึง (motion.js ติด .active)
 *   [data-stagger]     ลูกทุกตัวค่อย ๆ โผล่ทีละตัว
 *   [data-words]       หัวข้อโผล่ทีละคำแบบ blur-in
 *   .spotlight         การ์ดมีแสงวงกลมตามเมาส์ + ขอบเรืองแสง
 *   .shiny-btn         ปุ่มมีแสงวิ่งผ่าน + ขอบ gradient หมุน
 *   .aurora            พื้นหลังแสงออโรร่าเคลื่อนไหวช้า ๆ
 *   .tilt              การ์ดเอียงตามเมาส์เล็กน้อย
 * ===================================================================== */

/* ---------- reveal (override ของเดิมใน index.html ให้มี blur) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), filter .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform, filter;
}
.reveal.active { opacity: 1; transform: none; filter: none; }

[data-stagger] > * {
  opacity: 0; transform: translateY(18px) scale(.98); filter: blur(6px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), filter .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-stagger].active > * { opacity: 1; transform: none; filter: none; }

/* ---------- ข้อความโผล่ทีละคำ ---------- */
.tg-word {
  display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.35em);
  animation: tgWord .9s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--w, 0) * 60ms + 120ms);
}
@keyframes tgWord { to { opacity: 1; filter: none; transform: none; } }

/* ---------- spotlight card ---------- */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 130, 246, .14), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
.spotlight::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(6, 182, 212, .7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
}
.spotlight:hover::before, .spotlight:hover::after { opacity: 1; }

/* ---------- shiny button ---------- */
.shiny-btn { position: relative; overflow: hidden; isolation: isolate; }
.shiny-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  animation: tgShine 3.2s ease-in-out infinite;
}
@keyframes tgShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.shiny-btn { transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease; }
.shiny-btn:hover { transform: translateY(-2px); }
.shiny-btn:active { transform: translateY(0) scale(.98); }

/* ปุ่มขอบ gradient หมุน */
@property --tg-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.border-beam { position: relative; }
.border-beam::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--tg-angle), transparent 70%, #06b6d4, #3b82f6, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tgSpin 4s linear infinite;
}
@keyframes tgSpin { to { --tg-angle: 360deg; } }

/* ---------- aurora background ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute; width: 42vw; height: 42vw; max-width: 620px; max-height: 620px; border-radius: 999px;
  filter: blur(90px); opacity: .28; mix-blend-mode: normal;
  animation: tgAurora 18s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: #3b82f6; top: -12%; left: -8%; }
.aurora span:nth-child(2) { background: #06b6d4; top: 20%; right: -10%; animation-duration: 22s; animation-delay: -6s; }
.aurora span:nth-child(3) { background: #8b5cf6; bottom: -20%; left: 30%; animation-duration: 26s; animation-delay: -12s; opacity: .18; }
@keyframes tgAurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.12); }
  100% { transform: translate(-6%, -4%) scale(.95); }
}
html:not(.dark) .aurora span { opacity: .16; }

/* ---------- tilt ---------- */
.tilt { transition: transform .35s cubic-bezier(.16, 1, .3, 1); transform-style: preserve-3d; }

/* ---------- scroll progress บนสุด ---------- */
.tg-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #3b82f6, #06b6d4); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-stagger] > *, .tg-word { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .shiny-btn::after, .border-beam::before, .aurora span { animation: none !important; }
}