/* RTL 자동 반전본 — 원본: /en/assets/css/motion3d.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=63420d7503564d16aa10cb41badc8d0f */
/* ── motion3d — 3D 스크롤 리빌 · 포인터 틸트 · 히어로 뎁스 ──────────────
   motion.css(2D 리빌·리프트) 위에 얹는 층이다. 두 파일은 클래스가 겹치지
   않는다: 2D 는 .reveal / .reveal-stagger, 3D 는 .reveal-3d / .stagger-3d.
   한 요소에 둘 다 붙이지 말 것.

   숨기는 규칙은 전부 html.js3d 아래에만 둔다. motion3d.js 가 <html> 에
   js3d 를 달아야 작동하므로, 스크립트가 없거나 죽으면 글이 그냥 보인다.
   곡선·시간은 motion.css 와 같은 cubic-bezier(.16,1,.3,1) 계열로 맞춘다. */

/* ── 3D 스크롤 리빌 ──────────────────────────────────────────
   아래에서 올라오며 X축으로 눕혀진 상태를 편다. 원근 기준점을 밑변에 두면
   책장이 세워지듯 보이고, 가운데 두면 그냥 기울어 보인다. 밑변을 쓴다. */
.js3d .reveal-3d{
  opacity:0;
  transform:perspective(1200px) rotateX(11deg) translate3d(0,44px,0) scale(.972);
  transform-origin:50% 100%;
  will-change:opacity,transform;
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
}
.js3d .reveal-3d.revealed{
  opacity:1;
  transform:perspective(1200px) rotateX(0) translate3d(0,0,0) scale(1);
  will-change:auto;
}

/* 좌·우 블록은 바깥에서 문이 닫히듯 Y축으로 들어온다.
   기준점을 바깥 모서리에 둬야 안쪽으로 접히는 방향이 된다. */
.js3d .reveal-3d--left{
  transform:perspective(1200px) rotateY(-9deg) translate3d(40px,18px,0) scale(.975);
  transform-origin:100% 50%;
}
.js3d .reveal-3d--right{
  transform:perspective(1200px) rotateY(9deg) translate3d(-40px,18px,0) scale(.975);
  transform-origin:0% 50%;
}
.js3d .reveal-3d--left.revealed,
.js3d .reveal-3d--right.revealed{
  transform:perspective(1200px) rotateY(0) translate3d(0,0,0) scale(1);
}
/* 한 줄로 쌓이는 폭에서는 옆으로 밀린 상태가 화면 밖으로 나가 가로 스크롤을 만든다 — 아래에서 올라오게 */
@media (max-width:1023px){
  .js3d .reveal-3d--left:not(.revealed),
  .js3d .reveal-3d--right:not(.revealed){
    transform:perspective(1200px) rotateX(11deg) translate3d(0,44px,0) scale(.972);
    transform-origin:50% 100%;
  }
}

/* ── 3D 스태거 ───────────────────────────────────────────────
   motion.css 의 90ms 보다 한 단계 느린 110ms. 회전이 붙으면 같은 간격이
   더 촘촘해 보여서 늘린다. 8번째까지만 — 그 뒤는 기다리는 느낌이 난다. */
.js3d .stagger-3d > *{
  opacity:0;
  transform:perspective(1000px) rotateX(10deg) translate3d(0,32px,0) scale(.975);
  transform-origin:50% 100%;
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1);
}
.js3d .stagger-3d.revealed > *{
  opacity:1;
  transform:perspective(1000px) rotateX(0) translate3d(0,0,0) scale(1);
}
.js3d .stagger-3d.revealed > :nth-child(1){transition-delay:0s}
.js3d .stagger-3d.revealed > :nth-child(2){transition-delay:110ms}
.js3d .stagger-3d.revealed > :nth-child(3){transition-delay:220ms}
.js3d .stagger-3d.revealed > :nth-child(4){transition-delay:330ms}
.js3d .stagger-3d.revealed > :nth-child(5){transition-delay:440ms}
.js3d .stagger-3d.revealed > :nth-child(6){transition-delay:550ms}
.js3d .stagger-3d.revealed > :nth-child(7){transition-delay:660ms}
.js3d .stagger-3d.revealed > :nth-child(8){transition-delay:770ms}
.js3d .stagger-3d.revealed{will-change:auto}

