/*
 * 太虛卡面：四種風格由 .tc-stage[data-style] 切換。
 *   mineral  礦物箔（山海世界原樣，預設）
 *   rainbow  虹彩
 *   parallax 景深：背景／主體／前景三層前後錯開，各層自帶箔
 *   inkgold  水墨描金：宣紙、墨色，金只走在線稿上
 * 角度由 pointer.js 寫入 --sx --sy --mx --my --rx --ry --foil。
 */

.tc-stage {
  --sx: 0;
  --sy: 0;
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  --foil: 0.48;
  --card-ratio: 2 / 3;
  --thick: 2.5px;
  --radius: 10px;
  position: relative;
  perspective: 920px;
  perspective-origin: 50% 45%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tc-stage.tc-play { width: min(68vw, 20rem); }
.tc-stage.tc-still { width: min(42vw, 11rem); }
.tc-stage.tc-thumb { width: 100%; perspective: none; }

.tc-card {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
}

.tc-play .tc-card { cursor: grab; }
.tc-play:active .tc-card { cursor: grabbing; }
.tc-thumb .tc-card { transform: none; will-change: auto; }

/* 四面封邊：側看是實心紙邊。直邊從圓角內側開始（不伸出圓角），
   圓角處的厚度由夾在正背面中間的圓角芯片補上（.tc-card::before）。 */
.tc-edge {
  position: absolute;
  background: linear-gradient(180deg, #7a5834 0%, #3a2414 100%);
  pointer-events: none;
}
.tc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: #4a321c;
  transform: translateZ(0);
  pointer-events: none;
}
.tc-thumb .tc-card::before { display: none; }
.tc-edge-left, .tc-edge-right { top: var(--radius); bottom: var(--radius); width: var(--thick); }
.tc-edge-left { left: 0; transform: translateX(-50%) rotateY(90deg); }
.tc-edge-right { right: 0; transform: translateX(50%) rotateY(90deg); }
.tc-edge-top, .tc-edge-bottom { left: var(--radius); right: var(--radius); height: var(--thick); }
.tc-edge-top { top: 0; transform: translateY(-50%) rotateX(90deg); }
.tc-edge-bottom { bottom: 0; transform: translateY(50%) rotateX(90deg); }
.tc-thumb .tc-edge { display: none; }

.tc-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  /* Chromium 在子層被合成時不一定照 border-radius 裁切；clip-path 讓每一層都裁成同一個圓角 */
  clip-path: inset(0 round var(--radius));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    0 0 0 1px rgba(52, 36, 18, 0.55),
    inset 0 0 0 2px rgba(248, 236, 208, 0.18);
}

