/* =================================================================
   큐닷 - STEP 인트로 애니메이션 + 성과/CTA 그래프
   (다크+블루 / 세련·절제 톤 / 처음 한 번만 재생)
   - 오버레이 DOM·그래프 SVG 는 js/animations.js 가 생성
   - JS 동작 시에만 이미지를 초기 숨김(html.js-anim) → JS 실패 시 정상 노출
   ================================================================= */

/* ----- STEP 이미지 reveal ----- */
html.js-anim .step-img { position: relative; }
html.js-anim .step-img img { opacity: 0; transform: scale(.985); transition: opacity .6s ease, transform .6s ease; }
html.js-anim .step-img.revealed img { opacity: 1; transform: none; }

/* ----- 오버레이 공통 ----- */
.step-anim {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 30px;
  border-radius: 20px;
  background: radial-gradient(120% 100% at 50% 0%, #0e1730 0%, #070a14 62%);
  border: 1px solid rgba(63, 110, 255, 0.2);
  transition: opacity .55s ease;
}
.step-anim.done { opacity: 0; pointer-events: none; }
.sa-label { font-size: 14px; font-weight: 600; letter-spacing: -0.3px; color: #cdd6ff; text-align: center; line-height: 1.5; }
.sa-dots::after { content: ''; animation: sa-dots 1.4s steps(4, end) infinite; }
@keyframes sa-dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } 100% { content: ''; } }

.sa-check { color: #4d7bff; font-weight: 800; }

/* progress bar */
.sa-progress { width: 64%; max-width: 280px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; }
.sa-progress > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2e69ff, #00adfc); transition: width 1.5s cubic-bezier(.4,.1,.2,1); }
.step-anim.run .sa-progress > i { width: 100%; }

/* =========== STEP 1 : 상품 비교 스캔 =========== */
.sa1-chips { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 78%; max-width: 360px; }
.sa1-chip {
  position: relative; aspect-ratio: 3/4; border-radius: 12px;
  background: linear-gradient(180deg, #131a2e, #0c1120); border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: flex-end; padding: 8px; opacity: .55; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease, border-color .4s ease;
}
.sa1-chip::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; height: 42%; border-radius: 8px; background: rgba(255,255,255,0.06); }
.sa1-chip::after { content: ''; height: 7px; width: 60%; border-radius: 4px; background: rgba(255,255,255,0.12); }
.sa1-chip.on { opacity: 1; transform: none; border-color: rgba(63,110,255,0.55); box-shadow: 0 0 0 1px rgba(63,110,255,0.25), 0 8px 26px rgba(0,40,150,0.35); }
.sa1-chip .sa1-tick { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #0046fd; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s ease; }
.sa1-chip.on .sa1-tick { opacity: 1; transform: none; }
.sa1-scan { position: absolute; top: 0; bottom: 0; width: 38%; pointer-events: none; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(46,105,255,0.28), rgba(0,173,252,0.12), transparent);
}
.step-anim.run .sa1-scan { animation: sa1-scan 1.5s cubic-bezier(.45,.05,.3,1) 1 forwards; }
@keyframes sa1-scan { from { left: -40%; } to { left: 100%; } }

/* =========== STEP 2 : 큐레이터 레이더 =========== */
.sa2-radar { position: relative; width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,105,255,0.10), transparent 70%);
  border: 1px solid rgba(63,110,255,0.18); display: flex; align-items: center; justify-content: center; }
.sa2-radar::before, .sa2-radar::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); }
.sa2-radar::before { width: 66%; height: 66%; }
.sa2-radar::after { width: 33%; height: 33%; }
.sa2-sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(46,105,255,0.42), rgba(46,105,255,0) 75%); opacity: 0; }
.step-anim.run .sa2-sweep { opacity: 1; animation: sa2-sweep 1.5s linear 1; }
@keyframes sa2-sweep { to { transform: rotate(360deg); } }
.sa2-avatar { position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #25304e, #161d33);
  border: 1px solid rgba(255,255,255,0.12); opacity: .45; transition: opacity .4s ease, transform .4s ease, box-shadow .4s ease; }
.step-anim.run .sa2-avatar { animation: sa2-pulse 1.4s ease 1; }
.sa2-avatar.matched { opacity: 1; transform: scale(1.18);
  background: linear-gradient(180deg, #2e69ff, #0046fd); border-color: #7aa0ff;
  box-shadow: 0 0 0 4px rgba(46,105,255,0.22), 0 6px 18px rgba(0,40,160,0.5); }
.sa2-avatar.matched::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; font-weight: 800; }
@keyframes sa2-pulse { 0%,100% { opacity: .4; } 50% { opacity: .85; } }

