/* =====================================================================================
   ลูกเล่นเฉพาะหน้าแรก (index.php) — คู่กับ js/tm-home.js
   5) Intro เปิดเว็บ   6) หัวข้อ hero ทีละคำ   2) ค้นหาแบบมีรูปขึ้นทันที
   7) เคอร์เซอร์วงแหวนทอง   8) รายการแนะนำเลื่อนแนวนอน   11) ความเคลื่อนไหวจริงวันนี้
   ===================================================================================== */

/* ---------- 5) Intro (ครั้งแรกที่เข้าเว็บในแต่ละครั้ง) ---------- */
.intro{display:none;}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;}
html.intro-on body{overflow:hidden;}
.intro::before,.intro::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--ink,#0b0b0c);transition:transform 1s cubic-bezier(.76,0,.24,1);}
.intro::before{top:0;} .intro::after{bottom:0;}
.intro.is-out::before{transform:translateY(-101%);} .intro.is-out::after{transform:translateY(101%);}
.intro-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;transition:opacity .45s ease,transform .8s cubic-bezier(.76,0,.24,1);}
.intro.is-out .intro-in{opacity:0;transform:scale(.96);}
.intro-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(34px,6vw,64px);letter-spacing:.32em;padding-left:.32em;color:#fff;white-space:nowrap;display:flex;}
.intro-name i{font-style:normal;display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);animation:intro-ch .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 55ms + .1s);}
.intro-name i.sp{width:.35em;}
.intro-logo{max-width:min(70vw,360px);max-height:120px;opacity:0;clip-path:inset(0 100% 0 0);animation:intro-logo 1.1s cubic-bezier(.2,.7,.2,1) .1s forwards;}
.intro-line{width:min(240px,50vw);height:1px;margin-top:22px;background:linear-gradient(90deg,transparent,var(--gold,#c8a45d),transparent);transform:scaleX(0);animation:intro-line 1s cubic-bezier(.2,.7,.2,1) .45s forwards;}
.intro-tag{margin-top:14px;font-family:'Prompt',Tahoma,sans-serif;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold,#c8a45d);opacity:0;animation:intro-fade .8s ease .75s forwards;}
@keyframes intro-ch{to{opacity:1;transform:none;filter:none;}}
@keyframes intro-logo{to{opacity:1;clip-path:inset(0 0 0 0);}}
@keyframes intro-line{to{transform:scaleX(1);}}
@keyframes intro-fade{to{opacity:1;}}

/* ---------- 6) หัวข้อ hero ปรากฏทีละคำ ---------- */
.hero-title.is-split{opacity:1 !important;transform:none !important;}
.hero-title .w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter .9s ease;transition-delay:calc(var(--i) * 70ms);}
.hero-title.is-go .w{opacity:1;transform:none;filter:none;}
.hero-title .w.text-shimmer{transition-property:opacity,transform,filter;}

/* ---------- 2) ค้นหาแบบมีรูปขึ้นทันที ---------- */
.sugg{position:absolute;z-index:120;background:#fff;border-radius:14px;box-shadow:0 30px 70px -18px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;font-family:'Prompt',Tahoma,sans-serif;color:var(--ink,#0b0b0c);
	opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1);max-height:min(70vh,560px);overflow-y:auto;}
.sugg.is-open{opacity:1;transform:none;pointer-events:auto;}
.sugg-h{padding:12px 18px 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text,#8a6a2b);}
.sugg-it{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 14px 8px 10px;text-decoration:none;color:inherit;border-left:3px solid transparent;}
.sugg-it:hover,.sugg-it.is-on{background:var(--ivory,#f7f4ee);border-left-color:var(--gold,#c8a45d);}
.sugg-it img{width:76px;height:56px;object-fit:cover;border-radius:6px;background:var(--ink-3,#1b1b1d);display:block;}
.sugg-it b{display:block;font-weight:500;font-size:15px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sugg-it b mark{background:none;color:var(--gold-text,#8a6a2b);font-weight:600;}
.sugg-it small{display:block;font-size:12px;color:#6b6b70;margin-top:1px;}
.sugg-it .bd{font-size:11px;font-weight:500;padding:3px 8px;background:var(--gold,#c8a45d);color:var(--ink,#0b0b0c);white-space:nowrap;}
.sugg-it .bd.is-closed{background:var(--ink,#0b0b0c);color:#fff;}
.sugg-it.is-closed img{filter:grayscale(.55);}
.sugg-z{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;text-decoration:none;color:inherit;font-size:14px;border-left:3px solid transparent;}
.sugg-z:hover,.sugg-z.is-on{background:var(--ivory,#f7f4ee);border-left-color:var(--gold,#c8a45d);}
.sugg-z span::before{content:"📍 ";}
.sugg-z em{font-style:normal;font-size:12px;color:#6b6b70;}
.sugg-all{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-top:1px solid var(--line,#ece6d8);font-size:14px;font-weight:500;color:var(--ink,#0b0b0c);text-decoration:none;background:var(--ivory,#faf8f3);}
.sugg-all:hover,.sugg-all.is-on{background:var(--line,#f1ead9);}
.sugg-all span{color:var(--gold-text,#8a6a2b);}
.sugg-none{padding:22px 18px;font-size:14px;color:#6b6b70;text-align:center;}
.sugg-load{height:2px;background:linear-gradient(90deg,transparent,var(--gold,#c8a45d),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:sugg-load 1s linear infinite;}
@keyframes sugg-load{from{background-position:-50% 0;}to{background-position:150% 0;}}

/* ---------- 7) ปุ่มขยับเข้าหาเมาส์ (magnetic) ---------- */
.mag{transition:transform .35s cubic-bezier(.2,.7,.2,1);}

/* ---------- 8) รายการแนะนำ: เลื่อนลงแล้วการ์ดไหลไปด้านข้าง ---------- */
.frail{position:relative;}
.section.frail{padding:0;}
.section.frail.is-swipe{padding:76px 0;}
.frail-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.frail-sticky > .wrap{width:100%;} /* กันหัวข้อถูกจัดกึ่งกลางในกล่อง flex */
.frail:not(.is-swipe) .frail-sticky{padding-top:72px;box-sizing:border-box;} /* เว้นที่ให้เมนูบนที่ลอยอยู่ */
.frail .section-head{margin-bottom:30px;}
.frail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;}
.frail-track{display:flex;gap:26px;padding:0 max(24px,calc((100vw - 1240px)/2));will-change:transform;}
.frail .feat{flex:0 0 clamp(300px,34vw,520px);height:min(62vh,600px);min-height:0;}
.frail .feat:first-child{grid-row:auto;flex-basis:clamp(340px,44vw,680px);}
.frail .feat:first-child h3{font-size:clamp(24px,2.4vw,32px);}
.frail-ui{display:flex;align-items:center;gap:16px;margin-top:30px;padding:0 max(24px,calc((100vw - 1240px)/2));}
.frail-no{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ink,#0b0b0c);font-variant-numeric:lining-nums tabular-nums;min-width:74px;}
.frail-no b{font-weight:600;color:var(--gold-text,#8a6a2b);}
.frail-bar{flex:1;height:2px;background:var(--line,#e7e1d5);position:relative;overflow:hidden;}
.frail-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--gold-soft,#e2c98f),var(--gold,#c8a45d));transform-origin:left;transform:scaleX(0);}
.frail-hint{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#6b6b70;}
/* มือถือ/แท็บเล็ต + ผู้ที่ปิดแอนิเมชัน: ปัดแนวนอนเอง */
.frail.is-swipe .frail-sticky{position:static;height:auto;overflow:visible;}
.frail.is-swipe .frail-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px;will-change:auto;transform:none !important;}
.frail.is-swipe .frail-track::-webkit-scrollbar{display:none;}
.frail.is-swipe .frail-track{scroll-padding-left:max(16px,calc((100vw - 1240px)/2));padding-left:max(16px,calc((100vw - 1240px)/2));padding-right:16px;}
.frail.is-swipe .frail-ui{padding:0 16px;}
.frail.is-swipe .feat{scroll-snap-align:start;flex-basis:82%;height:auto;min-height:420px;}
.frail.is-swipe .feat:first-child{flex-basis:82%;}

/* ---------- 11) ความเคลื่อนไหวจริงวันนี้ ---------- */
.live{position:fixed;z-index:43;left:16px;bottom:calc(76px + var(--fx-bottom,0px) + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 32px));display:grid;grid-template-columns:56px minmax(0,1fr) 24px;gap:12px;align-items:center;
	padding:10px 10px 10px 10px;background:rgba(255,255,255,.97);color:var(--ink,#0b0b0c);border:1px solid var(--line,#e7e1d5);box-shadow:0 20px 50px -18px rgba(0,0,0,.35);font-family:'Prompt',Tahoma,sans-serif;text-decoration:none;
	transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.live.is-show{transform:none;}
.live img{width:56px;height:56px;object-fit:cover;display:block;background:var(--ink-3,#1b1b1d);}
.live .ic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--ink,#0b0b0c);color:var(--gold,#c8a45d);font-size:22px;}
.live small{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;color:var(--gold-text,#8a6a2b);text-transform:uppercase;}
.live small::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fb35a;box-shadow:0 0 0 0 rgba(47,179,90,.6);animation:live-pulse 1.8s infinite;}
.live b{display:block;font-weight:500;font-size:13.5px;line-height:1.45;margin-top:2px;}
.live b em{font-style:normal;color:var(--gold-text,#8a6a2b);font-weight:600;}
.live button{align-self:start;width:24px;height:24px;border:0;background:none;color:#9a9aa0;font-size:16px;cursor:pointer;padding:0;}
@keyframes live-pulse{70%{box-shadow:0 0 0 8px rgba(47,179,90,0);}100%{box-shadow:0 0 0 0 rgba(47,179,90,0);}}

@media (max-width:600px){
	.sugg-it{grid-template-columns:64px minmax(0,1fr);}
	.sugg-it img{width:64px;height:48px;}
	.sugg-it .bd{display:none;}
	.live{left:12px;width:calc(100vw - 24px);bottom:calc(70px + var(--fx-bottom,0px) + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion: reduce){
	html.intro-on .intro{display:none;}
	.hero-title .w{opacity:1;transform:none;filter:none;transition:none;}
}

/* ---------- แสงสีทองวิ่งรอบขอบรูป (รายการล่าสุด) ---------- */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg;}
#latest .card-media::before{
	content:"";position:absolute;inset:0;z-index:3;pointer-events:none;padding:3px;
	background:conic-gradient(from var(--beam), transparent 0 52%, rgba(var(--gold-rgb,200,164,93),.35) 66%, var(--gold-soft,#e2c98f) 82%, var(--gold-light,#fff1c9) 88%, var(--gold,#c8a45d) 93%, transparent 98%);
	-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);
	filter:drop-shadow(0 0 6px rgba(226,201,143,.95)) drop-shadow(0 0 2px rgba(var(--gold-rgb,200,164,93),1));
	animation:beam-spin 5s linear infinite;
}
/* เริ่มคนละจังหวะ ไม่ให้ทุกใบวิ่งพร้อมกัน */
#latest .card:nth-child(3n+2) .card-media::before{animation-delay:-1.7s;}
#latest .card:nth-child(3n+3) .card-media::before{animation-delay:-3.4s;}
#latest .card:nth-child(6n+4) .card-media::before{animation-duration:5.6s;}
#latest .card:hover .card-media::before{animation-duration:2.2s;filter:drop-shadow(0 0 8px rgba(226,201,143,1));}
@keyframes beam-spin{to{--beam:360deg;}}
/* เบราว์เซอร์ที่ไม่รองรับการหมุนแบบนี้ → ไม่แสดงเส้น (กันเส้นทองค้างนิ่งครึ่งกรอบ) */
@supports not (background:conic-gradient(from 0deg, red, blue)){ #latest .card-media::before{display:none;} }
@media (prefers-reduced-motion: reduce){ #latest .card-media::before{animation:none;opacity:.5;} }