/* 首頁提案 C「私人邀請函」。只有 pages-v2/home-draft-c.php 載入。
   基底＝靜態版（沒有 JS、減少動態）：大廳背景上一張攤開的邀請卡，內容全部看得到。
   html.ci-live ＝ 捲動場景：畫面釘住，鏡頭穿過拱門、卡片打開、席次票滑出。
   顏色只用 --s-*／--l-*／--n-* tokens，圖片由 site_theme_img 依配色換；全部動態只動 transform 與 opacity。 */

/* ---------- 尺寸：一切跟著卡片寬度 ---------- */
.ci-opening {
  --under: 14px; /* 頁首捲動後用 transform 收窄約 12px（盒子不變）：舞台往上墊，才不會露出一條底色 */
  --stage-h: calc(100svh - var(--header-h)); /* 內容置中用的高度（網址列展開時也完整） */
  --stage-l: calc(100lvh - var(--header-h)); /* 背景高度（網址列收合時也蓋滿） */
  --plate-w: max(100vw, calc((var(--stage-l) + var(--under) * 2) * 1.5));
  --cw: clamp(296px, min(calc(100vw - 32px), calc(var(--plate-w) * .285)), 540px);
  --ch: min(calc(var(--stage-h) - 72px), calc(var(--cw) * 1.47));
  --fs: calc(var(--cw) / 42);
  position: relative;
}
@media (min-width: 760px) {
  .ci-opening { --cw: clamp(296px, min(calc((100vw - 48px) / 2), calc(var(--plate-w) * .285)), 540px); }
}
@media (max-width: 759px) {
  .ci-opening { --cw: min(calc(100vw - 40px), 400px); --ch: min(calc(var(--stage-h) - 96px), 620px); }
}

/* ---------- 舞台與底圖 ---------- */
.ci-stage {
  position: relative; overflow: clip; isolation: isolate;
  min-height: var(--stage-h); padding: 40px 16px 56px;
  display: grid; place-items: center;
  background: var(--n-bg);
}
.ci-plates { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ci-plate { position: absolute; inset: 0; }
.ci-plate img, .ci-plate__zoom { display: block; width: 100%; height: 100%; object-fit: cover; }
.ci-plate__zoom img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ci-glow { display: none; }
.ci-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 78% at 50% 48%, rgba(var(--n-rgb), 0) 52%, rgba(var(--n-rgb), .5) 100%); }
.ci-dim { position: absolute; inset: 0; background: rgba(var(--n-rgb), .5); }
.ci-stage > .site-dust { z-index: -1; }
.ci-live .ci-stage > .site-dust i:nth-child(n + 2) { display: none; } /* 捲動場景的舞台已有多張全幅圖層，金粉只留一層 */

.ci-cue {
  position: absolute; z-index: 1; left: 50%; bottom: 8px; translate: -50% 0; margin: 0; display: none; padding: 3px 16px 3px; white-space: nowrap;
  font-family: var(--latin); font-style: italic; font-size: 17px; letter-spacing: .06em; line-height: 1.4; color: var(--n-ink); text-align: center; pointer-events: none;
  background: rgba(var(--n-rgb), .72); box-shadow: inset 0 0 0 1px var(--n-hair); border-radius: 999px;
}
.ci-cue span { display: inline-flex; align-items: center; gap: 10px; }
.ci-cue i { position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--n-line); transform-origin: top; animation: ciCue 2.6s var(--ease) infinite; }
@keyframes ciCue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 邀請卡（靜態版：兩頁並排，手機上下疊） ---------- */
.ci-rig { width: 100%; display: grid; justify-items: center; }
.ci-book { display: grid; grid-template-columns: repeat(2, var(--cw)); gap: 0; justify-content: center; }
.ci-cover { position: relative; display: grid; }
.ci-cover__back, .ci-seal { display: none; }
.ci-inner { position: relative; min-height: var(--ch); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-bottom: calc(var(--cw) * .07); }
@media (max-width: 759px) {
  .ci-book { grid-template-columns: var(--cw); gap: 18px; }
  .ci-cover__front { min-height: calc(var(--cw) * 1.42); }
}