/* =========== STEP 3 : 분석 결과 가이드 전달 =========== */
.sa3-flow { position: relative; display: flex; align-items: center; justify-content: space-between; width: 84%; max-width: 380px; }
.sa3-doc { width: 132px; padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #121a2e, #0c1120); border: 1px solid rgba(255,255,255,0.1); }
.sa3-doc .ln { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); margin-bottom: 7px; }
.sa3-doc .ln.s { width: 60%; }
.sa3-path { position: relative; flex: 1; height: 2px; margin: 0 12px; background-image: linear-gradient(90deg, rgba(255,255,255,0.22) 0 6px, transparent 6px 12px); background-size: 12px 2px; }
.sa3-packet { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; border-radius: 6px;
  background: linear-gradient(180deg, #2e69ff, #0046fd); box-shadow: 0 4px 14px rgba(0,50,180,0.6); opacity: 0; }
.step-anim.run .sa3-packet { animation: sa3-packet 1.4s cubic-bezier(.5,0,.3,1) 1 forwards; }
@keyframes sa3-packet { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.sa3-curator { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(180deg, #25304e, #161d33); border: 1px solid rgba(255,255,255,0.14); transition: box-shadow .4s ease, border-color .4s ease; }
.sa3-curator .sa3-ok { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #0046fd; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .3s ease; }
.sa3-curator.got { border-color: #7aa0ff; box-shadow: 0 0 0 4px rgba(46,105,255,0.18); }
.sa3-curator.got .sa3-ok { opacity: 1; transform: none; }

/* =========== STEP 4 : CRM 수만 명 발송 =========== */
.sa4-stage { position: relative; width: 240px; height: 200px; display: flex; align-items: center; justify-content: center; }
.sa4-core { position: relative; z-index: 3; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(180deg, #2e69ff, #0046fd); display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 8px 26px rgba(0,50,180,0.6); }
.sa4-ripple { position: absolute; z-index: 1; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(46,105,255,0.55); opacity: 0; }
.step-anim.run .sa4-ripple { animation: sa4-ripple 1.8s ease-out infinite; }
.step-anim.run .sa4-ripple:nth-child(2) { animation-delay: .45s; }
.step-anim.run .sa4-ripple:nth-child(3) { animation-delay: .9s; }
@keyframes sa4-ripple { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }
.sa4-mom { position: absolute; z-index: 2; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(180deg, #25304e, #161d33); border: 1px solid rgba(255,255,255,0.12); opacity: .25; transition: opacity .5s ease, box-shadow .5s ease, background .5s ease; }
.sa4-mom.lit { opacity: 1; background: linear-gradient(180deg, #3a7bff, #1556e6); box-shadow: 0 0 0 3px rgba(46,105,255,0.18); }
.sa4-counter { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: #eaf0ff; }
.sa4-counter b { font-family: var(--font-num); color: #4d7bff; font-size: 18px; }

/* =================================================================
   Performance — 우상향 성장 그래프
   ================================================================= */
.perf-graph {
  margin: 0 0 22px; padding: 26px 26px 18px;
  border-radius: 18px; border: 1px solid var(--card-border);
  background: linear-gradient(180deg, #0a0e1c, #080a12);
  position: relative; overflow: hidden;
}
.perf-graph .pg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.perf-graph .pg-title { font-size: 14px; font-weight: 600; letter-spacing: -0.3px; color: #aeb6cc; }
.perf-graph .pg-badge { font-size: 13px; font-weight: 700; color: #4d7bff; display: inline-flex; align-items: center; gap: 4px; }
.perf-graph svg { display: block; width: 100%; height: auto; }
.perf-graph .pg-grid line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.perf-graph .pg-area { opacity: 0; transition: opacity 1s ease .3s; }
.perf-graph.drawn .pg-area { opacity: 1; }
.perf-graph .pg-line { fill: none; stroke: url(#pgStroke); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 10px rgba(0,70,253,0.5)); }
.perf-graph .pg-dot { opacity: 0; transition: opacity .4s ease .9s; }
.perf-graph.drawn .pg-dot { opacity: 1; }
.perf-graph .pg-dot circle.core { fill: #fff; }
.perf-graph .pg-dot circle.halo { fill: rgba(46,105,255,0.25); }

/* =================================================================
   최종 CTA — 매출↑ / 리소스↓ 듀얼 라인 (대형 배경 그래프)
   ================================================================= */
.cta-graph { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.cta-graph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cta-graph .cg-grid line { stroke: rgba(255,255,255,0.045); stroke-width: 1; }
.cta-graph .cg-line { fill: none; stroke-linecap: round; }
.cta-graph .cg-up { stroke: url(#cgStroke); stroke-width: 4.5; filter: drop-shadow(0 6px 18px rgba(0,70,253,0.6)); }
.cta-graph .cg-down { stroke: rgba(255,255,255,0.30); stroke-width: 3; stroke-dasharray: 5 7; }
.cta-graph .cg-area { opacity: 0; transition: opacity 1s ease .3s; }
.cta-graph.drawn .cg-area { opacity: 1; }
.cta-graph .cg-tag { font-size: 15px; font-weight: 700; letter-spacing: -0.4px; opacity: 0; transition: opacity .5s ease .9s; }
.cta-graph.drawn .cg-tag { opacity: 1; }
.cta-graph .cg-tag.up { fill: #8fb4ff; }
.cta-graph .cg-tag.down { fill: #99a0b2; }
.cta-graph .cg-dot { opacity: 0; transition: opacity .4s ease .85s; }
.cta-graph.drawn .cg-dot { opacity: 1; }

/* =================================================================
   반응형
   ================================================================= */
@media (max-width: 980px) {
  .step-anim { gap: 18px; padding: 22px; }
  .sa2-radar { width: 170px; height: 170px; }
  .sa4-stage { width: 200px; height: 170px; }
}
@media (max-width: 680px) {
  .sa1-chips { width: 86%; gap: 12px; }
  .sa2-radar { width: 150px; height: 150px; }
  .sa-label { font-size: 13px; }
  .perf-graph { padding: 20px 16px 14px; }
  /* 모바일은 박스가 세로형이라 우측 끝 라벨/도트가 잘림 → 라벨 숨김(라인은 배경으로 유지) */
  .cta-graph .cg-tag { display: none; }
}

/* =================================================================
   prefers-reduced-motion : 애니메이션 없이 즉시 최종 상태
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .step-img img { opacity: 1; transform: none; transition: none; }
  .step-anim { display: none !important; }
  .perf-graph .pg-area, .perf-graph .pg-dot, .cta-graph .cg-area, .cta-graph .cg-tag, .cta-graph .cg-dot { opacity: 1 !important; transition: none !important; }
}