/*
 * fx 모션 — 줄 리빌·점등·카운트업·헤더 응축·CTA 맥동. transform·opacity 만 움직인다.
 * 숨김 시작 상태는 html.fx-js(서버가 head 에 붙이는 한 줄 스크립트)일 때만 — JS 가 죽어도 내용은 보인다.
 * reduced-motion 이면 전부 최종 상태.
 */

/* ===== 줄 단위 마스크 리빌: <span class="fx-ln"><span class="fx-ln__in">문장</span></span> ===== */
.fx-ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.fx-ln__in{display:block}
.fx-js [data-fx-reveal] .fx-ln__in{transform:translateY(108%)}
.fx-js [data-fx-reveal].is-in .fx-ln__in{
  transform:none;
  transition:transform .9s var(--fx-ease-out);
  transition-delay:calc(var(--fx-i,0) * .15s);
}
.fx-js [data-fx-reveal] .fx-ln:nth-child(2) .fx-ln__in{--fx-i:1}
.fx-js [data-fx-reveal] .fx-ln:nth-child(3) .fx-ln__in{--fx-i:2}
.fx-js [data-fx-reveal] .fx-ln:nth-child(4) .fx-ln__in{--fx-i:3}

/* ===== 블록 리빌: <div data-fx-reveal class="fx-rv"> ===== */
.fx-js .fx-rv{opacity:0;transform:translateY(28px)}
.fx-js .fx-rv.is-in{opacity:1;transform:none;transition:opacity var(--fx-time-reveal) var(--fx-ease-out),transform var(--fx-time-reveal) var(--fx-ease-out)}
.fx-js .fx-rv--late.is-in{transition-delay:.2s}

/* ===== 로드 시퀀스: 부제·버튼 등 ===== */
.fx-js .fx-rise{opacity:0;transform:translateY(16px)}
.fx-js .fx-rise.is-in{opacity:1;transform:none;transition:opacity .7s var(--fx-ease-out),transform .7s var(--fx-ease-out);transition-delay:var(--fx-delay,0s)}

/* ===== 점등: <div data-fx-lit><span class="fx-lit">…</span>…</div>, 마지막 줄은 fx-lit--last ===== */
.fx-lit{display:block;opacity:.4;transition:opacity var(--fx-time-slow) var(--fx-ease-std)}
.fx-lit.is-lit{opacity:1}
.fx-lit+.fx-lit{margin-top:.12em}
[data-fx-surface="dark"] .fx-lit--last{color:var(--fx-brand)}
.fx-rail{position:relative;border-radius:3px;background:var(--fx-s3);width:6px}
.fx-rail__fill{position:absolute;inset:0;border-radius:inherit;background:var(--fx-brand);transform:scaleY(0);transform-origin:top;transition:transform var(--fx-time-slow) var(--fx-ease-std)}

/* ===== 헤더 응축 (마크업은 헤더 담당 갈래) ===== */
.fx-hdr{position:fixed;top:12px;left:0;right:0;z-index:60;padding:0 var(--fx-gut)}
.fx-hdr__pill{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);
  max-width:var(--fx-wrap-w);min-height:64px;margin:0 auto;padding:0 10px 0 22px;border-radius:var(--fx-radius-pill);
  box-shadow:inset 0 0 0 1px var(--fx-edge-ink);
  transition:max-width .5s var(--fx-ease-out),min-height .5s var(--fx-ease-out);
}
.fx-hdr__pill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgba(17,17,19,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--fx-shadow-s),inset 0 0 0 1px var(--fx-edge-ink-strong);
  opacity:0;transition:opacity .35s var(--fx-ease-std);
}
.fx-hdr__pill>*{position:relative}
.fx-hdr.is-scrolled .fx-hdr__pill::before{opacity:1}
.fx-hdr.is-scrolled .fx-hdr__pill{max-width:880px;min-height:56px}

/* ===== 마지막 CTA: 줄이 올라온 뒤 버튼 한 번 맥동 ===== */
.fx-js .fx-cta .fx-ln__in{transform:translateY(108%)}
.fx-js .fx-cta.is-in .fx-ln__in{transform:none;transition:transform .9s var(--fx-ease-out)}
.fx-js .fx-cta.is-in .fx-ln:nth-child(2) .fx-ln__in{transition-delay:.15s}
.fx-js .fx-cta.is-in .fx-ln:nth-child(3) .fx-ln__in{transition-delay:.3s}
.fx-cta.is-in .fx-button--pulse{animation:fx-pulse 1.1s var(--fx-ease-std) 1.1s 1}
.fx-cta.is-in .fx-button--pulse::after{animation:fx-glow 1.1s var(--fx-ease-std) 1.1s 1}
@keyframes fx-pulse{40%{transform:scale(1.07)}}
@keyframes fx-glow{40%{opacity:1}}

/* ===== reduced motion: 최종 상태 ===== */
@media (prefers-reduced-motion:reduce){
  .fx-js [data-fx-reveal] .fx-ln__in,
  .fx-js .fx-cta .fx-ln__in,
  .fx-js .fx-rv,
  .fx-js .fx-rise{opacity:1;transform:none;transition:none}
  .fx-lit{opacity:1;transition:none}
  .fx-rail__fill{transform:scaleY(1);transition:none}
  .fx-hdr__pill,.fx-hdr__pill::before{transition:none}
  .fx-cta.is-in .fx-button--pulse,.fx-cta.is-in .fx-button--pulse::after{animation:none}
}