/* ──────────────────────────────────────────────────────────────────────────
   DEKTHAI Goal — เอฟเฟกต์เรียบหรู (คู่กับ goal-fx.js) · เขียนเองทั้งหมด ไม่ใช้/ไม่พอร์ตโค้ดของ React Bits
   แนวคิด: ขยับให้น้อยแต่ละเมียด — ค่อย ๆ ปรากฏ · ตัวเลขไหลขึ้น · แสงตามเมาส์บาง ๆ · จุดกริดตอบสนองเมาส์
   กติกา: สีมาจาก Design System (ink / lime) เท่านั้น · ไม่มี gradient รุนแรง · เคารพ prefers-reduced-motion (ปิดทั้งหมด)
   ทุกเอฟเฟกต์เป็น "เสริม" — ไม่มี JS หรือปิดแอนิเมชัน เนื้อหาก็ครบและมองเห็นปกติ (สถานะซ่อนเริ่มต้นอยู่ใต้ .fx-on ซึ่ง JS เป็นคนใส่)
   ────────────────────────────────────────────────────────────────────────── */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--fx-ease:cubic-bezier(.2,.8,.2,1)}

/* ── ปรากฏเมื่อเลื่อนถึง (reveal) ── */
.fx-on [data-reveal]:not(.fx-in){opacity:0;transform:translateY(18px)}
.fx-on [data-reveal]{transition:opacity .8s var(--fx-ease),transform .8s var(--fx-ease);transition-delay:var(--fx-d,0ms)}
/* การ์ดทยอยขึ้นทีละใบ — JS ใส่ .fx-a ให้เฉพาะตอนเปลี่ยนแท็บ/วัน แล้วถอดออกเมื่อจบ */
.fx-on .fx-a{animation:fx-up .5s var(--fx-ease) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes fx-up{from{opacity:0;transform:translateY(14px)}}

/* ── หัวข้อทีละคำ (blur → คมชัด) ── */
.fx-on [data-words] .fx-w{display:inline-block;transition:opacity .9s var(--fx-ease),filter .9s var(--fx-ease),transform .9s var(--fx-ease);transition-delay:calc(var(--i,0)*80ms + var(--fx-d,0ms))}
.fx-on [data-words]:not(.fx-in) .fx-w{opacity:0;filter:blur(10px);transform:translateY(.4em)}

/* ── ตัวหนังสือมีประกายวิ่งผ่าน (shiny) ── */
.fx-on .fx-shiny{color:var(--ink);background:linear-gradient(110deg,var(--ink) 38%,#8B92A0 50%,var(--ink) 62%) 0 0/240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fx-shine 3.6s linear infinite}
.fx-on .fx-shiny.dark{color:var(--accent);background-image:linear-gradient(110deg,var(--accent) 38%,#FFFFFF 50%,var(--accent) 62%)}
@keyframes fx-shine{from{background-position:120% 0}to{background-position:-120% 0}}

/* ── แสงตามเมาส์บนการ์ด (spotlight) — เฉพาะอุปกรณ์ที่มีเมาส์ ── */
[data-spotlight]{position:relative;isolation:isolate}
[data-spotlight]::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(212,255,62,.26),transparent 72%)}
@media (hover:hover) and (pointer:fine){[data-spotlight]:hover::before{opacity:1}}

/* ── เอียงตามเมาส์ (tilt) ── */
[data-tilt]{transition:transform .25s var(--fx-ease);will-change:transform}

/* ── เส้นขอบเรืองวิ่งรอบการ์ด (star border) ── */
.fx-star{position:relative}
.fx-on .fx-star::after{content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 62%,var(--accent) 82%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fx-orbit 7s linear infinite}
@keyframes fx-orbit{to{--ang:360deg}}

/* ── กริดจุดตอบสนองเมาส์ (พื้นหลัง) ── */
.fx-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(75% 80% at 62% 38%,#000 20%,transparent 100%);mask-image:radial-gradient(75% 80% at 62% 38%,#000 20%,transparent 100%)}
[data-dots]{position:relative}
[data-dots]>*:not(.fx-dots){position:relative;z-index:1}

/* ── ประกายตอนทำเสร็จ (spark) ── */
.fx-spark{position:fixed;width:0;height:0;pointer-events:none;z-index:120}
.fx-spark i{position:absolute;left:-1px;top:0;width:2px;height:9px;border-radius:2px;background:var(--accent-dark);transform-origin:50% 0;animation:fx-spark .6s ease-out forwards}
.fx-spark i:nth-child(3n){background:var(--ink);height:6px}
@keyframes fx-spark{from{opacity:1;transform:rotate(var(--a)) translateY(14px)}to{opacity:0;transform:rotate(var(--a)) translateY(34px) scaleY(.3)}}

/* ── วงแหวน/แถบเติมอย่างนุ่มนวล (ค่ามาจาก data-ring / data-bar) ── */
.fx-on [data-ring]{transition:--p 1s var(--fx-ease)}
.fx-on i[data-bar]{transition:width .9s var(--fx-ease)}

@media (prefers-reduced-motion:reduce){
  .fx-on [data-reveal],.fx-on [data-words] .fx-w,.fx-on .fx-a,.fx-on .fx-shiny,.fx-on .fx-star::after,[data-tilt],.fx-on [data-ring],.fx-on i[data-bar]{animation:none!important;transition:none!important}
  .fx-on [data-reveal]:not(.fx-in){opacity:1!important;transform:none!important}
  .fx-on [data-words]:not(.fx-in) .fx-w{opacity:1!important;filter:none!important;transform:none!important}
  .fx-spark{display:none}
}