/*
 * home-fx.css — เอฟเฟกต์เคลื่อนไหวของหน้าแรก (สไตล์ 21st.dev / Magic UI)
 * โหลดเฉพาะ index.php · คลาสทั้งหมดขึ้นต้นด้วย fx- · ตัวควบคุมอยู่ใน js/home.js
 *
 *   fx-tabs / fx-pill / fx-chip  ชิปตัวกรองที่มีพื้นแดงเลื่อนตามตัวที่เลือก
 *   fx-reveal                    ค่อย ๆ ลอยขึ้นตอนเลื่อนมาถึง
 *   fx-spot                      แสงไฟตามเมาส์บนการ์ด
 *   fx-lift                      การ์ดยกตัวตอน hover
 *   fx-shine                     แสงวิ่งผ่านปุ่มหลัก
 *   fx-beam                      เส้นขอบแสงวิ่งรอบกล่อง
 *   fx-arrow                     ลูกศรขยับตอน hover
 *   fx-ping                      จุดสถานะกระพริบเป็นวง
 *   fx-pop                       การ์ดเด้งเข้ามาตอนเปลี่ยนตัวกรอง
 *   fx-dot-fill                  แถบเวลาในจุดสไลด์ที่กำลังแสดง
 */

/* ---------- ชิปตัวกรอง : พื้นแดงเลื่อนตาม ---------- */
.fx-tabs { position: relative; isolation: isolate; }
.fx-pill {
    position: absolute; top: 0; left: 0; height: 100%; width: 0;
    border-radius: 9999px; z-index: 0; pointer-events: none;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow: 0 8px 18px -8px rgba(220, 38, 38, .75);
    transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1), opacity .2s;
}
.fx-chip {
    position: relative; z-index: 1;
    background: transparent; border: 1px solid #e5e7eb; color: #4b5563;
    transition: color .3s, border-color .3s, transform .15s;
}
.fx-chip:hover { border-color: #fca5a5; color: #dc2626; }
.fx-chip:active { transform: scale(.95); }
.fx-chip.is-active { color: #fff; border-color: transparent; }

/* ---------- ลอยขึ้นตอนเลื่อนมาถึง (ซ่อนเฉพาะเมื่อ JS พร้อม ไม่งั้นเนื้อหาหาย) ---------- */
.fx-ready .fx-reveal {
    opacity: 0; transform: translateY(24px) scale(.985);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--fx-delay, 0ms);
}
.fx-ready .fx-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- แสงไฟตามเมาส์ ---------- */
.fx-spot { position: relative; }
.fx-spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(239, 68, 68, .16), transparent 70%);
    opacity: 0; transition: opacity .3s;
}
.fx-spot.fx-spot-light::after {
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 70%);
}
.fx-spot:hover::after { opacity: 1; }

/* ---------- ยกตัว ---------- */
.fx-lift { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
.fx-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(185, 28, 28, .45); }

/* ---------- แสงวิ่งผ่านปุ่ม ---------- */
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: fx-shine 3.2s ease-in-out infinite;
}
@keyframes fx-shine {
    0%, 55% { left: -75%; }
    100%    { left: 130%; }
}

/* ---------- เส้นขอบแสงวิ่งรอบกล่อง ---------- */
@property --fx-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fx-beam { position: relative; isolation: isolate; }
.fx-beam::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; z-index: 1; pointer-events: none;
    background: conic-gradient(from var(--fx-angle), transparent 0 65%, #ef4444 80%, #facc15 90%, 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-spin 4.5s linear infinite;
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* ---------- ลูกศรขยับ ---------- */
.fx-arrow i { transition: transform .25s; }
.fx-arrow:hover i { transform: translateX(3px); }

/* ---------- จุดสถานะกระพริบ ---------- */
.fx-ping { position: relative; }
.fx-ping::after {
    content: ""; position: absolute; inset: 0; border-radius: 9999px; background: inherit;
    animation: fx-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes fx-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- การ์ดเด้งเข้ามา ---------- */
.fx-pop { animation: fx-pop .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--fx-delay, 0ms); }
@keyframes fx-pop {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ---------- แถบเวลาในจุดสไลด์ ---------- */
.fx-dot-fill {
    position: absolute; inset: 0; width: 0; border-radius: inherit; background: #dc2626;
    animation: fx-progress var(--fx-dur, 6000ms) linear forwards;
}
@keyframes fx-progress { to { width: 100%; } }

/* ---------- ผู้ใช้ตั้งค่าลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-ready .fx-reveal { opacity: 1; transform: none; transition: none; }
    .fx-shine::before, .fx-beam::before, .fx-ping::after, .fx-pop { animation: none; }
    .fx-dot-fill { animation: none; width: 100%; }
    .fx-pill, .fx-lift { transition: none; }
    .fx-lift:hover { transform: none; }
}