/* v30（11/1 深夜）：首頁「客人本來就在這三個地方」（#places）：只留名稱、數字、一個小動圖（動畫只用 CSS）。
   捲到才播（why.js 加 .is-in），離開畫面就停；減少動態停在完成的畫面。手機一排左右滑，下面小圓點。 */
.pl-sec { background: var(--wax); }
.pl-sec .sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
.pl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pl-c { --c: var(--line-green); --tint: color-mix(in srgb, var(--c) 10%, var(--card)); display: grid; grid-template-rows: auto auto 1fr; gap: 12px; min-width: 0;
  padding: 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--rule); }
.pl-c[data-p="fb"] { --c: var(--sky); }
.pl-c[data-p="web"] { --c: var(--honey-deep); }
.pl-c h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; line-height: 1.3; }
.pl-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pl-n { display: grid; gap: 4px; margin: 0; }
.pl-n b { font: 800 clamp(34px, 3.4vw, 44px)/1.08 var(--font-num); letter-spacing: -.02em; color: var(--ink); }
.pl-n span { font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.pl-art { position: relative; display: grid; place-items: center; align-self: end; height: 196px; border-radius: 16px; background: var(--tint); overflow: hidden; }
.pl-more { margin-top: 22px; text-align: center; font-size: 15.5px; }
.pl-dots { display: none; justify-content: center; gap: 6px; margin-top: 10px; }
.pl-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--rule); transition: width .2s, background-color .2s; }
.pl-dots i.is-on { width: 18px; background: var(--honey-deep); }
@media (max-width: 759.98px) {
  .pl-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 4px var(--gr) 6px var(--gl);
    scroll-padding-inline: var(--gl) var(--gr); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pl-row::-webkit-scrollbar { display: none; }
  .pl-c { flex: 0 0 82%; scroll-snap-align: start; padding: 18px; }
  .pl-dots { display: flex; }
}

