/* 마케팅 스토리 장면별 의미 모션 (marketing-story-accents.js와 짝) */

/* 01-왼쪽: 그래프 끝 점 — 조회 불가여도 흐름은 계속 */
.im-chart-dot, .im-chart-ring { fill: #03c75a; opacity: 0; transition: opacity .5s ease; }
.im-chart-ring { fill: none; stroke: #03c75a; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.im-live .im-chart-dot { opacity: 1; }
.im-live .im-chart-ring { animation: im-ring 1.8s ease-out infinite; }
.im-live .im-grade b { animation: im-flicker 2.4s steps(1) infinite; }
@keyframes im-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes im-flicker { 0%, 62%, 70%, 100% { opacity: 1; } 64%, 68% { opacity: .35; } }

/* 01-오른쪽: 질문에 답하는 글은 떠오르고, 홍보 문구는 가라앉음 */
.im-search-scene .im-real-result { position: relative; }
.im-search-scene .im-real-result:not(.im-result-muted) {
  background: rgb(252 247 233 / calc(var(--im-good, 0) * 1));
  box-shadow: inset calc(var(--im-good, 0) * 4px) 0 0 #c9a54a;
}
/* 기존 등장 연출(--im-step-*)과 곱해서 적용 → 등장 후에 가라앉음 */
.im-story .im-search-scene .im-result-muted {
  filter: grayscale(var(--im-bad, 0));
  opacity: calc(var(--im-step-opacity, 1) * (1 - var(--im-bad, 0) * .55));
  transform: translateY(calc(var(--im-step-y, 0px) + var(--im-bad, 0) * 6px));
}
.im-answer-chip, .im-rank-chip {
  position: absolute; top: 12px; right: 14px; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #6f5413; background: #f3e3ad;
}
.im-answer-chip { opacity: var(--im-good, 0); transform: scale(calc(.8 + var(--im-good, 0) * .2)); }

/* 02: 질문을 훑고 → 하나를 골라 → 원고 제목으로 */
.im-keyword-row { transition: background .25s ease, padding .25s ease; border-radius: 5px; }
.im-keyword-row.im-scan { background: #f3efe6; padding-inline: 8px; }
.im-keyword-row.im-pick { background: #fbf0c9; padding-inline: 8px; box-shadow: inset 3px 0 0 #c9a54a; }
.im-story .im-keyword-row.im-pick > span { color: #0d2421; font-weight: 700; }
.im-editor-document h4 { background: linear-gradient(transparent 62%, #f3e3ad 62%) no-repeat 0 0 / 0% 100%; transition: background-size .7s ease .15s; }
.im-editor-document h4.im-picked-title { background-size: 100% 100%; }

/* 03: 예전 화면은 색이 빠지고, 지금 화면은 홈페이지가 첫 화면을 차지 */
.im-serp-before .im-browser { filter: grayscale(calc(var(--im-past, 0) * .9)); opacity: calc(1 - var(--im-past, 0) * .3); }
.im-rank-chip { opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.im-ranked .im-rank-chip { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .im-live .im-chart-ring, .im-live .im-grade b { animation: none; }
}