/* ============================================================
   HR MOTION KIT · motion.css
   whrcompany.com 에서 쓰는 모션·카드 효과만 따로 뽑은 스타일
   색은 아래 변수만 바꾸면 됩니다.
   ============================================================ */
:root{
  --mk-ease:cubic-bezier(.16,1,.3,1);
  --mk-accent:#7036f3;          /* 포인트 색 */
  --mk-accent2:#3456eb;         /* 그라데이션 두 번째 색 */
  --mk-ink:#1c1147;             /* 흰 카드 위 글자색 */
  --mk-card:linear-gradient(160deg,#9d7bf7,#7c55f0);   /* 뒤쪽 카드 색 */
  --mk-shadow:0 30px 50px -24px rgba(25,5,100,.55);
}

/* 1) 스크롤 등장  data-rv="up|zoom|blur|left|right|tilt"  + data-stagger=".1" */
.rv-js [data-rv]{transition:opacity .9s var(--mk-ease),transform 1s var(--mk-ease),filter .9s var(--mk-ease);transition-delay:var(--d,0s)}
.rv-js [data-rv]:not(.is-in){opacity:0}
.rv-js [data-rv="up"]:not(.is-in){transform:translateY(40px)}
.rv-js [data-rv="zoom"]:not(.is-in){transform:scale(.9)}
.rv-js [data-rv="blur"]:not(.is-in){filter:blur(14px);transform:translateY(16px)}
.rv-js [data-rv="left"]:not(.is-in){transform:translateX(-50px)}
.rv-js [data-rv="right"]:not(.is-in){transform:translateX(50px)}
.rv-js [data-rv="tilt"]:not(.is-in){transform:perspective(900px) rotateX(18deg) translateY(50px);transform-origin:50% 100%}
.rv-js [data-rv].rv-done{transition-delay:0s}

/* 2) 제목 단어별 등장  data-split */
.tw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.tw>span{display:inline-block;transition:transform 1s var(--mk-ease),opacity .8s var(--mk-ease);transition-delay:calc(var(--i)*60ms + var(--d,0s))}
.rv-js [data-split]:not(.is-in) .tw>span{transform:translateY(105%);opacity:0}

/* 3) 마우스 따라 기울기 data-tilt / 빛 번짐 .spot / 자석 버튼 data-magnet */
[data-tilt]{transition:transform .6s var(--mk-ease)}
[data-tilt].is-tilting{transition:transform .12s linear}
.spot{position:relative;--mx:50%;--my:0%}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--mk-ease);
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,255,255,.22),transparent 60%)}
.spot:hover::before{opacity:1}
[data-magnet]{transition:transform .5s var(--mk-ease)}

/* 4) 부채꼴 카드 .fan > .fan-card ×5 (가운데 3번째가 강조 카드) */
.fan{position:relative;height:clamp(300px,34vw,440px);display:flex;align-items:flex-end;justify-content:center;perspective:1200px;--g:clamp(56px,7.2vw,98px)}
.fan-card{position:absolute;bottom:0;width:clamp(150px,15vw,200px);aspect-ratio:8/11;border-radius:22px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--mk-card);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:var(--mk-shadow);
  transform-origin:50% 100%;transform:translate(0,40px) scale(.92);opacity:0;
  transition:transform .9s cubic-bezier(.34,1.3,.5,1),opacity .6s var(--mk-ease),box-shadow .4s var(--mk-ease)}