/* 小動圖共用：一圈 7 秒（官網 8 秒）；離開畫面就停 */
.pl-art * { box-sizing: border-box; }
.pl-sec:not(.is-in) .pl-art * { animation-play-state: paused !important; }
.pa-b { margin: 0; max-width: 88%; padding: 5px 9px; border-radius: 12px; font: 600 10.5px/1.42 var(--font-body); }
.pa-b.is-you { justify-self: start; background: #FFFFFF; color: #1D1D1F; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pa-b.is-me { justify-self: end; background: #06C755; color: #FFFFFF; border-top-right-radius: 4px; }

/* LINE：客人問價格 → 正在輸入 → 自動回應 → 圖文選單第一格亮起來 */
.pa-phone { position: relative; align-self: end; width: 178px; height: 178px; border: 3px solid #1D1D1F; border-bottom: 0; border-radius: 26px 26px 0 0; background: #D9E4DC; overflow: hidden; }
.pa-top { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #1D1D1F; color: #FFFFFF; font: 700 10.5px/1 var(--font-body); }
.pa-top i { width: 14px; height: 14px; border-radius: 50%; background: #E7C987; }
.pa-chat { display: grid; gap: 6px; padding: 9px 8px 0; }
.pa-rep { position: relative; justify-self: end; display: grid; max-width: 88%; }
.pa-rep .pa-b { max-width: none; }
.pa-typing { position: absolute; right: 0; top: 0; display: flex; gap: 3px; margin: 0; padding: 7px 10px; border-radius: 12px; border-top-right-radius: 4px; background: #06C755; }
.pa-typing i { width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; }
.pa-menu { position: absolute; left: 7px; right: 7px; bottom: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; border-radius: 8px; background: #FFFFFF; }
.pa-menu i { height: 17px; border-radius: 4px; background: #E6EDE8; }
.pa-1 { animation: pa-pop1 7s var(--ease-out) infinite; }
.pa-typing { animation: pa-typing 7s linear infinite; }
.pa-typing i { animation: pa-dot .6s ease-in-out infinite; }
.pa-typing i:nth-child(2) { animation-delay: .12s; } .pa-typing i:nth-child(3) { animation-delay: .24s; }
.pa-3 { animation: pa-pop3 7s var(--ease-out) infinite; }
.pa-hit { animation: pa-hit 7s ease-in-out infinite; }
@keyframes pa-pop1 { 0%, 5% { opacity: 0; transform: translateY(6px) scale(.92); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pa-typing { 0%, 14% { opacity: 0; } 16%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes pa-dot { 50% { transform: translateY(-2px); opacity: .6; } }
@keyframes pa-pop3 { 0%, 27% { opacity: 0; transform: translateY(6px) scale(.92); } 32%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pa-hit { 0%, 40% { background: #E6EDE8; transform: none; box-shadow: none; } 44%, 66% { background: #E7C987; transform: scale(1.08); box-shadow: 0 0 0 3px rgba(231, 201, 135, .45); } 72%, 100% { background: #E6EDE8; transform: none; box-shadow: none; } }

/* 粉絲專頁：短影音貼文的讚一直變多 → 有人留言問怎麼預約 → 私訊自動回覆 */
.pa-post { position: relative; display: grid; gap: 6px; width: 188px; padding: 8px 8px 9px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .3); transform: translateY(-10px); }
.pa-ph { display: flex; align-items: center; gap: 6px; }
.pa-av { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #62BEEB; }
.pa-ph span { display: grid; gap: 3px; }
.pa-ph b { width: 64px; height: 6px; border-radius: 3px; background: #3A3A3E; }
.pa-ph small { width: 38px; height: 5px; border-radius: 3px; background: #CFCFD4; }
.pa-img { position: relative; display: grid; place-items: center; height: 70px; border-radius: 9px; background: linear-gradient(135deg, #CFE6F5, #EAD09A); }
.pa-play { position: relative; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .88); }
.pa-play::after { content: ""; position: absolute; left: 9.5px; top: 7px; border-left: 8px solid #1D1D1F; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pa-act { display: flex; align-items: center; justify-content: space-between; font: 600 10px/1 var(--font-body); color: #6E6A63; }
.pa-like { display: inline-flex; align-items: center; gap: 4px; color: #1D1D1F; }
.pa-like svg { width: 13px; height: 13px; fill: #F2557A; transform-origin: center; animation: pa-heart 7s ease-out infinite; }
.pa-cnt { display: inline-block; height: 1.3em; overflow: hidden; font: 700 10.5px/1.3 var(--font-num); }
.pa-cnt i { display: block; font-style: normal; animation: pa-cnt 7s steps(1, end) infinite; }
.pa-post .pa-b { position: absolute; white-space: nowrap; max-width: none; }
.pa-c1 { left: -22px; bottom: 26px; animation: pa-c1 7s var(--ease-out) infinite; }
.pa-b.pa-c2 { right: -30px; bottom: -30px; background: #0A7CFF; animation: pa-c2 7s var(--ease-out) infinite; }
@keyframes pa-heart { 0%, 20% { transform: none; } 22% { transform: scale(1.35); } 26%, 40% { transform: none; } 42% { transform: scale(1.35); } 46%, 100% { transform: none; } }
@keyframes pa-cnt { 0% { transform: translateY(0); } 22% { transform: translateY(-100%); } 42% { transform: translateY(-200%); } 96% { transform: translateY(0); } }
@keyframes pa-c1 { 0%, 46% { opacity: 0; transform: translateY(6px) scale(.9); } 51%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes pa-c2 { 0%, 60% { opacity: 0; transform: translateY(6px) scale(.9); } 65%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* 官網：往下捲（案例、價格、常見問題）→ 滑鼠移到下面的「用 LINE 問」→ 按下去 */
.pa-br { position: relative; width: 204px; height: 158px; border-radius: 12px; background: #FFFFFF; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .35); overflow: hidden; }
.pa-bt { display: flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; background: #F1EFEA; }
.pa-bt i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #D6D1C6; }
.pa-bt span { flex: 1; margin-left: 6px; padding: 1px 8px; border-radius: 4px; background: #FFFFFF; color: #8B857A; font: 600 8.5px/1.5 var(--font-body); }
.pa-vp { position: absolute; left: 0; right: 0; top: 21px; bottom: 0; overflow: hidden; }
.pa-pg { display: grid; gap: 7px; padding: 8px; animation: pa-scroll 8s var(--ease-out) infinite; }
.pa-hero { position: relative; height: 54px; border-radius: 8px; background: linear-gradient(120deg, #1D1D1F, #3A3020); }
.pa-hero b { position: absolute; left: 9px; top: 11px; width: 58%; height: 7px; border-radius: 4px; background: #EAD09A; }
.pa-hero small { position: absolute; left: 9px; top: 23px; width: 40%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.pa-hero i { position: absolute; left: 9px; bottom: 9px; width: 34px; height: 10px; border-radius: 5px; background: #E7C987; }
.pa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pa-cards i { height: 36px; border-radius: 6px; background: #EFE9DD; }
.pa-rows, .pa-faq { display: grid; gap: 5px; }
.pa-rows i, .pa-faq i { height: 7px; border-radius: 4px; background: #ECEAE4; }
.pa-rows i:nth-child(2) { width: 82%; } .pa-rows i:nth-child(3) { width: 64%; }
.pa-faq i { height: 13px; border-radius: 5px; background: #F4F1EA; border: 1px solid #ECE6D9; }
.pa-cta { position: absolute; left: 8px; right: 8px; bottom: 7px; display: grid; place-items: center; height: 21px; border-radius: 11px; background: #06C755; color: #FFFFFF; font: 700 9.5px/1 var(--font-body);
  box-shadow: 0 4px 10px -4px rgba(6, 199, 85, .7); animation: pa-cta 8s ease-in-out infinite; }
.pa-cur { position: absolute; left: 62%; top: 74%; width: 15px; height: 15px; fill: #1D1D1F; stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; animation: pa-cur 8s var(--ease-out) infinite; }
@keyframes pa-scroll { 0%, 8% { transform: none; } 48%, 90% { transform: translateY(-62px); } 98%, 100% { transform: none; } }
@keyframes pa-cur { 0%, 50% { transform: translate(30px, -70px); opacity: 0; } 54% { opacity: 1; } 68% { transform: none; } 72% { transform: scale(.82); } 76%, 88% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes pa-cta { 0%, 70% { transform: none; filter: none; } 73% { transform: scale(.95); filter: brightness(1.15); } 78%, 88% { transform: none; box-shadow: 0 0 0 4px rgba(6, 199, 85, .3); } 96%, 100% { transform: none; box-shadow: 0 4px 10px -4px rgba(6, 199, 85, .7); } }

@media (prefers-reduced-motion: reduce) {
  .pl-art * { animation: none !important; }
  .pa-typing { opacity: 0; }
}