/* ============================================================
   kpop-fx.css — 케이팝 포인트 레이어 (홀로그램 셔머 · 응원 글로우 · 포토카드 틸트)
   원칙: 수채 동화책 바탕을 덮지 않는다. "무대 조명 한 줄기"만.
   모든 애니메이션은 prefers-reduced-motion 에서 정지, hover 효과는 데스크톱만.
   ============================================================ */

/* ── 응원 글로우 (hover, 데스크톱 전용) ─────────────────────── */
@media (hover: hover) {
  .pager-link,
  .related-link,
  .toc-link,
  .contents-link {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .pager-link:hover:not(.is-disabled),
  .related-link:hover,
  .toc-link:hover,
  .contents-link:hover {
    border-color: var(--zone-accent);
    box-shadow: 0 6px 18px -8px var(--zone-accent);
    transform: translateY(-1px);
  }
  /* 포토카드 3D 틸트 */
  .codex-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .codex-card:hover {
    transform: translateY(-2px) perspective(600px) rotateX(3deg);
    box-shadow: 0 12px 24px -14px var(--zone-accent);
  }
}

/* ── 애니메이션 (reduced-motion 이 아닐 때만) ───────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* 표지 제목 — 홀로그램 셔머 */
  .cover .title {
    background: linear-gradient(100deg,
      var(--zone-ink) 8%, var(--zone-accent) 34%,
      var(--zone-accent-2) 50%, var(--zone-accent) 66%, var(--zone-ink) 92%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: idw-shimmer var(--fx-slow) linear infinite;
  }
  @keyframes idw-shimmer {
    to { background-position: 240% 0; }
  }

  /* featured 도감 카드 — 대각 셔머 스윕 */
  .codex-card.is-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
      transparent 34%, rgba(255, 255, 255, 0.55) 50%, transparent 66%);
    background-size: 240% 100%;
    animation: idw-sweep var(--fx-med) ease-in-out infinite;
  }
  @keyframes idw-sweep {
    0% { background-position: 200% 0; }
    100% { background-position: -60% 0; }
  }

  /* 진행 띠 — 은은한 흐름 */
  .reading-progress-bar {
    background-size: 200% 100%;
    animation: idw-flow 6s linear infinite;
  }
  @keyframes idw-flow {
    to { background-position: 200% 0; }
  }

  /* 야경 변주 — 반딧불(윤슬) 두 점 */
  [data-variant="night"] .hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 22%;
    top: 38%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zone-accent-2);
    box-shadow: 0 0 8px 2px var(--zone-accent-2), 26px 40px 0 -1px var(--zone-accent-2);
    animation: idw-firefly 4.2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes idw-firefly {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-4px); }
  }

  /* 무대 변주 — 스포트라이트 은은한 맥동 */
  [data-variant="stage"] .article-header::after {
    animation: idw-spot 5s ease-in-out infinite;
  }
  @keyframes idw-spot {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
  }
}

/* 포커스 링은 항상 구역색으로 (a11y) */
[data-zone] .pager-link:focus-visible,
[data-zone] .related-link:focus-visible,
[data-zone] .toc-link:focus-visible {
  outline-color: var(--zone-accent);
}