/* 명리결 storefront — 움직임.
   ──────────────────────────────────────────────────────────────────
   시선의 끝은 언제나 CTA 다. 배경이 버튼보다 화려하면 실패다.
   그래서 세기를 이 순서로 둔다 —

     1 결제 버튼   2 sticky CTA   3 잠긴 답
     4 고른 묶음   5 무료 결과    6 장식

   transform 과 opacity 만 쓴다. layout 을 흔들지 않는다.
   무거운 canvas·WebGL·애니메이션 라이브러리를 쓰지 않는다.
   ────────────────────────────────────────────────────────────────── */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.15);
}

/* ── 화면에 들어올 때만 올라온다 (scroll reveal) ── */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
  will-change: opacity, transform;
}
[data-rise].in { opacity: 1; transform: none; }
[data-rise].done { will-change: auto; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes sweep {
  from { background-position: 130% 0; }
  to   { background-position: -60% 0; }
}

/* ══════════════════════════════════ HERO — 차례로 선다 */
.hero h1.big, .hero .sub, .hero .wiz {
  animation: rise .5s var(--ease-out) both;
}
.hero h1.big { animation-delay: .05s; }
.hero .sub   { animation-delay: .16s; }
.hero .wiz   { animation-delay: .34s; }   /* 첫 입력이 가장 늦게, 또렷하게 */

/* 핵심 낱말에 한 번만 스치는 빛 */
h1.big em {
  background-image: linear-gradient(100deg,
      var(--gold) 0%, var(--gold) 38%, #fff3c4 50%,
      var(--gold) 62%, var(--gold) 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 1.15s var(--ease-out) .75s 1 both;
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -40% 0; }
}

/* ══════════════════════════════════ WIZARD — 앱처럼 넘어간다 */
.step.on { animation: step-in .26s var(--ease-out) both; }
.step.on.back { animation-name: step-in-back; }
@keyframes step-in {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes step-in-back {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.pbar i { transition: width .38s var(--ease-out); }

/* ══════════════════════════════════ ANALYSIS — 일부러 끌지 않는다 */
.steps li .s-name::before {
  content: "";
  display: inline-block; width: 12px; height: 12px; margin-right: 7px;
  border-radius: 50%; vertical-align: -1px;
  border: 2px solid #3a3350; border-top-color: var(--gold);
  animation: spin .7s linear infinite;
}
.steps li.done .s-name::before {
  content: "✓"; width: auto; height: auto; border: none;
  color: var(--ok); animation: none; margin-right: 5px; font-weight: 800;
}
.steps li.done { animation: step-glow .7s var(--ease-out) 1 both; }
@keyframes step-glow {
  0%   { background: #58c08a00; }
  35%  { background: #58c08a14; }
  100% { background: #58c08a00; }
}
.steps li.done .s-val { animation: rise .3s var(--ease-out) both; }

/* ══════════════════════════════════ 무료 결과 */
.free-card.in .openmark { animation: pop-in .34s var(--ease-spring) .12s both; }
/* 첫 굵은 문장만 아주 짧게. 계속 번쩍이지 않는다. */
.free-card.in p b:first-of-type {
  animation: emphasize 1s var(--ease-out) .3s 1 both;
}
@keyframes emphasize {
  0%   { color: #ddd7e8; }
  30%  { color: #fff0b8; }
  100% { color: var(--text); }
}
.tz.open .a { animation: pop-in .4s var(--ease-spring) both; }

/* ══════════════════════════════════ 잠긴 답 — 뒤에 진짜가 있다
   화면에 가장 가까운 한 장만 움직인다. 일곱 장이 동시에 움직이지 않는다. */
.lock-item.near .skel i { animation: skel-sweep 2.4s var(--ease-out) infinite; }
.lock-item.near .skel i:nth-child(2) { animation-delay: .12s; }
.lock-item.near .skel i:nth-child(3) { animation-delay: .24s; }
.lock-item.near .skel i:nth-child(4) { animation-delay: .36s; }
@keyframes skel-sweep {
  0%, 60%, 100% { background: linear-gradient(90deg, #3a3350, #262038); }
  25%           { background: linear-gradient(90deg, #4a4166, #2f2848); }
}
.lock-item.near h4 { animation: lock-bounce .6s var(--ease-spring) 1; }
@keyframes lock-bounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.lock-item.near::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              #ffffff12 50%, transparent 62%);
  background-size: 260% 100%;
  animation: sweep 2.6s var(--ease-out) 1;
}

/* ══════════════════════════════════ CTA — 가장 센 자리 */
.cta.mid, .sticky .cta, #pay { position: relative; overflow: hidden; }
.cta.mid::after, .sticky .cta::after, #pay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 41%,
              #ffffff55 50%, transparent 59%);
  background-size: 250% 100%; background-position: 130% 0;
}
/* 본문 CTA 는 화면에 들어올 때 한 번만 */
.cta.mid.in::after { animation: sweep 1.6s var(--ease-out) 1; }

/* sticky — 잠긴 내용을 충분히 본 뒤 한 번 부드럽게 알린다.
   버튼이 커졌다 작아졌다 하지 않는다. 그림자만 숨 쉰다. */
.sticky.nudge .cta { animation: nudge .7s var(--ease-spring) 1; }
@keyframes nudge {
  0%   { box-shadow: 0 8px 20px #c9a22733; }
  45%  { box-shadow: 0 10px 30px #c9a22788; }
  100% { box-shadow: 0 8px 20px #c9a22733; }
}
.sticky.nudge .cta::after { animation: sweep 1.5s var(--ease-out) 1; }
/* 그 뒤로는 드물게, 아주 약하게 */
.sticky.idle .cta::after { animation: sweep 1.4s var(--ease-out) 3.6s infinite; }
.sticky .p .now, .sum-row.total b { transition: color .22s ease; }
.sticky .p .now.bump, .sum-row.total b.bump { color: #fff0b8; }

/* 결제 버튼 — 화면에서 가장 눌러보고 싶은 것 */
#pay::after { animation: sweep 1.5s var(--ease-out) .6s infinite; }

/* ══════════════════════════════════ 상품 시트 */
.scrim { opacity: 0; transition: opacity .26s ease; }
.scrim.show { opacity: 1; }
.sheet.open { transition: transform .42s var(--ease-spring); }
.sheet.open .pack { animation: rise .4s var(--ease-out) both; }
.sheet.open .pack:nth-of-type(1) { animation-delay: .06s; }
.sheet.open .pack:nth-of-type(2) { animation-delay: .14s; }
.sheet.open .pack:nth-of-type(3) { animation-delay: .22s; }

.pack { transition: transform .22s var(--ease-spring),
                    border-color .22s ease, background .22s ease; }
.pack.sel { transform: scale(1.012); }
.pack.sel .pack-title::after {
  content: "✓"; color: var(--ok); margin-left: 7px;
  display: inline-block; animation: pop-in .3s var(--ease-spring) both;
}
/* 추천 배지 — 시트를 처음 열 때만 한 번 */
.sheet.open .pack-badge:not(.soonbadge) {
  animation: badge-glow 1.5s var(--ease-out) .35s 1;
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 #f0cf5e00; }
  40%      { box-shadow: 0 0 14px 2px #f0cf5e66; }
}

/* ══════════════════════════════════ 만드는 중 · 완료 */
.card.fulfil { transition: border-color .3s ease; }
.card.fulfil.completed .openmark { animation: pop-in .4s var(--ease-spring) both; }
.card.fulfil.completed .cta { animation: rise .42s var(--ease-out) .1s both; }
.progress i { transition: width .5s var(--ease-out); }

.tick { display: inline-block; width: 15px; height: 15px; margin-right: 6px;
        vertical-align: -2px; }
.tick path {
  stroke: var(--ok); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: draw .42s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.spark {
  position: fixed; left: 50%; top: 30%; width: 6px; height: 6px;
  border-radius: 50%; pointer-events: none; z-index: 95;
  animation: spark .9s ease-out forwards;
}
@keyframes spark {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); }
}

/* ══════════════════════════════════════════════════════════════════
   움직임을 원하지 않는 사람에게는 **전부 끈다.**
   기능·정보·CTA 는 그대로 남는다.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-rise] { opacity: 1 !important; transform: none !important; }
  h1.big em {
    background: none;
    -webkit-text-fill-color: var(--gold);
  }
  .spark { display: none !important; }
  .steps li .s-name::before {
    animation: none !important; border-top-color: #3a3350;
  }
  .pack.sel { transform: none; }
}