/* nc-flip — 倒數每一位數字一張白底卡片＋翻牌（2026-10-19 使用者直接指示，非 V9）。
   卡片由模組產生，Bricks 不會輸出這些 class 的 CSS，所以這個檔案由 ncku-carnival-site 外掛載入（同 nc-calendar）。 */

/* 原本的數字（Bricks Countdown 的 .format）只做視覺隱藏，螢幕閱讀器仍讀完整數字；模組啟動後才加這個 class */
.nc-flip__source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nc-flip__digits {
  display: inline-flex;
  gap: var(--sp-3);
}

/* 一位數字一張卡：中間細分隔線、等寬數字 */
.nc-flip__digit {
  position: relative;
  display: inline-block;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--radius-4);
  background: linear-gradient(var(--c-flip-line), var(--c-flip-line)) center / 100% 1px no-repeat, var(--c-white);
  box-shadow: var(--shadow-flip-card);
  font-size: var(--fs-25);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-body);
  text-align: center;
  perspective: var(--flip-perspective);
}

/* 翻片：上半片（舊數字）往下翻、下半片（新數字）落下，各占 --dur-flip 的一半。
   疊放順序：卡片底（.nc-flip__face 新數字）→ ::before 舊上半片 → .nc-flip__hold 舊下半 → ::after 新下半片。
   翻牌期間下半部一直是舊數字，新下半片落下蓋住後才換成新數字（2026-10-19 使用者回報：原本下半部先換成新數字，看起來數字先變、動畫才開始） */
.nc-flip__digit::before,
.nc-flip__digit::after,
.nc-flip__hold {
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background-color: var(--c-white);
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.nc-flip__digit::before {
  content: attr(data-flip-from);
  clip-path: inset(0 0 50% 0);
  transform: rotateX(-90deg);
}

.nc-flip__digit::after {
  content: attr(data-flip-to);
  clip-path: inset(50% 0 0 0);
  transform: rotateX(0deg);
}

/* 舊數字的下半：只在翻牌狀態顯示（沒有翻牌、減少動態時不顯示） */
.nc-flip__hold {
  clip-path: inset(50% 0 0 0);
  visibility: hidden;
}

.nc-flip__digit.is-flip-start .nc-flip__hold,
.nc-flip__digit.is-flip-run .nc-flip__hold {
  visibility: visible;
}

.nc-flip__digit.is-flip-start::before {
  transform: rotateX(0deg);
}

.nc-flip__digit.is-flip-start::after {
  transform: rotateX(90deg);
}

.nc-flip__digit.is-flip-run::before {
  transform: rotateX(-90deg);
  transition: transform calc(var(--dur-flip) / 2) ease-in;
}

.nc-flip__digit.is-flip-run::after {
  transform: rotateX(0deg);
  transition: transform calc(var(--dur-flip) / 2) ease-out calc(var(--dur-flip) / 2);
}

/* 手機：字級與左右內距隨螢幕縮小，倒數保持單行（320 寬也放得下） */
@media (max-width: 600px) {
  .nc-flip__digit {
    padding: var(--sp-2) var(--sp-flip-x-m);
    font-size: var(--fs-flip-m);
  }
}

/* 減少動態：不翻牌，數字直接換 */
@media (prefers-reduced-motion: reduce) {
  .nc-flip__digit::before,
  .nc-flip__digit::after {
    display: none;
  }
}