/* ==========================================================================
   Yibb — ชั้นอนิเมชั่น/ตกแต่ง (ลบไฟล์นี้ + fx.js ออกจาก index.html = กลับเป็นแบบเดิม)
   ========================================================================== */

/* ---------- hero: พื้นหลังไล่สีเคลื่อนไหว ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.hero::before{width:520px;height:520px;background:radial-gradient(circle,#FFB199 0%,transparent 70%);top:-160px;right:-120px;animation:blobA 14s ease-in-out infinite alternate}
.hero::after{width:440px;height:440px;background:radial-gradient(circle,#FFD7A8 0%,transparent 70%);bottom:-200px;left:-140px;animation:blobB 18s ease-in-out infinite alternate}
:root[data-theme="dark"] .hero::before{background:radial-gradient(circle,#7A2E1A 0%,transparent 70%)}
:root[data-theme="dark"] .hero::after{background:radial-gradient(circle,#5A3A16 0%,transparent 70%)}
@keyframes blobA{to{transform:translate(-120px,90px) scale(1.15)}}
@keyframes blobB{to{transform:translate(140px,-60px) scale(1.2)}}

/* หัวข้อ: คำว่า "หยิบ" ไล่สี + ขีดเส้นใต้วาดเอง */
.hero h1 em{background:linear-gradient(90deg,var(--accent),#FF9A3C,var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
.hero h1 em::after{transform-origin:left;animation:underline 1s .6s cubic-bezier(.2,.8,.2,1) both;opacity:.25}
@keyframes shine{to{background-position:200% center}}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* เข้าฉากตอนโหลด */
.hero .wrap>div>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero .wrap>div>*:nth-child(2){animation-delay:.08s}
.hero .wrap>div>*:nth-child(3){animation-delay:.16s}
.hero .wrap>div>*:nth-child(4){animation-delay:.24s}
.hero .wrap>div>*:nth-child(5){animation-delay:.32s}
.hero .wrap>div>*:nth-child(6){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ช่องวางลิงก์: ขอบเรืองแสงวิ่ง */
.paste{position:relative;transition:transform .25s,box-shadow .25s}
.paste::before{content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;background:conic-gradient(from var(--ang,0deg),transparent 0 60%,var(--accent) 75%,#FFB36B 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite;pointer-events:none}
.paste:focus-within{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(242,84,45,.45)}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.go{position:relative;overflow:hidden}
.go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 3.2s 1.2s ease-in-out infinite}
@keyframes sweep{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ใบคิดยอด: ลอยเบาๆ + กองการ์ดสินค้าด้านหลัง */
.receipt{animation:rise .9s .3s both,float 6s 1.2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.hero-side{position:relative}
.hero-side .chipcard{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 8px;box-shadow:var(--shadow);font-size:13px;font-weight:600;white-space:nowrap}
.hero-side .chipcard>div{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero-side .chipcard img{flex:0 0 36px;width:36px;height:36px;border-radius:9px;object-fit:cover;background:var(--surface-2)}
.hero-side .chipcard small{display:block;color:var(--muted);font-weight:500}
.hero-side .c1{width:250px;top:-56px;left:18px;animation:rise .8s .7s both,float 5s 1.5s ease-in-out infinite}
.hero-side .c2{bottom:-22px;right:-18px;animation:rise .8s .9s both,float 7s 1.7s ease-in-out infinite reverse}
@media (max-width:960px){.hero-side .c1{left:0}.hero-side .c2{right:0}}

/* ---------- แถบสินค้าเลื่อนอัตโนมัติ ---------- */
.marquee{overflow:hidden;padding:18px 0 26px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;flex-direction:row;margin:0;gap:14px;width:max-content;animation:marq 50s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .mi{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px 14px 8px 8px;min-width:230px;cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:left}
.marquee .mi:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.marquee .mi img{width:54px;height:54px;border-radius:11px;object-fit:cover;background:var(--surface-2)}
.marquee .mi b{display:block;font-size:13.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marquee .mi span{color:var(--accent);font-weight:700;font-size:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- ตัวเลขเด่น ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.stat b{display:block;font-size:30px;letter-spacing:-.03em;color:var(--accent)}
.stat span{color:var(--muted);font-size:14px}

/* ---------- เผยตอนเลื่อน ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* การ์ดต่างๆ ยกตัวตอนชี้ */
.step,.rate,.p,.stat,.faq details{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.step:hover,.rate:hover,.stat:hover{transform:translateY(-6px);box-shadow:0 18px 36px -22px rgba(26,25,23,.35);border-color:var(--accent)}
.p:hover{transform:translateY(-4px)}
.p .thumb img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.p:hover .thumb img{transform:scale(1.07)}
/* ป้ายชื่อร้านบนรูปสินค้า (แทนป้าย 1688/Taobao) */
.thumb .src.brandtag{background:var(--ink);color:var(--on-ink);letter-spacing:.02em;box-shadow:0 4px 14px -4px rgba(0,0,0,.4)}
.thumb .src.brandtag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle;box-shadow:0 0 0 3px rgba(242,84,45,.25);animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 6px rgba(242,84,45,0)}}

/* รูปสินค้าวิ่ง: รูปใหม่ขยายเป็นวงกลมจากมุมสุ่ม + ซูมเข้า + แสงวาบพาดผ่าน */
.p .thumb{position:relative;overflow:hidden}
.p .thumb>img{animation:kb 9s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08)}}
.p:hover .thumb>img{animation-play-state:paused}
.p .thumb .fx-in{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;animation:fxIn .7s cubic-bezier(.7,0,.2,1) forwards}
@keyframes fxIn{from{clip-path:circle(0% at var(--at,50% 50%));transform:scale(1.25);filter:saturate(1.6) brightness(1.15)}to{clip-path:circle(150% at var(--at,50% 50%));transform:scale(1);filter:none}}
.p .thumb::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%)}
.p .thumb.fx-shine::after{animation:fxShine .8s ease-out}
@keyframes fxShine{to{transform:translateX(120%)}}
.p .thumb .src{z-index:3}
.step::before{font-size:28px;margin-bottom:12px;background:linear-gradient(135deg,var(--accent),#FFAA55);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ราคาค่าขนส่ง: เด้งเมื่อเปลี่ยน */
#cTotal.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.12);color:var(--accent)}}

/* ตะกร้า: เด้งตอนเพิ่มของ */
.cart-count.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{30%{transform:scale(1.6)}}

/* หน้าต่างสินค้า: เปิดแบบลอยขึ้น */
dialog[open]{animation:dlg .35s cubic-bezier(.2,.8,.2,1)}
dialog::backdrop{animation:fade .3s}
@keyframes dlg{from{opacity:0;transform:translateY(30px) scale(.97)}}
@keyframes fade{from{opacity:0}}

/* กำลังโหลดสินค้าจากลิงก์ */
.loading-dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}