/* 지페 · PB1 효과 공통 (회사소개 · 플랫폼 · 부가 서비스)
   움직임은 transform · opacity 중심. 'JS 없음'과 '동작 줄이기'는 최종 상태로 보입니다. */
@keyframes fxUp{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@keyframes fxLn{from{transform:translate3d(0,112%,0)}to{transform:none}}
@keyframes fxVis{from{opacity:0;transform:translate3d(0,28px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes fxShine{0%,62%{transform:translate3d(-260%,0,0) skewX(-18deg)}100%{transform:translate3d(360%,0,0) skewX(-18deg)}}

/* ── 히어로 입장: 줄마다 올라오고, 나머지는 차례로 ── */
.fx .fx-ln{display:block;overflow:clip;padding:.07em 0 .12em;margin:-.07em 0 -.12em}
.fx .fx-ln>span{display:block;animation:fxLn 1.05s var(--out) both;animation-delay:calc(.08s + var(--k,0)*.09s)}
.fx .pg-hero__txt>:not(.pg-hero__title){animation:fxUp .9s var(--out) both}
.fx .pg-hero__txt>:nth-child(2){animation-delay:.05s}
.fx .pg-hero__txt>:nth-child(4){animation-delay:.34s}
.fx .pg-hero__txt>:nth-child(5){animation-delay:.44s}
.fx .pg-hero__txt>:nth-child(n+6){animation-delay:.54s}
.fx .pg-hero__vis{animation:fxVis 1.1s var(--out) .2s both}

/* ── 차례로 나타나기 (끝나면 클래스가 떨어져 호버 전환이 돌아옴) ── */
.fx .fx-rv{opacity:0}
.fx .fx-rv.in{animation:fxUp .85s var(--out) var(--d,0s) both}

/* ── 포인터 스포트라이트 ── */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),var(--spot,rgba(30,77,216,.11)),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.fx-spot.is-hot::before,.fx-spot:focus-within::before{opacity:1}
.sec--night .fx-spot,.sec--navy .fx-spot{--spot:rgba(124,92,252,.28)}

/* ── 큰 버튼: 자석 ── */
.fx-mag{transform:translate3d(var(--tx,0px),var(--ty,0px),0);transition:transform .35s var(--out),background .2s,box-shadow .25s,color .2s}
.fx-mag:hover{transform:translate3d(var(--tx,0px),calc(var(--ty,0px) - 2px),0)}

/* ── 형광펜 긋기 ── */
.fx .fx-mk{background:linear-gradient(transparent 62%,var(--wave) 62%) no-repeat 0 0/0% 100%;transition:background-size 1s var(--out) .15s}
.fx .fx-mk.in{background-size:100% 100%}

/* ── 복사 버튼 공통 ── */
.fx-cp{display:inline-flex;align-items:center;gap:.4em;height:2.1em;padding:0 .85em;border:0;border-radius:999px;background:var(--mist);color:var(--ink2);font-size:13px;font-weight:800;line-height:1;cursor:pointer;transition:background .2s,color .2s,transform .3s var(--spring)}
.fx-cp:hover{background:var(--ink);color:#fff}
.fx-cp:active{transform:scale(.94)}
.fx-cp .ok{display:none}
.fx-cp.is-copied{background:#e3f5ec;color:#0d7a4d}
.fx-cp.is-copied .ok{display:inline-block;animation:fxPop .45s var(--spring)}
.fx-cp.is-copied .no{display:none}
@keyframes fxPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fx .fx-ln>span,.fx .pg-hero__txt>*,.fx .pg-hero__vis{animation:none}
  .fx .fx-rv{opacity:1}
  .fx .fx-mk{background-size:100% 100%;transition:none}
  .fx-mag{transition:none}
}
@media print{
  .fx .fx-rv{opacity:1!important;animation:none!important}
  .fx .fx-ln>span,.fx .pg-hero__txt>*,.fx .pg-hero__vis{animation:none}
  .fx .fx-mk{background-size:100% 100%}
}