/* 承泰首頁 V2 三版共用元件樣式(側邊浮動、手機底部、彈窗、cookie、掀蓋、生熟、排排站、數字、地圖、細線圖示)。
   各版在自己的 ct.css 設定下面這些變數就換成自己的樣子。 */
:root {
  --ct-red: #EA2326;
  --ct-yel: #F0C42D;
  --ct-ink: #161615;
  --ct-paper: #fff;
  --ct-line: rgba(22, 22, 21, .14);
  --ct-zh: "Noto Sans TC", system-ui, sans-serif;
  --ct-ease: cubic-bezier(.19, 1, .22, 1);
  --ct-ease-io: cubic-bezier(.65, 0, .35, 1);
  --ct-r: 12px;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ct-i { display: block; flex: none; }

/* ── 側邊浮動(桌機右側)/ 手機底部列 ───────────────────────────────── */
.ct-side { position: fixed; right: 16px; top: 50%; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transform: translateY(-50%); transition: opacity .5s, transform .6s var(--ct-ease); }
.ct-side__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 56px; padding: 14px 0 16px; background: var(--ct-ink); color: #fff; border-radius: 10px 0 0 10px; font: 500 13px/1.2 var(--ct-zh); letter-spacing: .14em; writing-mode: vertical-rl; text-decoration: none; transition: background .3s, transform .4s var(--ct-ease); }
.ct-side__btn .ct-i { writing-mode: horizontal-tb; width: 20px; height: 20px; }
.ct-side__btn:nth-child(2) { background: var(--ct-red); }
.ct-side__btn:hover { transform: translateX(-4px); }
.ct-side__soc { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ct-side__a { display: grid; place-items: center; width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; background: rgba(22, 22, 21, .72); color: #fff; backdrop-filter: blur(6px); transition: background .3s; }
.ct-side__a:hover { background: var(--ct-red); }
html.ct-intro-on .ct-side { opacity: 0; transform: translate(24px, -50%); }
.ct-mbar { display: none; }
@media (max-width: 767px) {
  .ct-side { display: none; }
  .ct-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 8px; height: 56px; padding-right: 12px; background: rgba(22, 22, 21, .92); backdrop-filter: blur(8px); }
  .ct-mbar__call { display: inline-flex; align-items: center; gap: 8px; height: 100%; margin-right: auto; padding: 0 22px; background: var(--ct-red); color: #fff; font: 700 15px/1 var(--ct-zh); letter-spacing: .12em; text-decoration: none; }
  .ct-mbar__a { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; }
  body { padding-bottom: 56px; }
}

/* ── 品牌聲明彈窗 ───────────────────────────────────────────────── */
.ct-popup { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ct-popup[hidden] { display: none; }
.ct-popup__bg { position: absolute; inset: 0; background: rgba(12, 12, 11, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .5s; }
.ct-popup__box { position: relative; display: flex; flex-direction: column; width: min(720px, 100%); max-height: 88vh; background: #fff; color: #161615; border-radius: var(--ct-r); overflow: hidden; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ct-ease); }
.ct-popup.is-open .ct-popup__bg, .ct-popup.is-open .ct-popup__box { opacity: 1; transform: none; }
.ct-popup__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 28px; border-bottom: 1px solid #e6e5e1; }
.ct-popup__title { margin: 0; font: 700 16px/1.5 var(--ct-zh); letter-spacing: .06em; }
.ct-popup__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: inherit; cursor: pointer; transition: transform .4s var(--ct-ease); }
.ct-popup__close:hover { transform: rotate(90deg); }
.ct-popup__body { overflow: auto; padding: 20px 28px 28px; }
.ct-popup__body img { display: block; width: 100%; height: auto; }

/* ── cookie 條 ─────────────────────────────────────────────────── */
.ct-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1500; display: flex; align-items: center; gap: 24px; max-width: 980px; margin: 0 auto; padding: 18px 20px 18px 28px; background: rgba(22, 22, 21, .94); color: #fff; border-radius: var(--ct-r); backdrop-filter: blur(8px); font: 400 14px/1.7 var(--ct-zh); letter-spacing: .04em; }
.ct-cookie[hidden] { display: none; }
.ct-cookie p { margin: 0; flex: 1; }
.ct-cookie a { color: var(--ct-yel); text-decoration: underline; text-underline-offset: 3px; }
.ct-cookie__btns { display: flex; gap: 8px; flex: none; }
.ct-cookie__btns button { padding: 12px 20px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: none; color: #fff; font: 500 14px/1 var(--ct-zh); letter-spacing: .08em; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ct-cookie__btns .is-main { background: #fff; color: #161615; border-color: #fff; }
.ct-cookie__btns button:hover { background: var(--ct-red); border-color: var(--ct-red); color: #fff; }
@media (max-width: 767px) { .ct-cookie { bottom: 68px; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 20px; } }

/* ── 2A 掀蓋 ───────────────────────────────────────────────────── */
.ct-hood { position: relative; display: inline-block; height: 100%; }
.ct-hood img { display: block; height: 100%; width: auto; }
.ct-hood .ct-hood__open { position: absolute; left: 0; bottom: 0; height: calc(100% * 1347 / 1187); opacity: 0; clip-path: inset(100% 0 0 0); transition: opacity .2s, clip-path 1.1s var(--ct-ease-io); }
.ct-hood.is-open .ct-hood__open { opacity: 1; clip-path: inset(0 0 0 0); }
.ct-hood .ct-hood__closed { transition: opacity .3s .8s; }
.ct-hood.is-open .ct-hood__closed { opacity: 0; }

/* ── 3A 生的變熟的 ─────────────────────────────────────────────── */
.ct-pair { position: relative; overflow: hidden; }
.ct-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-pair__baked { position: absolute; inset: 0; opacity: 0; filter: saturate(.6) brightness(1.15); transition: opacity 2.2s var(--ct-ease-io), filter 2.6s var(--ct-ease-io); }
.ct-pair.is-baked .ct-pair__baked { opacity: 1; filter: none; }

/* ── 2D 機型由小排到大 ─────────────────────────────────────────── */
.ct-lineup__list { --base: clamp(200px, 26vw, 380px); display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(8px, 2vw, 40px); margin: 0; padding: 0; list-style: none; }
.ct-lineup__item { height: calc(var(--base) * var(--h)); opacity: 0; transform: translateY(70px); transition: opacity .8s calc(var(--i) * .16s), transform 1.2s var(--ct-ease) calc(var(--i) * .16s); }
.ct-lineup__item > img { display: block; height: 100%; width: auto; }
.ct-lineup__list.is-in .ct-lineup__item { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .ct-lineup__list { --base: 150px; overflow-x: auto; justify-content: flex-start; gap: 18px; padding-bottom: 6px; scrollbar-width: none; }
  .ct-lineup__item { flex: none; }
}

/* ── 6A 數字跳動 ───────────────────────────────────────────────── */
.ct-nums { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.ct-nums__item { display: flex; flex-direction: column; gap: 10px; }
.ct-nums__val { display: inline-flex; align-items: flex-start; font: 700 clamp(40px, 2rem + 2.6vw, 72px)/1 var(--ct-num, var(--ct-zh)); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ct-nums__plus { margin-left: .04em; color: var(--ct-red); }
.ct-nums__val--zh { align-items: center; gap: .28em; font: 700 clamp(28px, 1.2rem + 1.4vw, 44px)/1.2 var(--ct-zh); letter-spacing: .04em; }
.ct-nums__val--zh span { opacity: 0; transform: translateY(40%); transition: opacity .6s, transform .9s var(--ct-ease); }
.ct-nums__val--zh i { width: .22em; height: .22em; border-radius: 50%; background: var(--ct-red); opacity: 0; transition: opacity .4s; }
.ct-nums.is-in .ct-nums__val--zh span, .ct-nums.is-in .ct-nums__val--zh i { opacity: 1; transform: none; }
.ct-nums.is-in .ct-nums__val--zh :nth-child(2), .ct-nums.is-in .ct-nums__val--zh :nth-child(3) { transition-delay: .25s; }
.ct-nums.is-in .ct-nums__val--zh :nth-child(4), .ct-nums.is-in .ct-nums__val--zh :nth-child(5) { transition-delay: .5s; }
.ct-nums__label { font: 400 14px/1.4 var(--ct-zh); letter-spacing: .14em; opacity: .7; }

/* ── 6B 台灣地圖三據點 ─────────────────────────────────────────── */
.ct-map { position: relative; width: min(100%, 340px); }
.ct-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ct-map__land { fill: transparent; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ct-ease-io), fill 1s 1.6s; }
.ct-map__route { fill: none; stroke: var(--ct-yel); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ct-ease-io) 1.9s; }
.ct-map__dot { fill: var(--ct-red); }
.ct-map__ring { fill: none; stroke: var(--ct-red); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ct-map__pin { opacity: 0; }
.ct-map.is-in .ct-map__land { stroke-dashoffset: 0; fill: var(--ct-map-fill, rgba(127, 127, 127, .08)); }
.ct-map.is-in .ct-map__route { stroke-dashoffset: 0; }
.ct-map.is-in .ct-map__pin { opacity: 1; transition: opacity .4s calc(1.9s + var(--i) * .45s); }
.ct-map.is-in .ct-map__ring { animation: ctPulse 2.4s ease-out calc(2s + var(--i) * .45s) infinite; }
@keyframes ctPulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
.ct-map__labels { position: absolute; inset: 14px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ct-map__label { position: absolute; left: var(--x); top: var(--y); transform: translate(0, -50%); white-space: nowrap; font: 500 13px/1 var(--ct-zh); letter-spacing: .12em; opacity: 0; transition: opacity .5s calc(2s + var(--i) * .45s), transform .8s var(--ct-ease) calc(2s + var(--i) * .45s); }
.ct-map__label::before { content: ""; display: inline-block; width: 14px; height: 1px; margin: 0 8px 0 12px; vertical-align: middle; background: currentColor; opacity: .6; }
.ct-map.is-in .ct-map__label { opacity: 1; transform: translate(6px, -50%); }

/* ── 6C 細線圖示一筆畫出 ───────────────────────────────────────── */
[data-ct-draw] path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-ct-draw].is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ct-ease-io); }
[data-ct-draw].is-drawn path:nth-child(2) { transition-delay: .2s; }
[data-ct-draw].is-drawn path:nth-child(3) { transition-delay: .35s; }
[data-ct-draw].is-drawn path:nth-child(4) { transition-delay: .5s; }
[data-ct-draw].is-drawn path:nth-child(5) { transition-delay: .65s; }

/* ── 4A 開門冒蒸氣(白霧從產品上緣升起)───────────────────────────── */
.ct-steam { position: absolute; left: 50%; top: 4%; width: 70%; height: 60%; transform: translateX(-50%); pointer-events: none; }
.ct-steam span { position: absolute; bottom: 0; left: calc(var(--x) * 1%); width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); filter: blur(10px); opacity: 0; }
.is-steam .ct-steam span { animation: ctSteam 3.6s var(--d) ease-out infinite; }
@keyframes ctSteam { 0% { opacity: 0; transform: translate(0, 30%) scale(.5); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1%), -120%) scale(1.5); } }

/* ── 4B 面板亮起來(蒸烤箱觸控螢幕:先是黑的,捲到時閃一下亮起、四周微微發光)─────────── */
.ct-panel { position: relative; }
.ct-panel-glow { position: absolute; left: 9.6%; top: 15.8%; width: 16.1%; height: 21.3%; border-radius: 2px; background: #0a0f18; box-shadow: 0 0 0 0 rgba(110, 190, 255, 0); pointer-events: none; transition: background .5s, box-shadow 1.2s; }
.is-panel .ct-panel-glow { animation: ctPanelOn 1.1s .5s steps(1, end) forwards, ctPanelGlow 3s 1.6s ease-in-out infinite alternate; }
@keyframes ctPanelOn { 0% { background: #0a0f18; } 20% { background: rgba(160, 215, 255, .35); } 35% { background: #0a0f18; } 55% { background: rgba(160, 215, 255, .25); } 100% { background: rgba(160, 215, 255, 0); box-shadow: 0 0 22px 4px rgba(110, 190, 255, .45); } }
@keyframes ctPanelGlow { from { background: rgba(160, 215, 255, 0); box-shadow: 0 0 22px 4px rgba(110, 190, 255, .45); } to { background: rgba(160, 215, 255, .08); box-shadow: 0 0 34px 8px rgba(110, 190, 255, .22); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}