:root { --brand-yellow: #facc15; }
html { scroll-behavior: smooth; }

.shadow-on {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.nav-link { padding-bottom: 6px; transition: color .2s ease; }
.nav-link.active { color: #eab308; border-bottom-width: none; font-weight: 700; }

.section-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem }
.section-head .bar { width:.375rem; height:2rem; border-radius:.5rem; background:#facc15 }

.chip { border-radius: .75rem; padding:.5rem 1rem; border:1px solid rgb(226 232 240); background:white; font-weight:600; }
.chip[data-active="true"]{ background:#facc15; color:#0b0f19; border-color:#fde68a }

/* Header 顏色切換：預設透明白字；加上 .header-solid 後變白底黑字 */
header { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
header.header-solid {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 4px solid #facc15;
}

/* === Reveal Animations (no extra library) === */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; will-change: transform, opacity; }
  .reveal.is-visible { opacity: 1; transform: none; }

  .reveal-up { transform: translateY(22px); }
  .reveal-right { transform: translateX(24px); }
  .reveal-left { transform: translateX(-24px); }
  .reveal-zoom { transform: scale(.96); }

  .reveal-fast { transition-duration: .5s; }
}

.card-img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background-color: white;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
}