/* ===== 3D Motion Layer — index.html + hairloss-program.html 전용 (통일 톤) ===== */
/* 다른 페이지에서는 이 파일을 링크하지 않으므로 영향 없음. */

/* (1) 스크롤 3D 등장: rotateX 리프트-인 — site.js가 붙이는 .is-in 재사용 */
.olp-reveal{transform:perspective(1200px) rotateX(7deg) translateY(30px);transform-origin:50% 100%;backface-visibility:hidden}
.olp-reveal.is-in{transform:perspective(1200px) rotateX(0deg) translateY(0)}

/* (2) 포인터 3D 틸트 (motion3d.js가 --rx/--ry 설정 + .is-tilting 토글) */
.m3d-tilt{transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .35s;transform-style:preserve-3d;backface-visibility:hidden}
.m3d-tilt.is-tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  box-shadow:0 34px 62px -22px rgba(49,35,22,.6)}

/* 모바일: 3D 회전 제거(부하 최소화, GPU 부담 방지) */
@media (max-width:768px){
  .olp-reveal{transform:translateY(20px)}
  .olp-reveal.is-in{transform:none}
  .m3d-tilt.is-tilting{transform:none}
}

/* prefers-reduced-motion: 모든 3D 모션 완전 해제 */
@media (prefers-reduced-motion:reduce){
  .olp-reveal,.olp-reveal.is-in{transform:none}
  .m3d-tilt,.m3d-tilt.is-tilting{transform:none;transition:none;box-shadow:none}
}