/* ============================================================ FORMATIX CREATIONS — motion layer ระดับการเคลื่อนไหวคุมด้วยคลาสบน : motion-full ทุกอย่างทำงาน (ค่าเริ่มต้น) motion-subtle เหลือแค่การจางเข้าและ hover เบา ๆ motion-off ปิดทั้งหมด ============================================================ */ /* ---------- 1. แถบความคืบหน้าการเลื่อน ---------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; pointer-events: none; background: transparent; } .progress i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 0 2px 2px 0; transition: width .12s linear; } /* ---------- 2. เปิดหน้าเว็บ: แถบเมนูไล่กันเข้ามา ---------- */ .topbar .brand, .topbar .tabs, .topbar .acct { opacity: 0; } body.is-ready .topbar .brand { animation: drop-in .6s .05s var(--ease) both; } body.is-ready .topbar .tabs { animation: drop-in .6s .16s var(--ease) both; } body.is-ready .topbar .acct { animation: drop-in .6s .24s var(--ease) both; } body.is-ready .tabbar-item { animation: rise-in .5s var(--ease) both; } body.is-ready .tabbar-item:nth-child(2) { animation-delay: .07s; } body.is-ready .tabbar-item:nth-child(3) { animation-delay: .14s; } @keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---------- 3. หน้าเปิดจบแบบซูมออก ---------- */ .splash.is-gone { transform: scale(1.08); filter: blur(10px); } .splash { transition: opacity .55s var(--ease), visibility .55s, transform .55s var(--ease), filter .55s var(--ease); } /* ---------- 4. เนื้อหาโผล่ตอนเลื่อนถึง (ไล่ทีละใบ) ---------- */ .reveal { transition-delay: var(--d, 0ms); } /* หัวข้อไหลขึ้นจากใต้เส้น */ .rise-mask { overflow: hidden; } .rise-mask > * { display: block; transform: translateY(105%); transition: transform .8s var(--ease) var(--d, 0ms); } .rise-mask.is-in > * { transform: none; } /* ---------- 5. hover การ์ดแอป: แสงกวาดผ่าน + ไอคอนขยับ ---------- */ .app-card, .card { position: relative; } .app-card { overflow: hidden; } .app-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(98, 54, 238, .06) 50%, transparent 58%); transform: translateX(-130%); } .app-card:hover::after { animation: sheen .85s var(--ease) forwards; } @keyframes sheen { to { transform: translateX(130%); } } .app-icon { transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .app-card:hover .app-icon, .feature:hover .app-icon { transform: scale(1.06) rotate(-2.5deg); box-shadow: 0 12px 24px -12px rgba(98, 54, 238, .45); } .get { position: relative; overflow: hidden; } .app-card:hover .get:not(.is-soon) { transform: translateX(-2px); } .get { transition: background .2s, color .2s, transform .25s var(--ease); } /* ---------- 6. โลโก้บนแถบเมนู: กลิตช์ตอนชี้ ---------- */ .brand img { transition: transform .3s var(--ease); } .brand:hover img { animation: brand-glitch .5s steps(1) 1; } @keyframes brand-glitch { 0% { transform: none; filter: none; } 15% { transform: translate(-2px, 1px) skewX(6deg); filter: hue-rotate(-50deg) saturate(2); } 30% { transform: translate(2px, -1px) skewX(-5deg); filter: hue-rotate(60deg) saturate(2); } 45% { transform: translate(-1px, 0); filter: none; } 60% { transform: translate(1px, 1px) skewX(3deg); filter: hue-rotate(-30deg); } 100% { transform: none; filter: none; } } /* ---------- 7. ปุ่มหลัก: ไล่สีไหลตอนชี้ ---------- */ .btn-primary, .seg.is-on, .tab.is-on { background-size: 200% 100%; transition: background-position .6s var(--ease), filter .25s, box-shadow .25s, transform .18s var(--ease); } .btn-primary:hover { background-position: 100% 0; } /* ---------- 8. ปุ่มลัดติดต่อ + รายการช่องทาง ---------- */ .contact-ico { transition: transform .3s var(--ease), background .2s; } .contact:hover .contact-ico { transform: scale(1.08) rotate(-4deg); } /* ---------- 9. ดาวให้คะแนน: เด้งตอนเลือก ---------- */ .star.is-on { animation: star-pop .34s var(--ease); } @keyframes star-pop { 0% { transform: scale(1); } 45% { transform: scale(1.38); } 100% { transform: scale(1); } } /* ---------- 10. แถบเมนูล่าง: ไอคอนเด้งตอนเลือก (ตัวบอกตำแหน่งคือเม็ดเลนส์ .tab-lens — glass.js) ---------- */ .tabbar-item.is-on svg { animation: star-pop .38s var(--ease); } /* ---------- 12. โครงร่างตอนกำลังโหลด ---------- */ .skeleton-card { height: 320px; border-radius: var(--r-xl); background: linear-gradient(100deg, var(--surface-2) 28%, var(--surface) 42%, var(--surface-2) 58%); background-size: 300% 100%; animation: shimmer 1.5s linear infinite; } @keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } } /* ---------- 13. ตัวเลขสรุปบนแถบข้าง ---------- */ .rail-stat b { transition: color .3s; } /* ============================================================ 14. ลายเซ็น glitch — "สัญญาณสะดุด" สั้น ๆ แล้วกลับเป็นปกติ ไม่กระพริบค้าง ============================================================ */ /* ตัวอักษร: — app.js ใส่ .is-glitch ให้ทีละครั้ง (ตอนหัวข้อเลื่อนเข้าจอ · ตอนชี้เมาส์ · และสุ่มเป็นระยะแบบไม่ถี่) แล้วถอดออกเมื่อจบ */ .gx { position: relative; } .gx::before, .gx::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; -webkit-text-stroke: 0; white-space: inherit; } .gx::before { color: var(--gl-a); } .gx::after { color: var(--gl-b); } .gx.is-glitch { animation: gx-jolt .56s steps(1) 1; } .gx.is-glitch::before { animation: gx-a .56s steps(1) 1; } .gx.is-glitch::after { animation: gx-b .56s steps(1) 1; } @keyframes gx-jolt { 0%, 100% { transform: none; } 18% { transform: translateX(2px) skewX(-6deg); } 36% { transform: translateX(-2px); } 54% { transform: none; } 72% { transform: translateX(1px) skewX(3deg); } 86% { transform: none; } } @keyframes gx-a { 0% { opacity: .95; clip-path: inset(8% 0 72% 0); transform: translate(-5px, 0); } 16% { clip-path: inset(62% 0 10% 0); transform: translate(4px, 0); } 32% { clip-path: inset(36% 0 44% 0); transform: translate(-3px, 0); } 48% { clip-path: inset(84% 0 2% 0); transform: translate(5px, 0); } 64% { clip-path: inset(0 0 90% 0); transform: translate(-2px, 0); } 80% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); } 100% { opacity: 0; } } @keyframes gx-b { 0% { opacity: .95; clip-path: inset(70% 0 12% 0); transform: translate(5px, 0); } 16% { clip-path: inset(18% 0 64% 0); transform: translate(-4px, 0); } 32% { clip-path: inset(52% 0 30% 0); transform: translate(3px, 0); } 48% { clip-path: inset(4% 0 80% 0); transform: translate(-5px, 0); } 64% { clip-path: inset(88% 0 0 0); transform: translate(2px, 0); } 80% { clip-path: inset(26% 0 58% 0); transform: translate(-2px, 0); } 100% { opacity: 0; } } /* ภาพปกการ์ด: ฉีกเป็นแถบแล้วคืนรูปตอนชี้ */ .update:hover .update-thumb img, .feature:hover .feature-cover img, .intro-mark:hover .gl-base { animation: img-tear .46s steps(1) 1; } @keyframes img-tear { 0% { clip-path: inset(0); filter: none; } 14% { clip-path: inset(10% 0 56% 0); transform: translateX(-7px) scale(1.04); filter: hue-rotate(50deg) saturate(1.7); } 28% { clip-path: inset(44% 0 24% 0); transform: translateX(6px) scale(1.04); filter: hue-rotate(-50deg) saturate(1.5); } 42% { clip-path: inset(72% 0 4% 0); transform: translateX(-3px) scale(1.04); filter: none; } 56% { clip-path: inset(0); transform: translateX(2px) scale(1.04); } 70%, 100% { clip-path: inset(0); transform: scale(1.04); filter: none; } } /* เส้นสแกนวาบบนภาพ — แถบสีสองสีกวาดลงครั้งเดียว */ .update-thumb::after, .feature-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, transparent 0 46%, color-mix(in srgb, var(--gl-a) 55%, transparent) 46% 48%, transparent 48% 70%, color-mix(in srgb, var(--gl-b) 55%, transparent) 70% 71%, transparent 71%); mix-blend-mode: screen; } .update:hover .update-thumb::after, .feature:hover .feature-cover::before { animation: scan-flash .46s steps(1) 1; } @keyframes scan-flash { 0% { opacity: 1; transform: translateY(-30%); } 25% { transform: translateY(10%); } 50% { opacity: .8; transform: translateY(-12%); } 75% { opacity: 0; } 100% { opacity: 0; } } /* สไลด์ใหม่เข้ามา: ภาพฉีกเป็นแถบสั้น ๆ พร้อมกับหัวข้อ */ .slide.is-on .slide-media { animation: media-tear .5s .06s steps(1) 1; } @media (max-width: 820px) { .slide.is-on .slide-media { animation: none; } } @keyframes media-tear { 0% { clip-path: inset(0); filter: none; } 20% { clip-path: inset(0 0 58% 0); filter: hue-rotate(60deg) saturate(1.8); } 40% { clip-path: inset(34% 0 0 0); filter: hue-rotate(-50deg); } 60% { clip-path: inset(0 0 12% 0); filter: none; } 100% { clip-path: inset(0); filter: none; } } /* ปุ่มหลัก: ตัวหนังสือแยกสีแวบเดียวตอนชี้ */ .btn-primary:hover:not(:disabled) { animation: btn-split .38s steps(1) 1; } @keyframes btn-split { 0% { text-shadow: -2px 0 var(--gl-a), 2px 0 var(--gl-b); } 35% { text-shadow: 2px 0 var(--gl-a), -2px 0 var(--gl-b); } 70% { text-shadow: -1px 0 var(--gl-a), 1px 0 var(--gl-b); } 100% { text-shadow: none; } } /* ============================================================ ระดับการเคลื่อนไหว ============================================================ */ html.motion-subtle .app-card:hover::after, html.motion-subtle .brand:hover img, html.motion-subtle .tabbar-item.is-on svg, html.motion-subtle .star.is-on, html.motion-subtle .gx.is-glitch, html.motion-subtle .gx.is-glitch::before, html.motion-subtle .gx.is-glitch::after, html.motion-subtle .update:hover .update-thumb img, html.motion-subtle .feature:hover .feature-cover img, html.motion-subtle .update:hover .update-thumb::after, html.motion-subtle .feature:hover .feature-cover::before, html.motion-subtle .slide.is-on .slide-media, html.motion-subtle .btn-primary:hover, html.motion-subtle .intro-orb, html.motion-subtle .cosmo, html.motion-subtle .dawn { animation: none; } html.motion-subtle .slide-glyph, html.motion-subtle .gl-r, html.motion-subtle .gl-g { animation: none; } html.motion-subtle .slide.is-on .slide-media img, html.motion-subtle .slide.is-on .slide-fallback { animation: none; } html.motion-subtle .rise-mask > * { transform: none; } html.motion-subtle .app-card:hover .app-icon, html.motion-subtle .feature:hover .app-icon, html.motion-subtle .contact:hover .contact-ico { transform: none; } html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition-duration: .01ms !important; } html.motion-off .reveal { opacity: 1 !important; transform: none !important; } html.motion-off .rise-mask > * { transform: none !important; } html.motion-off .topbar .brand, html.motion-off .topbar .tabs, html.motion-off .topbar .acct { opacity: 1 !important; } html.motion-off .progress, html.motion-off .splash-bar { display: none; } @media (prefers-reduced-motion: reduce) { .rise-mask > * { transform: none !important; } .topbar .brand, .topbar .tabs, .topbar .acct { opacity: 1 !important; } .progress i { transition: none; } }