/* ===================================================================== เอฟเฟกต์ตอนเอาเมาส์ชี้การ์ดสินค้า / การ์ดหมวดหมู่ เลือกที่หลังบ้าน > ปรับแต่งหน้าตาร้าน > สไตล์รวม > เอฟเฟกต์ตอนชี้การ์ด (body class ls-hover-*) - shine แสงกระจกวิ่ง (ค่าเริ่มต้น อยู่ใน motion.css) - glow ไฟเรืองรอบการ์ด - border ไฟวิ่งรอบขอบ - sweep ไฟเลื่อนเฉียง ล่างซ้าย -> ขวาบน - spotlight แสงส่องตามเมาส์ - tilt เอียง 3 มิติตามเมาส์ + แสงสะท้อน - zoom ซูมรูป + ยกการ์ด - none ไม่มีเอฟเฟกต์ ตำแหน่งเมาส์ (--hx/--hy/--rx/--ry) ใส่โดย assets/js/hover-effects.js ใช้เฉพาะอุปกรณ์ที่มีเมาส์ (hover: hover) มือถือไม่มีผล ขยับเฉพาะตอนลูกค้าเอาเมาส์ชี้เอง จึงไม่ปิดตามการตั้งค่าลดการเคลื่อนไหวของเครื่อง ===================================================================== */ @property --hfx-angle { syntax: ''; initial-value: 0deg; inherits: false; } @media (hover: hover) { /* ---------- ไฟเรืองรอบการ์ด ---------- */ body.ls-hover-glow #appContentArea .gaming-product-card, body.ls-hover-glow #appContentArea .wide-category-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } body.ls-hover-glow #appContentArea .gaming-product-card:hover, body.ls-hover-glow #appContentArea .wide-category-card:hover { transform: translateY(-5px) !important; border-color: var(--app-primary, #38bdf8) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-primary, #38bdf8) 70%, transparent), 0 0 22px color-mix(in srgb, var(--app-primary, #38bdf8) 55%, transparent), 0 0 48px color-mix(in srgb, var(--app-secondary, #6366f1) 35%, transparent), 0 18px 36px -18px rgba(0, 0, 0, .6) !important; } /* ---------- ไฟวิ่งรอบขอบ ---------- */ body.ls-hover-border #appContentArea .gaming-product-card, body.ls-hover-border #appContentArea .wide-category-card { isolation: isolate; } body.ls-hover-border #appContentArea .gaming-product-card::after, body.ls-hover-border #appContentArea .wide-category-card::after { content: ""; position: absolute; inset: 0; z-index: 5; padding: 2.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--hfx-angle), transparent 0deg, var(--app-primary, #38bdf8) 50deg, #fff 80deg, var(--app-secondary, #6366f1) 110deg, transparent 160deg, transparent 180deg, var(--app-primary, #38bdf8) 230deg, #fff 260deg, var(--app-secondary, #6366f1) 290deg, transparent 340deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; translate: none; transition: opacity .12s ease; } body.ls-hover-border #appContentArea .gaming-product-card:hover::after, body.ls-hover-border #appContentArea .wide-category-card:hover::after { opacity: 1; animation: hfxSpin 1.8s linear infinite; } body.ls-hover-border #appContentArea .gaming-product-card:hover, body.ls-hover-border #appContentArea .wide-category-card:hover { transform: translateY(-3px) !important; box-shadow: 0 0 26px color-mix(in srgb, var(--app-primary, #38bdf8) 35%, transparent) !important; } @keyframes hfxSpin { to { --hfx-angle: 360deg; } } /* ---------- ไฟเลื่อนเฉียง ล่างซ้าย -> ขวาบน (วนตอนชี้ค้างไว้) ---------- */ /* ใช้ background-position แทนการเลื่อนชิ้นแสง จึงไม่ล้นออกนอกการ์ด */ body.ls-hover-sweep #appContentArea .gaming-product-card::after, body.ls-hover-sweep #appContentArea .wide-category-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: linear-gradient(45deg, transparent 42%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, .55) 50%, color-mix(in srgb, var(--app-primary, #38bdf8) 35%, transparent) 53%, transparent 58%); background-size: 300% 300%; background-position: 80% 20%; background-repeat: no-repeat; opacity: 0; translate: none; transition: opacity .2s ease; } body.ls-hover-sweep #appContentArea .gaming-product-card:is(:hover, .hfx-run)::after, body.ls-hover-sweep #appContentArea .wide-category-card:is(:hover, .hfx-run)::after { opacity: 1; transition: none; animation: hfxSweep 1.5s cubic-bezier(.25, .6, .35, 1) infinite; } body.ls-hover-sweep #appContentArea .gaming-product-card:hover, body.ls-hover-sweep #appContentArea .wide-category-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--app-primary, #38bdf8) 60%, transparent) !important; } /* เริ่มที่มุมซ้ายล่างทันที (ไม่มีช่วงรอ) วิ่งถึงมุมขวาบนใน ~0.8 วิ แล้วพักก่อนรอบถัดไป */ @keyframes hfxSweep { 0% { background-position: 80% 20%; } 55%, 100% { background-position: 20% 80%; } } /* ---------- แสงส่องตามเมาส์ ---------- */ body.ls-hover-spotlight #appContentArea .gaming-product-card::after, body.ls-hover-spotlight #appContentArea .wide-category-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: radial-gradient(320px circle at var(--hx, 50%) var(--hy, 50%), rgba(255, 255, 255, .38), color-mix(in srgb, var(--app-primary, #38bdf8) 22%, transparent) 38%, transparent 70%); mix-blend-mode: screen; opacity: 0; translate: none; transition: opacity .25s ease; } body.ls-hover-spotlight #appContentArea .gaming-product-card:hover::after, body.ls-hover-spotlight #appContentArea .wide-category-card:hover::after { opacity: 1; } body.ls-hover-spotlight #appContentArea .gaming-product-card:hover, body.ls-hover-spotlight #appContentArea .wide-category-card:hover { border-color: color-mix(in srgb, var(--app-primary, #38bdf8) 80%, #fff) !important; } /* ---------- เอียง 3 มิติตามเมาส์ + แสงสะท้อน ---------- */ body.ls-hover-tilt #appContentArea .gaming-product-card, body.ls-hover-tilt #appContentArea .wide-category-card { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) !important; transition: transform .15s ease-out, box-shadow .3s ease !important; will-change: transform; } body.ls-hover-tilt #appContentArea .gaming-product-card:not(:hover), body.ls-hover-tilt #appContentArea .wide-category-card:not(:hover) { transition: transform .5s ease, box-shadow .3s ease !important; } body.ls-hover-tilt #appContentArea .gaming-product-card:hover, body.ls-hover-tilt #appContentArea .wide-category-card:hover { box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in srgb, var(--app-primary, #38bdf8) 60%, transparent) !important; } body.ls-hover-tilt #appContentArea .gaming-product-card::after, body.ls-hover-tilt #appContentArea .wide-category-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: linear-gradient(calc(var(--rx-num, 0) * 6deg + 115deg), transparent 30%, rgba(255, 255, 255, .25) 48%, transparent 66%); background-size: 200% 200%; background-position: var(--hx, 50%) var(--hy, 50%); opacity: 0; translate: none; transition: opacity .25s ease; } body.ls-hover-tilt #appContentArea .gaming-product-card:hover::after, body.ls-hover-tilt #appContentArea .wide-category-card:hover::after { opacity: 1; } /* ---------- ซูมรูป + ยกการ์ด ---------- */ body.ls-hover-zoom #appContentArea .gaming-img-wrapper img { transition: transform .5s cubic-bezier(.2, .7, .2, 1) !important; } body.ls-hover-zoom #appContentArea .gaming-product-card:hover .gaming-img-wrapper img { transform: scale(1.12) !important; } body.ls-hover-zoom #appContentArea .gaming-product-card:hover, body.ls-hover-zoom #appContentArea .wide-category-card:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .7) !important; } body.ls-hover-zoom #appContentArea .wide-category-img { transition: transform .5s cubic-bezier(.2, .7, .2, 1) !important; } body.ls-hover-zoom #appContentArea .wide-category-card:hover .wide-category-img { transform: scale(1.12) !important; } /* ---------- ไม่มีเอฟเฟกต์ ---------- */ body.ls-hover-none #appContentArea .gaming-product-card:hover, body.ls-hover-none #appContentArea .wide-category-card:hover { transform: none !important; } body.ls-hover-none #appContentArea .gaming-product-card:hover .gaming-img-wrapper img { transform: none !important; } } /* ===================================================================== แสงวิ่งเองเป็นระยะ (ls-hover-auto) ไม่ต้องชี้เมาส์ เหมือนแบนเนอร์ข้าง ใช้ได้ทุกอุปกรณ์รวมมือถือ แต่ละการ์ดเริ่มไม่พร้อมกัน (--hfx-delay ใส่โดย hover-effects.js) ตอนชี้เมาส์จะใช้เอฟเฟกต์ปกติแทน ===================================================================== */ /* แสงกระจกวิ่ง: การ์ดสินค้า (ผ่านรูป) / การ์ดหมวดหมู่ (ทั้งใบ) */ body.ls-hover-auto.ls-hover-shine #appContentArea .gaming-img-wrapper { position: relative; overflow: hidden; } body.ls-hover-auto.ls-hover-shine #appContentArea .gaming-img-wrapper::after, body.ls-hover-auto.ls-hover-shine #appContentArea .wide-category-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.08) 56%, transparent 70%); translate: -130% 0; } body.ls-hover-auto.ls-hover-shine #appContentArea .gaming-product-card:not(:hover):not(.hfx-run) .gaming-img-wrapper::after, body.ls-hover-auto.ls-hover-shine #appContentArea .wide-category-card:not(:hover):not(.hfx-run)::after { animation: hfxIdleShine 6.5s ease-in-out infinite; animation-delay: var(--hfx-delay, 0s); } @keyframes hfxIdleShine { 0%, 78% { translate: -130% 0; } 100% { translate: 130% 0; } } /* ไฟเลื่อนเฉียง: แสงพาดผ่านทั้งการ์ดเป็นระยะ */ body.ls-hover-auto.ls-hover-sweep #appContentArea .gaming-product-card:not(:hover):not(.hfx-run)::after, body.ls-hover-auto.ls-hover-sweep #appContentArea .wide-category-card:not(:hover):not(.hfx-run)::after { opacity: 1; animation: hfxIdleSweep 6.5s ease-in-out infinite; animation-delay: var(--hfx-delay, 0s); } @keyframes hfxIdleSweep { 0%, 76% { background-position: 80% 20%; } 100% { background-position: 20% 80%; } }