/* ============================================================
   LuckyQR — layouts.css
   各投影畫面佈局補充樣式
   ============================================================ */

/* ── 卡片動畫延遲（Stagger）────────────────────────────── */
.winner-card:nth-child(1)  { animation-delay: .02s; }
.winner-card:nth-child(2)  { animation-delay: .04s; }
.winner-card:nth-child(3)  { animation-delay: .06s; }
.winner-card:nth-child(4)  { animation-delay: .08s; }
.winner-card:nth-child(5)  { animation-delay: .10s; }
.winner-card:nth-child(6)  { animation-delay: .12s; }
.winner-card:nth-child(7)  { animation-delay: .14s; }
.winner-card:nth-child(8)  { animation-delay: .16s; }
.winner-card:nth-child(9)  { animation-delay: .18s; }
.winner-card:nth-child(10) { animation-delay: .20s; }
.winner-card:nth-child(11) { animation-delay: .22s; }
.winner-card:nth-child(12) { animation-delay: .24s; }
.winner-card:nth-child(13) { animation-delay: .26s; }
.winner-card:nth-child(14) { animation-delay: .28s; }
.winner-card:nth-child(15) { animation-delay: .30s; }
.winner-card:nth-child(16) { animation-delay: .32s; }
.winner-card:nth-child(17) { animation-delay: .34s; }
.winner-card:nth-child(18) { animation-delay: .36s; }
.winner-card:nth-child(19) { animation-delay: .38s; }
.winner-card:nth-child(20) { animation-delay: .40s; }

/* ── T2: 4欄×5列  ─────────────────────────────────────── */
.layout-grid-4x5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 28px;
  width: 100%;
  height: 100%;
}

/* ── T3: 3欄×5列  ─────────────────────────────────────── */
.layout-grid-3x5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 28px;
  width: 100%;
  height: 100%;
}

/* ── 全螢幕適配比例縮放 ─────────────────────────────────── */
.screen-scale-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* ── 文字雲 word items ──────────────────────────────────── */
.cloud-word {
  position: absolute;
  font-family: var(--font-main);
  font-weight: 700;
  opacity: 0;
  animation: wordAppear .5s ease-out forwards;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

@keyframes wordAppear {
  0%   { opacity: 0; transform: scale(.6) translateY(14px); }
  70%  { opacity: 1; transform: scale(1.06) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.cloud-word.color-0 { color: #003F87; }
.cloud-word.color-1 { color: #009DC4; }
.cloud-word.color-2 { color: #0066B3; }
.cloud-word.color-3 { color: #CC0000; }
.cloud-word.color-4 { color: #1565C0; }
.cloud-word.color-5 { color: #00796B; }
.cloud-word.color-6 { color: #6A1B9A; }
.cloud-word.color-7 { color: #E65100; }

/* ── QR 互動背景動畫 ────────────────────────────────────── */
.qr-bg-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,157,196,.06) 0%, transparent 70%);
  animation: bgPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bgPulse {
  0%,100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ── 首獎/禮品獎光暈效果 ────────────────────────────────── */
.winner-glow {
  position: relative;
}

.winner-glow::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at 50% 50%, rgba(204,0,0,.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%,100% { opacity: .4; transform: scale(.95); }
  50%      { opacity: 1; transform: scale(1.05); }
}

/* ── 頁面進入動畫 ────────────────────────────────────────── */
.screen-enter {
  animation: screenEnter .35s ease both;
}

@keyframes screenEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 禮品獎「多槽」並列細節 ──────────────────────────────── */
.multi-slot-2 .product-slot:nth-child(1) { animation-delay: .05s; }
.multi-slot-2 .product-slot:nth-child(2) { animation-delay: .20s; }
.multi-slot-3 .product-slot:nth-child(1) { animation-delay: .05s; }
.multi-slot-3 .product-slot:nth-child(2) { animation-delay: .18s; }
.multi-slot-3 .product-slot:nth-child(3) { animation-delay: .31s; }

/* ── 投影安全區 (Safe Zone) 輔助 ─────────────────────────── */
.safe-zone {
  padding: 0 60px;
}

/* ── 大數字等寬與排版 ────────────────────────────────────── */
.mono-digit {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

/* ── 分頁標示卡片增強 ───────────────────────────────────── */
.page-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,63,135,.1);
  color: var(--color-rotary-blue);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-rotary-blue);
  opacity: .4;
}

.page-dot.active {
  opacity: 1;
}