/* 紙張：拱形上緣、燙金細邊、細緻紙紋 */
.ci-sheet {
  --arch: calc(var(--cw) / 2);
  position: relative; overflow: hidden; border-radius: var(--arch) var(--arch) 3px 3px;
  background: var(--l-card);
  box-shadow: 0 44px 80px -40px rgba(0, 0, 0, .7), 0 12px 28px -18px rgba(0, 0, 0, .45);
}
.ci-sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ci-foil {
  position: absolute; inset: 0; padding: 2px; border-radius: inherit; overflow: hidden; pointer-events: none;
  -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);
}
.ci-foil i {
  position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 1; margin: -115% 0 0 -115%; display: block;
  background: conic-gradient(var(--l-line), var(--l-metal-hi) 12%, var(--sun) 20%, var(--l-line) 30%, var(--l-metal-hi) 48%, var(--l-line) 60%, var(--sun) 72%, var(--l-metal-hi) 84%, var(--l-line));
}
.ci-glare { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.ci-glare i {
  position: absolute; left: -45%; top: -45%; width: 90%; aspect-ratio: 1; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--dust), .42), rgba(var(--dust), 0));
}
.ci-archline {
  position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid var(--l-hair); border-radius: calc(var(--cw) / 2 - 12px) calc(var(--cw) / 2 - 12px) 1px 1px;
}
.ci-sheen {
  position: absolute; inset: -4%; pointer-events: none; opacity: .75;
  background: linear-gradient(105deg, rgba(var(--dust), 0) 36%, rgba(var(--dust), .22) 46%, rgba(255, 246, 224, .5) 50%, rgba(var(--dust), .22) 54%, rgba(var(--dust), 0) 64%);
  translate: -115% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ci-sheen { animation: ciSheen 2s cubic-bezier(.4, 0, .2, 1) 1s both; }
  .ci-rig { animation: ciRise 1.3s var(--ease) both; }
}
@keyframes ciSheen { to { translate: 115% 0; } }
@keyframes ciRise { from { opacity: 0; translate: 0 26px; } }

.ci-sheet.ci-inner__sheet { position: absolute; inset: 0; z-index: -1; }

