/* ============================================================
   deadline-flip.css — 「考試倒數」與「補助截止」翻牌動畫
   部署位置：/Content/css/deadline-flip.css（於 site.css 之後載入）
   作用對象（皆為既有元素，不改 HTML）：
     .exam-magnet .magnet-days strong   最近場次倒數的天數
     .exam-magnet .deadline             「報名至 10/5」
     .sbn-kicker                        補助橫幅「🎁 考照補助・還有 27 天」
   規則：
   1. 只有 JS 成功處理後才會改變外觀；無 JS 時頁面與原本完全相同。
   2. 翻牌只用 transform（rotateX），不改版面尺寸，不產生 CLS。
   3. prefers-reduced-motion：不翻牌、不脈動，直接顯示最終數字與標籤。
   ============================================================ */

/* ── 翻牌磚 ── */
.tf-wrap { display: inline-block; }
.tf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tf { display: inline-flex; gap: 2px; vertical-align: top; height: 1.1em; line-height: 1.1em; letter-spacing: 0; }
.tf-d { position: relative; display: inline-block; width: .66em; height: 1.1em; perspective: 180px;
  border-radius: .14em; background: var(--tw-navy); color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; }
.tf-d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.4); z-index: 6; }

.tf-h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--tw-navy); backface-visibility: hidden; }
.tf-h b { position: absolute; left: 0; right: 0; display: block; height: 200%; font: inherit; line-height: 1.1em; }
.tf-top, .tf-ft { top: 0;    border-radius: .14em .14em 0 0; }
.tf-bot, .tf-fb { bottom: 0; border-radius: 0 0 .14em .14em; }
.tf-top b, .tf-ft b { top: 0; }
.tf-bot b, .tf-fb b { bottom: 0; }
.tf-ft, .tf-fb { display: none; }
.tf-d.tf-run .tf-ft, .tf-d.tf-run .tf-fb { display: block; }
.tf-ft { transform-origin: 50% 100%; z-index: 3; animation: tf-ft .17s ease-in forwards; }
.tf-fb { transform-origin: 50% 0;    z-index: 4; transform: rotateX(90deg); animation: tf-fb .17s ease-out .17s forwards; }
@keyframes tf-ft { to { transform: rotateX(-90deg); } }
@keyframes tf-fb { to { transform: rotateX(0); } }

/* 倒數卡：天數翻牌磚在白底小卡內，字級沿用原本 22px。
   site.css 有 .magnet-days span { font-size:11px; color:… }，會誤傷翻牌磚（它們也是 span），這裡用較高優先級還原 */
.exam-magnet .magnet-days strong span { font-size: inherit; color: inherit; font-weight: inherit; }
.exam-magnet .magnet-days strong .tf-d, .exam-magnet .magnet-days strong .tf-h { color: #fff; }
.exam-magnet .magnet-days strong .tf { margin-inline: auto; }
.exam-magnet .magnet-days strong { display: flex; justify-content: center; height: 1.1em; }
/* 7 天內：卡片轉金底，提示「快到了」 */
.exam-magnet .magnet-days.tf-hot { background: var(--tw-gold); }
.exam-magnet .magnet-days.tf-hot > span { color: #24180a; }                  /* 只改「天後」小字，不影響翻牌磚 */

/* 補助橫幅：標題列放大翻牌磚；7 天內脈動 5 次 */
.sbn-kicker .tf { font-size: 1.45em; margin: 0 .2em; vertical-align: -.28em; }
.sbn-kicker.tf-urgent .tf { animation: tf-beat 1.4s ease-in-out 5; }

/* 剩餘時間條（選用，需設定 TW99_FLIP.subsidyStart） */
.tf-meter { display: block; max-width: 22em; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(181,43,39,.18); overflow: hidden; }
.tf-meter i { display: block; height: 100%; background: #b52b27; transform-origin: left center; transform: scaleX(1); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }

/* 報名截止標籤：今天／明天／剩 N 天 */
.tf-tag { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--tw-gold); color: #24180a;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 18px; vertical-align: 1px; }
.tf-tag.is-today { animation: tf-beat 1.4s ease-in-out 5; }
@keyframes tf-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .tf-ft, .tf-fb { animation: none; }
  .sbn-kicker.tf-urgent .tf, .tf-tag.is-today { animation: none; }
  .tf-meter i { transition: none; }
}