/* ============================================================
   台灣選舉 — 浮誇大字報 + 平行四邊形分割版型

   自訂說明：
   - 主色系：修改 tailwind.config 中的色值
   - 候選人號碼：搜尋 "3" 替換為你的號次
   - 英雄區背景：在 .hero-bg 加上 background-image
   ============================================================ */

html { scroll-behavior: smooth; }

/* ---- 平行四邊形 / 梯形區塊分割 ---- */
.skew-divider {
  position: relative;
}
.skew-divider::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 100px;
  background: inherit;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.skew-divider-reverse {
  position: relative;
}
.skew-divider-reverse::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 100px;
  background: inherit;
  clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
  z-index: 2;
}

/* 梯形底部 */
.trapezoid-bottom::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  height: 100px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  z-index: 2;
}

/* ---- 圓形號次 ---- */
.candidate-circle {
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 號次脈動 */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}
.pulse-number {
  animation: pulse-ring 2s ease infinite;
}

/* ---- 跑馬燈（雙動畫無縫版） ---- */

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes scroll-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.marquee-track {
  display: flex;
  overflow: hidden;
}
.marquee-track .marquee-content {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* 向左 */
.animate-marquee .marquee-content {
  animation: scroll-left 15s linear infinite;
}

/* 向右 */
.animate-marquee-reverse .marquee-content {
  animation: scroll-right 40s linear infinite;
}


/* ---- 傾斜文字標籤 ---- */
.skew-tag {
  transform: skewX(-8deg);
  display: inline-block;
  backface-visibility: hidden;
}
.skew-tag > * {
  transform: skewX(8deg);
  display: inline-block;
}

/* ---- 平行四邊形卡片 ---- */
.parallelogram-card {
  transform: skewX(-3deg);
  backface-visibility: hidden;
}
.parallelogram-card > * {
  transform: skewX(3deg);
}

/* ---- 英雄區背景 ---- */
.hero-bg {
  /* background-image: url('../assets/hero.jpg'); */
  background-size: cover;
  background-position: center top;
}

/* ---- 行動選單 ---- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* ---- 導覽連結 ---- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: #EAB308;
  transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ---- 滾動顯示 ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 大字報陰影 ---- */
.poster-text {
  text-shadow: 5px 5px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(255,255,255,0.1);
}

/* ---- 焦點 ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid #EAB308;
  outline-offset: 2px;
}

/* ---- 彩帶裝飾 ---- */
@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(20px) rotate(360deg); opacity: 0; }
}

/* ---- 捲軸 ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #E11D48; border-radius: 0; }

/* ---- 減少動態 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-marquee .marquee-content,
  .animate-marquee-reverse .marquee-content { animation: none; }
  .pulse-number { animation: none; }
  .mobile-menu { transition: none; }
}