/* 頁面內容 */
.ci-page__body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--l-ink); }
.ci-cover__body { height: 100%; justify-content: center; padding: calc(var(--cw) * .1) calc(var(--cw) * .085) calc(var(--cw) * .06); }
.ci-crest { width: calc(var(--fs) * 3.1); height: auto; flex: none; fill: none; stroke: var(--l-accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ci-cover__brand { margin: calc(var(--fs) * 1) 0 0; font-family: var(--serif-tc); font-size: max(17px, calc(var(--fs) * 1.95)); letter-spacing: .14em; line-height: 1.5; color: var(--l-ink); }
.ci-cover__sep { color: var(--l-line); margin: 0 .35em; }
.ci-cover__title { margin: calc(var(--fs) * 1.5) 0 0; font-family: var(--serif-tc); font-weight: 700; font-size: max(29px, calc(var(--fs) * 3.95)); line-height: 1.34; letter-spacing: .05em; color: var(--l-ink); }
.ci-cover__title span { display: block; white-space: nowrap; }
.ci-cover__en, .ci-inner__en { font-family: var(--latin); font-style: italic; color: var(--l-accent); letter-spacing: .04em; line-height: 1.4; }
.ci-cover__en { margin: calc(var(--fs) * .8) 0 0; font-size: max(18px, calc(var(--fs) * 2.2)); }
.ci-rule { flex: none; display: block; width: min(100%, calc(var(--cw) * .56)); height: 1px; margin: calc(var(--fs) * 1.25) 0; background: linear-gradient(90deg, transparent, var(--l-line) 18%, var(--l-line) 82%, transparent); }
.ci-cover__sub { margin: 0; font-family: var(--serif-tc); font-size: max(16px, calc(var(--fs) * 1.72)); letter-spacing: .08em; line-height: 1.7; color: var(--l-ink-2); white-space: nowrap; }
.ci-cover__cta { width: 100%; max-width: calc(var(--cw) * .76); margin-top: calc(var(--fs) * 1.7); display: grid; gap: 10px; }
.ci-cover__cta .site-btn, .ci-inner__cta { --s-btn: var(--l-btn); min-width: 0; min-height: 50px; padding: 6px 18px; font-size: max(16px, calc(var(--fs) * 1.72)); }
.ci-cover__foot { margin: calc(var(--fs) * 1.6) 0 0; font-family: var(--latin); font-size: max(11px, calc(var(--fs) * 1.1)); letter-spacing: .32em; color: var(--l-muted); white-space: nowrap; }

.ci-inner__body { padding: calc(var(--cw) * .1) calc(var(--cw) * .085) 0; }
.ci-inner__body > .ci-crest { margin-bottom: calc(var(--fs) * 1.2); }
.ci-inner__kicker { margin: 0 0 calc(var(--fs) * 1.2); font-family: var(--latin); font-style: italic; font-size: max(19px, calc(var(--fs) * 2.4)); letter-spacing: .04em; color: var(--l-accent); }
.ci-inner__title { margin: 0; font-family: var(--serif-tc); font-weight: 700; font-size: max(28px, calc(var(--fs) * 3.7)); line-height: 1.42; letter-spacing: .05em; color: var(--l-ink); white-space: nowrap; }
.ci-inner__lead { margin: 0; font-family: var(--serif-tc); font-size: max(16px, calc(var(--fs) * 1.72)); letter-spacing: .06em; line-height: 1.7; color: var(--l-ink-2); text-wrap: balance; }
.ci-inner__en { margin: calc(var(--fs) * .7) 0 0; font-size: max(17px, calc(var(--fs) * 1.95)); }
.ci-inner__cta { width: 100%; max-width: calc(var(--cw) * .76); margin-top: calc(var(--fs) * 2.2); }
.ci-inner__shade { display: none; }

.ci-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 席次票 ---------- */
.ci-ticketwrap { position: relative; width: calc(100% - var(--cw) * .15); margin: 0 auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28)); }
.ci-ticket {
  --stub: 30%;
  position: relative; margin: 0; display: grid; grid-template-columns: var(--stub) 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0;
  padding: 12px 0; color: var(--l-ink); font-family: var(--serif-tc);
  background: linear-gradient(100deg, var(--l-bg-3), var(--l-bg-2) 42%);
  -webkit-mask: radial-gradient(circle 8px at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 8px at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
.ci-ticket::before { content: ""; position: absolute; left: var(--stub); top: 12px; bottom: 12px; border-left: 1px dashed var(--l-line); }
.ci-ticket::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-block: 1px solid var(--l-hair); }
.ci-ticket__when { grid-row: 1 / span 2; justify-self: center; padding: 0 8px; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: max(21px, calc(var(--fs) * 2.5)); line-height: 1.05; text-align: center; color: var(--l-accent); }
.ci-ticket__limit { padding-left: 16px; font-weight: 500; font-size: 15.5px; letter-spacing: .08em; line-height: 1.5; color: var(--l-ink-2); }
.ci-ticket__left { padding-left: 16px; font-style: normal; font-weight: 600; font-size: 17px; letter-spacing: .08em; line-height: 1.2; color: var(--l-ink); white-space: nowrap; }
.ci-ticket__left b {
  display: inline-block; min-width: 1.6em; padding-right: .1em; font-family: var(--latin); font-style: italic; font-weight: 600; font-size: max(38px, calc(var(--fs) * 4.2)); line-height: 1; letter-spacing: 0; text-align: center; vertical-align: -.1em;
  background: var(--l-num); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 400px) {
  .ci-ticket { --stub: 27%; }
  .ci-ticket__when { font-size: 19px; padding: 0 4px; }
  .ci-ticket__limit, .ci-ticket__left { padding-left: 12px; letter-spacing: .04em; }
  .ci-ticket__left b { font-size: 33px; min-width: 1.45em; }
}
.ci-ticket__wax { position: absolute; right: 10px; top: 50%; width: clamp(40px, calc(var(--cw) * .135), 66px); aspect-ratio: 1; translate: 0 -50%; rotate: 8deg; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.ci-ticket__wax img { width: 100%; height: 100%; display: block; }
.ci-ticket__wax .ci-crest { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -52%; stroke: var(--n-accent); stroke-width: 1.6; }

/* ---------- 捲動場景 ---------- */
.ci-live .ci-opening { height: calc(var(--stage-h) + 330svh); }
.ci-live .ci-stage { position: sticky; top: calc(var(--header-h) - var(--under)); margin-top: calc(var(--under) * -1); height: calc(var(--stage-l) + var(--under)); min-height: 0; padding: 0; display: block; }
.ci-live .ci-plate { left: 50%; top: calc(50% + var(--under) / 2); right: auto; bottom: auto; width: var(--plate-w); aspect-ratio: 3 / 2; margin-left: calc(var(--plate-w) / -2); margin-top: calc(var(--plate-w) / -3); will-change: transform; }
.ci-live .ci-plate__zoom { transform-origin: 50% 57%; will-change: transform; }
.ci-live .ci-glow { display: block; } /* 不用 mix-blend-mode：每幀變動的元素用混合模式會讓整個舞台重新合成（2026-11-04 實測超過 50ms 的幀 19→3） */
.ci-live .ci-glow span { position: absolute; left: 50%; top: 52%; width: 56%; aspect-ratio: 3 / 4; translate: -50% -50%; display: block; background: radial-gradient(closest-side, var(--sun) 0 62%, rgba(var(--dust), .55) 80%, rgba(var(--dust), 0)); opacity: .86; }
.ci-live .ci-dim { opacity: 0; will-change: opacity; }
.ci-live .ci-cue { display: block; bottom: auto; top: calc(var(--under) + var(--stage-h) - 44px); }

.ci-live .ci-rig { position: absolute; left: 0; right: 0; top: var(--under); height: var(--stage-h); display: grid; place-items: center; perspective: 1900px; perspective-origin: 50% 46%; }
.ci-live .ci-book { position: relative; display: block; width: var(--cw); height: var(--ch); transform-style: preserve-3d; will-change: transform; }
.ci-live .ci-cover { position: absolute; inset: 0; display: block; z-index: 2; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.ci-live .ci-cover__front, .ci-live .ci-cover__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ci-live .ci-cover__front { transform: translateZ(.6px); }
.ci-live .ci-cover__back { display: block; transform: rotateY(180deg) translateZ(.4px); }
.ci-live .ci-inner { position: absolute; inset: 0; z-index: 1; min-height: 0; display: block; padding: 0; transform-style: preserve-3d; }
.ci-live .ci-sheet.ci-inner__sheet { z-index: 0; }
.ci-live .ci-inner__body { position: absolute; inset: 0; justify-content: center; padding-bottom: calc(var(--cw) * .05); will-change: opacity, transform; }
.ci-live .ci-inner__shade { display: block; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0)); }

/* 封面內頁：拱窗裡看得到門後的房間 */
.ci-window { position: absolute; left: 13%; right: 13%; top: 9%; bottom: 30%; margin: 0; overflow: hidden; border-radius: 999px 999px 2px 2px; box-shadow: 0 0 0 1px var(--l-hair), 0 0 0 6px var(--l-bg-2), 0 0 0 7px var(--l-hair); }
.ci-window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ci-cover__backcap { position: absolute; left: 0; right: 0; bottom: 4.5%; margin: 0; font-family: var(--latin); font-size: 13px; letter-spacing: .32em; line-height: 1.7; text-align: center; color: var(--l-muted); display: none; }

/* 封蠟：封住卡片開口，打開時裂成兩半掉落 */
.ci-live .ci-seal { display: block; position: absolute; right: calc(var(--cw) * -.1); top: 57%; z-index: 3; width: calc(var(--cw) * .2); aspect-ratio: 1; transform: translateZ(3px); pointer-events: none; }
.ci-seal__half { position: absolute; inset: 0; display: block; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .45)); will-change: transform, opacity; }
.ci-seal__half img { width: 100%; height: 100%; display: block; }
.ci-seal__half .ci-crest { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -52%; stroke: var(--n-accent); stroke-width: 1.5; }
.ci-seal__half--a { clip-path: polygon(0 0, 53% 0, 47% 17%, 55% 33%, 46% 52%, 54% 69%, 48% 85%, 53% 100%, 0 100%); }
.ci-seal__half--b { clip-path: polygon(53% 0, 100% 0, 100% 100%, 53% 100%, 48% 85%, 54% 69%, 46% 52%, 55% 33%, 47% 17%); }

