/* marketingcode.kr 홈 모션그래픽. 섹션마다 정적 이미지/아이콘 자리에 들어가는 장면과, 화면에 들어올 때 한 번 재생되는 등장 효과.
   장면 색은 사이트 변수에 연결한다. 움직임 줄이기 설정이면 완성 화면이 바로 보인다. */
body { word-break: keep-all; overflow-wrap: break-word; }
.hero-title mark, .hero-trust-item span, .badge-brand, .badge-cost-free, .mc-chip { white-space: nowrap; }

.mc-scene {
  --card: var(--warm-card); --border: var(--warm-border); --line: #cbd5e1; --node: var(--brand-primary);
  --label: var(--brand-navy); --muted: var(--text-muted); --light: var(--text-light); --bg: var(--warm-bg);
  --navy: var(--brand-navy); --text: var(--text-main); --ok: #16a34a; --accent: var(--brand-accent);
  --glow-a: rgba(254, 243, 199, .55); --glow-b: rgba(224, 242, 254, .5);
}
.mc-scene svg { display: block; width: 100%; height: auto; }

/* 등장: 흐리게 아래에 있다가 제자리로 (translate 는 기존 hover transform 과 충돌하지 않는다) */
.mc-rise { opacity: .35; translate: 0 14px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
.in .mc-rise, .in.mc-rise { opacity: 1; translate: 0 0; }
.in .col-md-4:nth-child(2) .mc-rise { transition-delay: .12s; }
.in .col-md-4:nth-child(3) .mc-rise { transition-delay: .24s; }

/* 공통 장면 동작 — 감싸는 요소에 .in 이 붙을 때 시작 */
.mc-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .mc-draw { animation: mcDraw 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes mcDraw { to { stroke-dashoffset: 0; } }
.mc-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.in .mc-pop { animation: mcPop .6s cubic-bezier(.2, .9, .3, 1.3) forwards; }
@keyframes mcPop { to { transform: scale(1); } }
.mc-fade { opacity: 0; }
.in .mc-fade { animation: mcFadeIn .7s ease forwards; }
@keyframes mcFadeIn { to { opacity: 1; } }
.mc-growx { transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.in .mc-growx { animation: mcGrowX .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes mcGrowX { to { transform: scaleX(1); } }
.mc-growy { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.in .mc-growy { animation: mcGrowY .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes mcGrowY { to { transform: scaleY(1); } }
.mc-flow { stroke-dasharray: 2 10; animation: mcFlow 1.4s linear infinite; }
@keyframes mcFlow { to { stroke-dashoffset: -12; } }
.mc-spin { transform-box: fill-box; transform-origin: center; animation: mcSpin 12s linear infinite; }
@keyframes mcSpin { to { transform: rotate(360deg); } }
.mc-float { animation: mcFloat 4s ease-in-out infinite alternate; }
@keyframes mcFloat { to { transform: translateY(-6px); } }
.mc-beat { transform-box: fill-box; transform-origin: center; animation: mcBeat 2.4s ease-in-out infinite; }
@keyframes mcBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } }
.mc-ripple { transform-box: fill-box; transform-origin: center; animation: mcRipple 2.4s ease-out infinite; }
@keyframes mcRipple { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.mc-playwave { transform-box: fill-box; transform-origin: center; animation: mcWave 2.2s ease-out infinite; }
@keyframes mcWave { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.mc-cursor { animation: mcBlink 1s steps(1) infinite; }
@keyframes mcBlink { 50% { opacity: 0; } }
.mc-tick { animation: mcTick 1s steps(1) infinite; }
@keyframes mcTick { 50% { opacity: .35; } }

/* 1. 히어로 장면 */
.mc-motion { position: relative; aspect-ratio: 16 / 11; background: var(--warm-card); border: 1px solid var(--warm-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.mc-motion svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-motion .mc-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 12px 16px 16px; flex-wrap: wrap; }
.mc-chip { font-size: .74rem; font-weight: 700; padding: .3rem .75rem; border-radius: 9999px; border: 1px solid var(--warm-border); background: var(--warm-bg); color: var(--text-muted); opacity: 0; transform: translateY(6px); }
.in .mc-chip { animation: mcChipIn .6s ease forwards; }
.in .mc-chip:nth-child(1) { animation-delay: 5.2s; } .in .mc-chip:nth-child(2) { animation-delay: 5.6s; } .in .mc-chip:nth-child(3) { animation-delay: 6s; }
@keyframes mcChipIn { to { opacity: 1; transform: none; } }

/* 2. 가치와 철학: 아이콘 자리 */
.mc-pillar-scene { width: 100%; aspect-ratio: 3 / 2; border-radius: 16px; background: #f8fafc; margin-bottom: 1.4rem; overflow: hidden; }
.in .mc-sw-track { animation: mcSwTrack .5s 2.4s forwards; }
.in .mc-sw-knob { animation: mcSwKnob .5s cubic-bezier(.2, .9, .3, 1.3) 2.4s forwards; }
@keyframes mcSwTrack { to { fill: #16a34a; } }
@keyframes mcSwKnob { to { transform: translateX(32px); } }
.in .mc-task { animation: mcTask 3.9s ease-in-out infinite; }
@keyframes mcTask { 0%, 18% { transform: translateX(0); opacity: 1; } 30% { transform: translateX(96px); opacity: 0; } 100% { transform: translateX(96px); opacity: 0; } }

/* 3. 핵심 프로젝트: 사진 자리 */
.mc-pvis { position: absolute; inset: 0; }
.mc-pvis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-stamp { position: absolute; right: 18px; top: 18px; width: 84px; height: 84px; border-radius: 50%; background: var(--brand-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 800; line-height: 1; transform: scale(0) rotate(-20deg); box-shadow: 0 10px 24px rgba(224, 106, 59, .35); }
.mc-stamp b { font-size: 1.6rem; } .mc-stamp small { font-size: .7rem; font-weight: 700; }
.in .mc-stamp { animation: mcStamp .5s cubic-bezier(.2, .9, .3, 1.4) 2.2s forwards; }
@keyframes mcStamp { to { transform: scale(1) rotate(-12deg); } }
.in .mc-wave rect { animation: mcWv .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.in .mc-wave rect:nth-child(2n) { animation-delay: .2s; } .in .mc-wave rect:nth-child(3n) { animation-delay: .4s; }
@keyframes mcWv { to { transform: scaleY(.35); } }
.in .mc-rank { animation: mcFadeIn .6s 1.6s forwards, mcRank 3.4s steps(5, end) 2s forwards; }
@keyframes mcRank { to { transform: translateY(-170px); } }

/* 4. Service Finder: 추천 표시가 카드 사이를 옮겨 다닌다 */
.match-card { position: relative; }
.match-card::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius-lg); border: 2px solid transparent; pointer-events: none; transition: border-color .4s; }
.match-card.lit::before { border-color: #fdba74; }
.mc-pick { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) scale(0); background: var(--brand-accent); color: #fff; font-size: .72rem; font-weight: 800; padding: .2rem .7rem; border-radius: 9999px; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); z-index: 1; }
.match-card.lit .mc-pick { transform: translateX(-50%) scale(1); }

/* 5. 상담: 불씨 배경, 숨 쉬는 카카오 버튼 */
.mc-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mc-breathe { animation: mcBreathe 2.8s ease-in-out infinite; }
@keyframes mcBreathe { 50% { box-shadow: 0 0 0 12px rgba(254, 229, 0, .18), 0 8px 20px rgba(0, 0, 0, .2); } }

@media (prefers-reduced-motion: reduce) {
  .mc-rise { opacity: 1; translate: 0 0; transition: none; }
  .mc-draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .mc-pop, .mc-growx, .mc-growy { transform: none !important; animation: none !important; }
  .mc-fade, .mc-chip { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mc-stamp { transform: scale(1) rotate(-12deg) !important; animation: none !important; }
  .mc-sw-track { fill: #16a34a !important; } .mc-sw-knob { transform: translateX(32px) !important; }
  .mc-rank { opacity: 1 !important; transform: translateY(-170px) !important; }
  .mc-flow, .mc-spin, .mc-float, .mc-beat, .mc-ripple, .mc-playwave, .mc-cursor, .mc-tick, .mc-breathe, .mc-task, .mc-wave rect, .mc-sw-track, .mc-sw-knob, .mc-rank { animation: none !important; }
  .mc-embers { display: none; }
}

/* 좁은 화면: 장면이 작아져 아래 칩이 그림과 겹친다. 같은 내용이 히어로 아래 체크 항목에 있으니 칩은 숨긴다 */
@media (max-width: 767px) { .mc-motion .mc-cap { display: none; } }