/* Design Ref: §4.3 — Fade-in animation tokens (useFadeIn port)
   specificity 강화 + !important: Tailwind CDN preflight나 임의 클래스 조합과의
   우선순위 분쟁을 차단해 .show 부착 시 항상 표시되도록 보장 */
.fade-item {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.fade-item.fade-up   { transform: translateY(40px); }
.fade-item.fade-left { transform: translateX(-40px); }
.fade-item.fade-right { transform: translateX(40px); }
.fade-item.show {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* JS 비활성화 환경 대비: 즉시 표시 */
.no-js .fade-item,
html:not(.js) .fade-item {
  opacity: 1 !important;
  transform: none !important;
}

/* Design Ref: §5.3 — Header scroll states (toggled via is-scrolled class) */
#site-header.is-scrolled {
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#site-header.is-scrolled .header-text-toggle { color: #1f2937 !important; }
#site-header:not(.is-scrolled) .header-text-toggle { color: #fff !important; }