/* 寬畫面：席次票收在左頁，手機留在內頁底部 */
.ci-live .ci-ticketwrap { position: absolute; will-change: transform, opacity; }
@media (min-width: 760px) {
  .ci-live .ci-ticketwrap { left: -92%; right: auto; bottom: 7%; width: 84%; margin: 0; transform: translateZ(2px); }
}
@media (max-width: 759px) {
  .ci-live .ci-ticketwrap { left: 7%; right: 7%; bottom: 20px; width: auto; margin: 0; }
  .ci-live .ci-inner__body { padding-bottom: 112px; }
  .ci-live .ci-seal { right: -13px; top: auto; bottom: 18px; width: 64px; }
  .ci-cover__foot { display: none; }
  .ci-cover__sub { font-size: min(16px, calc(var(--cw) * .047)); letter-spacing: .02em; }
  .ci-live .ci-inner__cta { margin-top: calc(var(--fs) * 1.5); }
}
@media (max-height: 720px) and (max-width: 759px) {
  .ci-live .ci-crest { width: 30px; }
  .ci-live .ci-cover__brand { margin-top: 6px; }
  .ci-live .ci-inner__body { padding-top: 62px; }
  .ci-live .ci-inner__kicker { margin-bottom: 6px; }
  .ci-live .ci-inner__title { font-size: 26px; }
  .ci-live .ci-rule { margin: 10px 0; }
  .ci-live .ci-ticketwrap { bottom: 12px; }
}