.tc-front {
  isolation: isolate;
  transform: translateZ(calc(var(--thick) / 2));
  background: linear-gradient(180deg, #f3ead4 0%, #e4d3b0 100%);
}

.tc-back {
  transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
  background: radial-gradient(circle at 50% 38%, #4a2c22 0%, #2a1812 70%);
}

.tc-flat, .tc-depth, .tc-layer { position: absolute; inset: 0; }

/* 看哪一面由 pointer.js 寫 data-facing；沒寫（縮圖）時只顯示正面 */
.tc-stage:not([data-facing="back"]) .tc-back,
.tc-stage[data-facing="back"] .tc-front { visibility: hidden; }

.tc-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* 沒卡圖的排版卡面 */
.tc-typeset {
  position: absolute;
  inset: 0;
  padding: 12% 9% 10%;
  background: radial-gradient(ellipse at 50% 30%, #f6edd6 0%, #d8c49a 100%);
  color: #3a2414;
  font-family: "Noto Serif TC", serif;
}
.tc-typeset::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 2px solid rgba(120, 36, 28, 0.55);
  box-shadow: inset 0 0 0 1px rgba(40, 24, 12, 0.35);
  pointer-events: none;
}
.tc-seal {
  position: absolute;
  top: 8%;
  right: 10%;
  padding: 0.2rem;
  border: 2px solid #9a2a22;
  color: #9a2a22;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}
.tc-typeset h3 {
  margin: 1.6rem 0 0.4rem;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.24em;
}
.tc-src, .tc-feat { margin: 0.15rem 0; letter-spacing: 0.08em; }
.tc-src { color: #6a4030; font-size: 0.72rem; }
.tc-feat { color: #4a3020; font-size: 0.78rem; }
.tc-thumb .tc-typeset h3 { margin-top: 0.6rem; font-size: 0.9rem; }
.tc-thumb .tc-typeset .tc-feat, .tc-thumb .tc-typeset .tc-src { display: none; }

.tc-back-inner {
  position: absolute;
  inset: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border: 1.5px solid rgba(232, 196, 140, 0.35);
  box-shadow: inset 0 0 0 6px rgba(90, 42, 28, 0.35);
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
}
.tc-back-seal {
  padding: 0.5rem;
  border: 3px solid #c44a3a;
  color: #c44a3a;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  background: rgba(180, 40, 28, 0.08);
}
.tc-back-title { color: #e8c48c; font-size: 0.82rem; letter-spacing: 0.42em; }

/* 共用疊層 */
.tc-foil, .tc-glitter, .tc-bar, .tc-glare, .tc-bevel, .tc-paper, .tc-gold, .tc-lfoil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.tc-glare {
  background: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgba(255, 252, 240, 0.78) 0%,
    rgba(255, 244, 210, 0.22) 22%,
    rgba(20, 12, 8, 0.08) 70%,
    transparent 100%
  );
  mix-blend-mode: overlay;
}

.tc-bevel {
  background: linear-gradient(
    calc(125deg + var(--sx) * 20deg),
    rgba(255, 250, 236, 0.42) 0%,
    transparent 26%,
    transparent 74%,
    rgba(20, 10, 6, 0.28) 100%
  );
  mix-blend-mode: soft-light;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.22);
}

.tc-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -7%;
  height: 16%;
  background: radial-gradient(ellipse at 50% 50%, rgba(18, 10, 6, 0.5), transparent 72%);
  transform: translate3d(calc(var(--sx) * 14px), calc(var(--sy) * 6px), 0);
  filter: blur(10px);
  pointer-events: none;
}
.tc-thumb .tc-shadow { display: none; }

/* 預設全部隱藏，各風格再打開自己要的 */
.tc-depth, .tc-paper, .tc-gold, .tc-foil, .tc-glitter, .tc-bar { display: none; }

/* ───────── 1 礦物箔：金、銅、孔雀石、石青、朱砂、螺鈿 ───────── */
.tc-stage:not([data-style]) .tc-foil,
.tc-stage[data-style="mineral"] .tc-foil,
.tc-stage[data-style="mineral"] .tc-glitter,
.tc-stage[data-style="mineral"] .tc-bar { display: block; }

.tc-stage[data-style="mineral"] .tc-foil {
  background-image:
    repeating-linear-gradient(0deg,
      hsl(38 72% 58%) 0%, hsl(88 38% 48%) 8%, hsl(198 48% 46%) 16%,
      hsl(8 62% 50%) 24%, hsl(46 80% 62%) 32%, hsl(160 22% 62%) 40%, hsl(38 72% 58%) 48%),
    repeating-linear-gradient(125deg,
      rgba(18, 12, 8, 0.55) 0%, rgba(210, 180, 110, 0.35) 4%, rgba(240, 230, 200, 0.55) 5.2%,
      rgba(80, 120, 110, 0.28) 8%, rgba(18, 12, 8, 0.55) 14%);
  background-size: 260% 260%, 220% 220%;
  background-position:
    calc(50% + var(--sx) * -70%) calc(50% + var(--sy) * -70%),
    calc(50% + var(--sx) * 55%) calc(50% + var(--sy) * 55%);
  background-blend-mode: color, soft-light;
  mix-blend-mode: color-dodge;
  filter: brightness(0.78) contrast(1.65) saturate(1.15);
  opacity: var(--foil);
}
.tc-stage[data-style="mineral"].is-front .tc-front .tc-foil {
  animation: tc-foil-ignite 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tc-foil-ignite {
  0% { filter: brightness(2.1) contrast(2) saturate(1.4); opacity: 0; }
  45% { opacity: 0.88; }
  100% { filter: brightness(0.78) contrast(1.65) saturate(1.15); opacity: var(--foil); }
}
.tc-stage[data-style="mineral"] .tc-glitter {
  background-image: var(--sparkle, none);
  background-size: 180% 180%;
  background-position: calc(50% + var(--sx) * -40%) calc(50% + var(--sy) * -40%);
  mix-blend-mode: screen;
  opacity: calc(0.18 + var(--foil) * 0.28);
}
.tc-stage[data-style="mineral"] .tc-bar {
  background: linear-gradient(calc(118deg + var(--sx) * 18deg),
    transparent 34%, rgba(255, 236, 190, 0) 42%, rgba(255, 248, 220, 0.55) 49%,
    rgba(180, 220, 230, 0.28) 52%, rgba(255, 236, 190, 0) 58%, transparent 66%);
  mix-blend-mode: overlay;
  opacity: 0.85;
}
.tc-back .tc-foil { opacity: calc(var(--foil) * 0.45); }

/* ───────── 2 虹彩：光譜帶＋細斜紋，隨角度滑動 ───────── */
.tc-stage[data-style="rainbow"] .tc-foil,
.tc-stage[data-style="rainbow"] .tc-bar { display: block; }

.tc-stage[data-style="rainbow"] .tc-foil {
  background-image:
    linear-gradient(calc(-50deg + var(--sx) * 30deg),
      hsl(350 90% 66%), hsl(30 95% 64%), hsl(58 95% 62%), hsl(130 70% 60%),
      hsl(190 85% 62%), hsl(240 80% 70%), hsl(290 75% 68%), hsl(350 90% 66%),
      hsl(30 95% 64%), hsl(58 95% 62%), hsl(130 70% 60%)),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.0) 0px, rgba(255, 255, 255, 0.0) 3px,
      rgba(255, 255, 255, 0.35) 4px, rgba(255, 255, 255, 0.0) 5px);
  background-size: 300% 300%, auto;
  background-position: calc(50% + var(--sx) * 90%) calc(50% + var(--sy) * 90%), 0 0;
  background-blend-mode: overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(0.62) contrast(1.5) saturate(1.3);
  opacity: calc(var(--foil) * 0.95);
}
.tc-stage[data-style="rainbow"] .tc-bar {
  background: linear-gradient(calc(110deg + var(--sx) * 25deg),
    transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  background-size: 200% 100%;
  background-position: calc(50% - var(--sx) * 60%) 0;
  mix-blend-mode: soft-light;
}

/* ───────── 3 景深：三層前後錯開，各層自帶箔 ───────── */
.tc-stage[data-style="parallax"][data-layers] .tc-flat { display: none; }
.tc-stage[data-style="parallax"][data-layers] .tc-depth { display: block; }
.tc-stage[data-style="parallax"][data-layers] .tc-front {
  overflow: visible;
  clip-path: none; /* clip-path 會把 3D 壓平；景深各層自己裁圓角 */
  transform-style: preserve-3d;
  isolation: auto;
}
.tc-stage[data-style="parallax"][data-layers] .tc-front > .tc-glare,
.tc-stage[data-style="parallax"][data-layers] .tc-front > .tc-bevel { display: none; }
.tc-depth { transform-style: preserve-3d; }
.tc-layer {
  overflow: hidden;
  border-radius: var(--radius);
  clip-path: inset(0 round var(--radius));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 遠層放大一點、反向移動，邊緣不露底 */
.tc-l-bg > * {
  /* 移動、放大的是層裡的圖，層本身留在卡框內裁圓角，邊角才不會跑出卡外 */
  transform: translate3d(calc(var(--sx) * -10px), calc(var(--sy) * 8px), 0) scale(1.06);
}
.tc-l-subject {
  overflow: visible;
  clip-path: none;
  transform: translateZ(14px) scale(0.985);
  filter: drop-shadow(calc(var(--sx) * -10px) calc(6px + var(--sy) * -6px) 7px rgba(20, 10, 4, 0.45));
}
.tc-l-fg {
  transform: translateZ(7px) scale(0.992);
}
.tc-depth-glare {
  transform: translateZ(16px) scale(0.985);
  backface-visibility: hidden;
}
.tc-lfoil {
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: color-dodge;
  background-size: 260% 260%;
}
.tc-l-bg .tc-lfoil {
  background-image: repeating-linear-gradient(160deg,
    hsl(198 48% 40%) 0%, hsl(160 30% 48%) 10%, hsl(38 60% 52%) 20%, hsl(198 48% 40%) 30%);
  background-position: calc(50% + var(--sx) * -40%) calc(50% + var(--sy) * -40%);
  filter: brightness(0.6) contrast(1.4);
  opacity: calc(var(--foil) * 0.35);
}
.tc-l-subject .tc-lfoil {
  background-image: repeating-linear-gradient(20deg,
    hsl(38 90% 62%) 0%, hsl(16 80% 56%) 7%, hsl(48 95% 70%) 14%, hsl(300 40% 60%) 21%, hsl(38 90% 62%) 28%);
  background-position: calc(50% + var(--sx) * 80%) calc(50% + var(--sy) * 80%);
  filter: brightness(0.7) contrast(1.6) saturate(1.2);
  opacity: calc(var(--foil) * 0.5);
}
.tc-l-fg .tc-lfoil {
  background-image: repeating-linear-gradient(90deg,
    hsl(42 80% 58%) 0%, hsl(8 60% 46%) 9%, hsl(46 90% 70%) 18%, hsl(42 80% 58%) 27%);
  background-position: calc(50% + var(--sx) * -70%) 50%;
  filter: brightness(0.75) contrast(1.5);
  opacity: calc(var(--foil) * 0.7);
}

/* ───────── 4 水墨描金：宣紙、墨色，金只走在線稿上 ───────── */
.tc-stage[data-style="inkgold"] .tc-front {
  background-color: #efe5cf;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 252, 240, 0.7), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.26 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
.tc-stage[data-style="inkgold"] .tc-flat .tc-art {
  mix-blend-mode: multiply;
  filter: grayscale(1) sepia(0.12) contrast(1.18) brightness(1.08);
}
/* 彩繪卡（如二十四節氣）在水墨描金下保留彩色，金只走窗框與外框 */
.tc-stage[data-style="inkgold"][data-keep-color] .tc-flat .tc-art {
  mix-blend-mode: normal;
  filter: saturate(0.92) contrast(1.03);
}
.tc-stage[data-style="inkgold"] .tc-paper {
  display: block;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.18' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.tc-stage[data-style="inkgold"][data-lineart] .tc-gold {
  display: block;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-image:
    linear-gradient(calc(115deg + var(--sx) * 35deg),
      #6e4c14 0%, #b88a2e 22%, #f8e39a 38%, #fffbe2 44%, #e2b858 52%, #8a6420 70%, #d9ac4c 86%, #6e4c14 100%);
  background-size: 260% 260%;
  background-position: calc(50% + var(--sx) * -85%) calc(50% + var(--sy) * -85%);
  filter: drop-shadow(0 0 0.4px rgba(90, 60, 10, 0.9));
  opacity: calc(0.55 + var(--foil) * 0.45);
  animation: tc-gold-shimmer 5.5s ease-in-out infinite;
}
@keyframes tc-gold-shimmer {
  0%, 100% { filter: drop-shadow(0 0 0.4px rgba(90, 60, 10, 0.9)) brightness(1); }
  50% { filter: drop-shadow(0 0 0.4px rgba(90, 60, 10, 0.9)) brightness(1.18); }
}
.tc-stage[data-style="inkgold"] .tc-glare { mix-blend-mode: soft-light; opacity: 0.7; }

/* 手機體感開關 */
.tc-gyro {
  display: block;
  margin: 1rem auto 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .tc-stage .tc-foil,
  .tc-stage .tc-gold { animation: none !important; }
  .tc-card { will-change: auto; }
}

/* 彩繪卡的前景是框和字：箔光收斂，免得把季色洗白 */
.tc-stage[data-keep-color] .tc-l-fg .tc-lfoil { opacity: calc(var(--foil) * 0.18); }
.tc-stage[data-keep-color] .tc-depth-glare { opacity: 0.45; }

/* 平面景深（WebKit／觸控）：不疊 3D，各層仍是同一張圓角卡，只做微小反向位移 */
.tc-stage[data-style="parallax"][data-layers][data-flat-depth] .tc-front {
  overflow: hidden;
  clip-path: inset(0 round var(--radius));
  transform-style: flat;
  isolation: isolate;
}
.tc-stage[data-flat-depth] .tc-depth { transform-style: flat; }
.tc-stage[data-flat-depth] .tc-l-bg > * {
  transform: translate(calc(var(--sx) * -7px), calc(var(--sy) * 6px)) scale(1.05);
}
.tc-stage[data-flat-depth] .tc-l-subject {
  overflow: hidden;
  clip-path: inset(0 round var(--radius));
  transform: translate(calc(var(--sx) * 3px), calc(var(--sy) * -2px));
}
.tc-stage[data-flat-depth] .tc-l-fg {
  transform: translate(calc(var(--sx) * 2px), calc(var(--sy) * -1.5px));
  filter: drop-shadow(calc(var(--sx) * -2px) calc(1px + var(--sy) * -1px) 3px rgba(10, 6, 2, 0.35));
}
.tc-stage[data-flat-depth] .tc-depth-glare { transform: none; }

/* ───── 畫窗景深（二十四節氣等）：窗裡的畫放大、明顯反向位移；框與字微移並把投影落在畫上 ─────
   畫被前景（挖空畫窗的框）蓋住，所以只在窗裡看得到；位移上限小於放大後多出的邊，不會露底。 */
.tc-stage[data-style="parallax"][data-window] .tc-l-bg > * {
  transform-origin: var(--win-x) var(--win-y);
  transform:
    translate(clamp(-9%, calc(var(--sx) * -22%), 9%), clamp(-4%, calc(var(--sy) * 16%), 4%))
    scale(1.2);
  will-change: transform;
}
.tc-stage[data-style="parallax"][data-window] .tc-l-fg {
  filter:
    drop-shadow(calc(var(--sx) * -7px) calc(2px + var(--sy) * 7px) 5px rgba(8, 5, 2, 0.55))
    drop-shadow(0 0 1px rgba(8, 5, 2, 0.4));
}
.tc-stage[data-style="parallax"][data-window][data-flat-depth] .tc-l-fg {
  transform: translate(calc(var(--sx) * 3px), calc(var(--sy) * -2.5px));
}