.fan-card:nth-child(3){background:#fff;color:var(--mk-ink);z-index:3}
.fan-card:nth-child(1),.fan-card:nth-child(5){z-index:1}
.fan-card:nth-child(2),.fan-card:nth-child(4){z-index:2}
.fan.is-in .fan-card{opacity:1}
.fan.is-in .fan-card:nth-child(1){transform:translate(calc(var(--g)*-2),10px) rotate(-24deg);transition-delay:.05s}
.fan.is-in .fan-card:nth-child(2){transform:translate(calc(var(--g)*-1),-6px) rotate(-12deg);transition-delay:.1s}
.fan.is-in .fan-card:nth-child(3){transform:translate(0,-14px) scale(1.05);transition-delay:.15s}
.fan.is-in .fan-card:nth-child(4){transform:translate(var(--g),-6px) rotate(12deg);transition-delay:.2s}
.fan.is-in .fan-card:nth-child(5){transform:translate(calc(var(--g)*2),10px) rotate(24deg);transition-delay:.25s}
@media (hover:hover){
  .fan.is-in:hover{--g:clamp(64px,8.4vw,118px)}
  .fan.is-in:hover .fan-card{transition-delay:0s;transition-duration:.6s}
  .fan.is-in .fan-card:nth-child(1):hover{transform:translate(calc(var(--g)*-2),-8px) rotate(-24deg)}
  .fan.is-in .fan-card:nth-child(2):hover{transform:translate(calc(var(--g)*-1),-26px) rotate(-12deg)}
  .fan.is-in .fan-card:nth-child(3):hover{transform:translate(0,-34px) scale(1.07)}
  .fan.is-in .fan-card:nth-child(4):hover{transform:translate(var(--g),-26px) rotate(12deg)}
  .fan.is-in .fan-card:nth-child(5):hover{transform:translate(calc(var(--g)*2),-8px) rotate(24deg)}
}
@media (max-width:420px){.fan{--g:44px}.fan-card{width:128px;padding:14px}}

/* 5) 3D 커버플로 .cflow > .cflow-track > .cf-card  + .cf-prev/.cf-next/.cf-dots */
.cflow{position:relative;height:clamp(360px,40vw,440px);perspective:1400px;touch-action:pan-y;user-select:none}
.cflow-track{position:absolute;inset:0;transform-style:preserve-3d}
.cf-card{position:absolute;left:50%;top:50%;width:clamp(240px,28vw,330px);min-height:clamp(280px,30vw,340px);padding:28px;border-radius:28px;display:flex;flex-direction:column;gap:14px;cursor:pointer;
  background:var(--mk-card);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:var(--mk-shadow);text-decoration:none;
  transform:translate(-50%,-50%) translateX(calc(var(--o)*62%)) translateZ(calc(var(--a)*-180px)) rotateY(calc(var(--o)*-34deg)) scale(calc(1 - var(--a)*.08));
  opacity:calc(1 - var(--a)*.28);z-index:calc(10 - var(--a));transition:transform .8s var(--mk-ease),opacity .6s var(--mk-ease),background .4s}
.cf-card.is-on{background:#fff;color:var(--mk-ink)}
.cflow-ui{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.cf-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s,transform .3s var(--mk-ease)}
.cf-btn:hover{background:rgba(255,255,255,.28)}.cf-btn:active{transform:scale(.92)}
.cf-dots{display:flex;gap:8px}
.cf-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.4);cursor:pointer;transition:width .4s var(--mk-ease),background .3s}
.cf-dots button.is-on{width:26px;background:#fff}

/* 6) 페이지 이동 원형 전환  (body 안에 <div class="pt"></div> 한 줄) */
.pt{position:fixed;inset:0;z-index:300;pointer-events:none;background:linear-gradient(125deg,var(--mk-accent),var(--mk-accent2));clip-path:circle(0 at var(--px,50%) var(--py,50%));transition:clip-path .55s cubic-bezier(.7,0,.3,1)}
.pt-out .pt{clip-path:circle(150% at var(--px,50%) var(--py,50%))}
.pt-in .pt{clip-path:circle(150% at 50% 50%);transition:none}
.pt-in.pt-go .pt{clip-path:circle(0 at 50% 50%);transition:clip-path .7s cubic-bezier(.7,0,.3,1)}

/* 성능: 화면 밖에서는 반복 애니메이션 정지, 모바일은 가볍게 */
.is-off,.is-off *{animation-play-state:paused!important}
@media (max-width:960px),(hover:none){
  .fan-card,.cf-card{box-shadow:none}
  [data-rv]{filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  .rv-js [data-rv]:not(.is-in){transform:none!important;filter:none!important}
  .tw>span{transition:opacity .6s}
  .rv-js [data-split]:not(.is-in) .tw>span{transform:none}
}

/* 7) 스크롤 진행선 (연혁 등)  .tl > .tl-prog  — 스크롤에 따라 --p 가 0→100% */
.tl{position:relative}
.tl-prog{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.tl-prog::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--p,0%);background:linear-gradient(var(--mk-accent),var(--mk-accent2))}