/* ---------- 桌面發牌 ---------- */
.ci-table { min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; overflow: clip; }
.ci-table__bg { position: absolute; inset: -8% 0; z-index: -1; pointer-events: none; }
.ci-table__bg img { width: 100%; height: 100%; object-fit: cover; }
.ci-table__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--n-rgb), .72), rgba(var(--n-rgb), .22) 62%, rgba(var(--n-rgb), .1)); }
.ci-table > .site-dust { z-index: 0; }
.ci-table__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
.ci-table__head { position: relative; z-index: 2; margin: 0; }
.ci-table__head .site-title { color: var(--n-ink); }
.ci-deal { --dw: clamp(286px, 25vw, 430px); position: relative; padding: clamp(28px, 4vw, 64px) 0; min-width: 0; }
.ci-deal__stack { position: relative; width: var(--dw); margin: 0 auto; }
.ci-deal__fan { position: absolute; inset: 0; pointer-events: none; }
.ci-deal__hand { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; perspective: 1500px; }
.ci-dealt, .ci-back[data-ci-back] {
  transform: translate3d(calc(var(--x) + var(--dx, 0px)), calc(var(--y) + var(--dy, 0px)), 0) rotate(calc(var(--r) + var(--dr, 0deg))) rotateY(var(--fy, 0deg));
}
.ci-dealt { position: relative; display: flex; transform-style: preserve-3d; }
.ci-dealt .site-card { flex: 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ci-dealt .site-card__face { min-height: clamp(460px, 34vw, 540px); justify-content: center; }
.ci-dealt .site-card__face > p:not(.site-card__en) { max-width: 22em; }
.site-motion .ci-dealt .site-card.site-pre, .site-motion .ci-dealt .site-card.site-pre.site-in { opacity: 1; animation: none; }
/* site.js 的反光蓋在文字上；淺色紙上調低，字才不會被洗白 */
.ci-dealt .site-card.site-tone-light { --s-glare-a: .16; }
.ci-dealt__reverse { transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ci-back {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, var(--n-hair-soft) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, var(--n-hair-soft) 0 1px, transparent 1px 13px),
    var(--n-bg-3);
  box-shadow: inset 0 0 0 1px var(--n-hair), inset 0 0 0 9px var(--n-bg-3), inset 0 0 0 10px var(--n-hair-soft), 0 28px 46px -22px rgba(0, 0, 0, .78);
}
.ci-back .ci-crest { width: 76px; padding: 18px 20px; box-sizing: content-box; border-radius: 50%; stroke: var(--n-accent); stroke-width: 1; background: var(--n-bg-3); box-shadow: 0 0 0 1px var(--n-hair), 0 0 0 7px var(--n-bg-3), 0 0 0 8px var(--n-hair-soft); }
.ci-back[data-ci-back] { transition: translate .7s var(--ease); }
.ci-deal.is-dealt:hover .ci-back[data-ci-back] { translate: calc(var(--x) * .2) -1.5%; }
.ci-deal--two { --dw: clamp(270px, 23vw, 380px); }
.ci-deal--two .ci-deal__stack { width: 100%; }
.ci-deal--two .ci-deal__fan { left: calc(50% - var(--dw) / 2); right: auto; width: var(--dw); }
.ci-deal--two .ci-deal__hand { grid-template-columns: repeat(2, minmax(0, var(--dw))); justify-content: center; gap: 22px; }

@media (max-width: 1024px) {
  .ci-table__grid { grid-template-columns: minmax(0, 1fr); }
  .ci-table__head { text-align: center; }
  .ci-table__bg::after { background: linear-gradient(180deg, rgba(var(--n-rgb), .62), rgba(var(--n-rgb), .22) 42%, rgba(var(--n-rgb), .3)); }
  .ci-deal { --dw: min(100vw - 72px, 384px); padding-top: 76px; padding-bottom: 76px; }
  .ci-deal--two { --dw: min(100vw - 72px, 340px); }
}
@media (max-width: 760px) {
  .ci-deal--two .ci-deal__hand { grid-template-columns: minmax(0, var(--dw)); }
  .ci-dealt .site-card__face { min-height: 0; }
  .ci-back .ci-crest { width: 60px; }
}

/* ---------- 回覆卡 R.S.V.P. ---------- */
.ci-rsvp { position: relative; overflow: clip; isolation: isolate; min-height: calc(100svh - var(--header-h)); padding: clamp(72px, 9vw, 130px) var(--gutter); display: grid; place-items: center; background: var(--n-bg); }
.ci-rsvp__bg { position: absolute; inset: -9% 0; z-index: -2; }
.ci-rsvp__bg img { width: 100%; height: 100%; object-fit: cover; }
.ci-rsvp__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(var(--n-rgb), .5), rgba(var(--n-rgb), .86)); }
.ci-rsvp__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ci-rsvp__arc { position: absolute; }
.ci-rsvp__arc--a { width: clamp(340px, 44vw, 720px); left: clamp(-280px, -13vw, -120px); top: -14%; }
.ci-rsvp__arc--b { width: clamp(280px, 34vw, 560px); right: clamp(-220px, -10vw, -90px); bottom: -16%; }
.ci-reply { position: relative; width: min(100%, 1040px); perspective: 1800px; filter: drop-shadow(0 36px 44px rgba(0, 0, 0, .5)); }
.ci-reply__sheet {
  --seam: 60%;
  position: relative; display: grid; grid-template-columns: var(--seam) 1fr; background: var(--l-card); color: var(--l-ink); transform-style: flat; will-change: transform;
  -webkit-mask: radial-gradient(circle 13px at var(--seam) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 13px at var(--seam) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 13px at var(--seam) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 13px at var(--seam) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
.ci-reply__sheet::after { content: ""; position: absolute; left: var(--seam); top: 22px; bottom: 22px; border-left: 1px dashed var(--l-line); pointer-events: none; }
.ci-reply__copy { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 56px); }
.ci-reply__logo { height: clamp(72px, 7vw, 100px); }
.ci-reply__kicker { margin: 18px 0 0; font-family: var(--serif-tc); font-weight: 700; font-size: clamp(20px, 5.4vw, 22px); letter-spacing: .05em; line-height: 1.45; color: var(--l-ink); white-space: nowrap; }
@media (min-width: 861px) { .ci-reply__kicker { font-size: clamp(25px, 2.5vw, 34px); letter-spacing: .08em; } }
.ci-reply .ci-rule { --fs: 10px; margin: 18px 0; width: min(100%, 300px); }
.ci-reply__belief { margin: 0 0 8px; font-family: var(--serif-tc); font-size: 17px; letter-spacing: .32em; color: var(--l-accent); }
.ci-reply__text { margin: 0; font-family: var(--serif-tc); font-size: clamp(16px, 1.3vw, 18px); line-height: 2; letter-spacing: .06em; color: var(--l-ink-2); }
.ci-reply__act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: clamp(34px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.ci-reply__rsvp { margin: 0; font-family: var(--latin); font-style: italic; font-size: 22px; letter-spacing: .14em; color: var(--l-accent); }
.ci-reply__alt { min-width: 0; min-height: 48px; padding: 6px 28px; font-size: 16.5px; }
.ci-reply__note { margin: 0; font-family: var(--serif-tc); font-size: 15px; letter-spacing: .1em; color: var(--l-muted); }

.ci-reply .ci-foil i { inset: 0; left: 0; top: 0; width: auto; aspect-ratio: auto; margin: 0; background: var(--l-num); will-change: auto; }

/* 封蠟按鈕：進場時蓋下去，滑過微微抬起，按下壓回紙面 */
.ci-stamp { position: relative; display: grid; place-items: center; width: clamp(164px, 15vw, 196px); aspect-ratio: 1; border-radius: 50%; text-decoration: none; transition: transform .45s var(--ease-out); }
.ci-stamp__wax { position: absolute; inset: 0; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .42)); transition: filter .4s ease, transform .6s var(--ease-out); }
.ci-stamp__wax img { width: 100%; height: 100%; display: block; }
.ci-stamp__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--l-line); opacity: 0; pointer-events: none; }
.ci-stamp__label { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif-tc); font-weight: 600; font-size: 19px; letter-spacing: .1em; color: var(--l-btn-ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); white-space: nowrap; }
.ci-stamp__label svg { width: 8px; height: 13px; flex: none; transition: transform .3s var(--ease-out); }
.ci-stamp:hover { transform: translateY(-4px) rotate(-2.5deg); }
.ci-stamp:hover .ci-stamp__wax { filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .42)); }
.ci-stamp:hover .ci-stamp__label svg, .ci-stamp:focus-visible .ci-stamp__label svg { transform: translateX(4px); }
.ci-stamp:active { transform: translateY(1px) scale(.95); transition-duration: .12s; }
.ci-stamp:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .ci-reply.is-armed:not(.is-in) { opacity: 0; translate: 0 40px; }
  .ci-reply.is-armed { transition: opacity 1s ease, translate 1.2s var(--ease); }
  .ci-reply.is-armed:not(.is-stamped) .ci-stamp { opacity: 0; }
  .ci-reply.is-stamped .ci-stamp { animation: ciStamp .52s cubic-bezier(.55, 0, .85, .55) both; }
  .ci-reply.is-stamped .ci-reply__sheet { animation: ciThud .42s var(--ease-out) .46s both; }
  .ci-reply.is-stamped .ci-stamp__ring { animation: ciRing 1.1s var(--ease) .48s both; }
}
@keyframes ciStamp { from { opacity: 0; scale: 1.85; rotate: -9deg; } 70% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes ciThud { 0% { scale: 1; } 30% { scale: .988; } 100% { scale: 1; } }
@keyframes ciRing { from { opacity: .9; scale: .9; } to { opacity: 0; scale: 1.55; } }

@media (max-width: 860px) {
  .ci-reply__sheet { --seam: 60%; grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .ci-reply__sheet::after { left: 22px; right: 22px; top: auto; bottom: auto; border-left: 0; }
  .ci-reply__act { border-top: 1px dashed var(--l-line); margin: 0 22px; padding: 30px 0 36px; }
  .ci-reply__copy { padding-bottom: 28px; }
  .ci-reply__text { font-size: 16px; }
}

/* ---------- 減少動態：不跑循環，內容全部直接顯示 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ci-cue i, .ci-sheen, .ci-rig { animation: none; }
  .ci-sheen { display: none; }
  .ci-stamp, .ci-stamp__wax { transition: none; }
}