/* 스태거 자식의 transform(특이도 0,3,0)이 .lift:hover(0,2,0)를 이겨서
   호버가 먹히지 않는다. motion.css 와 같은 이유·같은 처방. */
@media (hover:hover){
  .js3d .stagger-3d.revealed > .lift:hover,
  .js3d .stagger-3d.revealed > .lift:focus-visible{transform:translate3d(0,-6px,0)}
}

/* ── 포인터 틸트 ─────────────────────────────────────────────
   회전값은 motion3d.js 가 인라인으로 쓴다. 여기서는 되돌아올 때의 곡선과
   커서 광택만 맡는다. 최대 5도 — 그 이상은 의료 사이트에서 장난스러워진다. */
.js3d .tilt3d{
  position:relative;
  transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1);
}
/* 따라다니는 동안에는 곡선을 짧게 — 안 그러면 커서보다 반 박자 늦는다 */
.js3d .tilt3d.is-tilting{
  transition:transform .12s linear,box-shadow .4s ease;
  will-change:transform;
}
.js3d .tilt3d.is-tilting img,
.js3d .tilt3d.is-tilting .tilt3d-media{transition:transform .12s linear}
/* 인라인 transform 이 잡기 전 한 프레임 동안 .lift:hover 가 튀는 걸 막는다 */
@media (hover:hover){
  .js3d .lift.tilt3d:hover{transform:none}
}

/* 커서 광택 — 카드가 유리처럼 빛을 받는 느낌. --mx/--my 는 JS 가 쓴다.
   .card 와 .ratio 가 이미 overflow:hidden 이라 모서리 라운드로 잘린다. */
.js3d .tilt3d::after,
.js3d .sheen3d::after{
  content:'';position:absolute;inset:0;z-index:2;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(42% 58% at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.30),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 72%);
  opacity:0;transition:opacity .45s ease;
}
.js3d .tilt3d.is-tilting::after,
.js3d .sheen3d.is-tilting::after{opacity:1}
/* 캡션이 카드 밖(흰 바탕)에 있는 블록은 광택을 끈다 — 흰 위의 흰은 얼룩으로 보인다 */
.js3d .tilt3d--nosheen::after{display:none}

/* 광택만 (레일처럼 overflow 때문에 기울이면 잘리는 자리) */
.js3d .sheen3d{position:relative}
.js3d .sheen3d img{transition:transform .6s cubic-bezier(.16,1,.3,1)}

/* ── 히어로 뎁스 ─────────────────────────────────────────────
   transform 은 JS 가 쓴다. 영상 레이어는 scale 로 여유를 먼저 만들어 두고
   그 안에서만 움직여야 위아래에 빈 줄이 안 생긴다(계수는 JS 쪽 주석 참고). */
.js3d [data-par]{will-change:transform}

/* ── 모션 최소화 ─────────────────────────────────────────────
   base.css 가 transition 을 0.01ms 로 줄여도 .revealed 가 붙기 전까지는
   opacity:0 인 채다. 3D 는 전정기관을 특히 건드리므로 통째로 끈다. */
@media (prefers-reduced-motion:reduce){
  .js3d .reveal-3d,
  .js3d .stagger-3d > *{opacity:1!important;transform:none!important;transition:none!important}
  .js3d .tilt3d,.js3d .sheen3d{transform:none!important;transition:none!important}
  .js3d .tilt3d img,.js3d .sheen3d img{transform:none!important;transition:none!important}
  .js3d .tilt3d::after,.js3d .sheen3d::after{display:none!important}
  .js3d [data-par]{transform:none!important;opacity:1!important}
}