/* 제이원시스템 사이트 전체 움직임 (메인 + 하위 페이지) — 순수 CSS (빌드 불필요)
   원칙: transform·opacity만 움직인다 / 처음부터 숨기지 않는다(JS가 붙인 .rv-on 아래에서만 등장 대기)
         / prefers-reduced-motion 이면 전부 끈다 / 모바일은 강도를 줄인다 */
:root { --mo-rise: 28px; --mo-rv: 28px; --mo-kb: 1.06; --mo-lift: -4px; }
@media (max-width: 760px) { :root { --mo-rise: 14px; --mo-rv: 14px; --mo-kb: 1.03; } }

/* 1. 첫 화면 — 배경 사진 느린 줌인(켄번스, 한 번), 문구는 한 줄씩 아래에서 떠오름, 버튼은 마지막 */
@keyframes mo-kb { from { transform: scale(1); } to { transform: scale(var(--mo-kb)); } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(var(--mo-rise)); } to { opacity: 1; transform: none; } }
.hero .hero__bg img { transform-origin: 70% 50%; animation: mo-kb 22s cubic-bezier(.25,.1,.25,1) both; will-change: transform; }
.hero .hero__kicker,
.hero h1 .mo-ln,
.hero .hero__lead,
.hero .path,
.hero .hero__hours,
.hero .hero__facts .tb li { animation: mo-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 .mo-ln { display: inline-block; }
.hero .hero__kicker { animation-delay: .10s; }
.hero h1 .mo-ln:nth-of-type(1) { animation-delay: .22s; }
.hero h1 .mo-ln:nth-of-type(2) { animation-delay: .36s; }
.hero .hero__lead { animation-delay: .52s; }
.hero .hero__hours { animation-delay: 1.00s; }
.hero .path--urgent { animation-delay: .70s; }
.hero .path--plan { animation-delay: .84s; }
.hero .hero__facts .tb li:nth-child(1) { animation-delay: 1.10s; }
.hero .hero__facts .tb li:nth-child(2) { animation-delay: 1.18s; }
.hero .hero__facts .tb li:nth-child(3) { animation-delay: 1.26s; }
.hero .hero__facts .tb li:nth-child(4) { animation-delay: 1.34s; }


/* 1-2. 하위 페이지 첫 화면(PageHero) — 배경 느린 줌인, 경로·제목·설명·버튼 순서로 등장 */
.ph .ph__bg img { transform-origin: 60% 50%; animation: mo-kb 22s cubic-bezier(.25,.1,.25,1) both; will-change: transform; }
.ph .ph__in > * { animation: mo-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.ph .ph__in > :nth-child(1) { animation-delay: .08s; }
.ph .ph__in > :nth-child(2) { animation-delay: .18s; }
.ph .ph__in > :nth-child(3) { animation-delay: .32s; }
.ph .ph__in > :nth-child(4) { animation-delay: .48s; }
.ph .ph__in > :nth-child(5) { animation-delay: .60s; }

/* 2. 스크롤 등장 — .rv-on(JS 정상 동작 시)일 때만 대기 상태, 화면에 들어오면 .is-in */
.rv { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--rv-i, 0) * .1s); }
.rv-on .rv:not(.is-in) { opacity: 0; transform: translateY(var(--mo-rv)); }

/* 3. 카드 — 마우스를 올리면 살짝 떠오르고 그림자 (마우스가 있는 기기에서만) */
@media (hover: hover) and (pointer: fine) {
  .svc__row, .sym a, .ind__tile, .areas__tile, .tile, .others a, .cc { transition: transform .25s ease, box-shadow .25s ease; }
  .svc__row { background: #fff; }
  .svc__row:hover { transform: translateY(var(--mo-lift)); box-shadow: 0 14px 30px -12px rgba(14,23,41,.22); }
  .sym a:hover, .others a:hover, .cc:hover { transform: translateY(var(--mo-lift)); box-shadow: 0 14px 28px -14px rgba(14,23,41,.28); }
  .ind__tile:hover, .areas__tile:hover, .tile:hover { transform: translateY(var(--mo-lift)); box-shadow: 0 18px 36px -16px rgba(14,23,41,.45); }
  .svc__row:hover .svc__img img { transform: scale(1.05); }
}

/* 4. 헤더 — 스크롤하면 얇아지고 완전 불투명 (높이는 그대로 두고 위치만 이동 → 레이아웃 흔들림 없음) */
.hd, .hd__in, .hd__logo { transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
.hd-compact body:not(.nav-open) .hd { transform: translateY(-10px); background: #fff; box-shadow: 0 6px 20px -12px rgba(14,23,41,.35); }
.hd-compact body:not(.nav-open) .hd__in { transform: translateY(5px); }
.hd-compact body:not(.nav-open) .hd__logo { transform: scale(.9); transform-origin: left center; }
.subnav { transition: transform .3s ease; }
.hd-compact body:not(.nav-open) .subnav { transform: translateY(-10px); }
@media (max-width: 960px) {
  .hd-compact body:not(.nav-open) .subnav { transform: translateY(-6px); }
  .hd-compact body:not(.nav-open) .hd { transform: translateY(-6px); }
  .hd-compact body:not(.nav-open) .hd__in { transform: translateY(3px); }
}

/* 5. 문의 버튼 — 은은한 맥박 3번만 */
@keyframes mo-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
.cta .btn--light, .mcb__btn--tel { position: relative; }
.mo-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px currentColor; pointer-events: none; opacity: 0; animation: mo-ring 1.6s ease-out 3; }
.cta .btn--light.mo-pulse::after { box-shadow: 0 0 0 2px #fff; }
.mcb__btn--tel.mo-pulse::after { box-shadow: 0 0 0 2px var(--c-primary); }

/* 움직임 줄이기 설정 — 전부 끔 */
@media (prefers-reduced-motion: reduce) {
  .ph .ph__bg img, .ph .ph__in > *, .subnav, .hd-compact body:not(.nav-open) .subnav,
  .hero .hero__bg img, .hero .hero__kicker, .hero h1 .mo-ln, .hero .hero__lead, .hero .path, .hero .hero__hours, .hero .hero__facts .tb li { animation: none !important; }
  .rv, .rv-on .rv:not(.is-in) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc__row:hover, .sym a:hover, .ind__tile:hover, .areas__tile:hover, .tile:hover, .others a:hover, .cc:hover,
  .hd-compact body:not(.nav-open) .hd, .hd-compact body:not(.nav-open) .hd__in, .hd-compact body:not(.nav-open) .hd__logo, .hd-compact body:not(.nav-open) .subnav { transform: none !important; }
  .mo-pulse::after { animation: none !important; }
}