/* 25판 모션 (Awwwards·Land-book 조사 반영, 2026-10-27 PSPD 결정)
   1. 첫 화면 인트로 — 히어로 사진이 크게·흐리게 시작해 제 크기로 줌 아웃 (Forge Automotive, 26판: 장인 사진)
   2. 섹션 도착 — 제목은 단어마다 흐림→선명, 설명은 단어마다 회색→진하게 차오름 (Forge · 60fps · WRK)
      휠 한 번 = 한 섹션이라 스크롤 양이 아니라 「도착」 순간 시간에 맞춰 재생
   3. 커서 반사광 + 사진 기울기 — 커서 자리에 금속 빛이 따라오고 사진이 커서 쪽으로 몇 도 기운다 (Forge Pointlight Fake 3D)
   4. 02 제조 — 분해 사진에서 딴 윤곽선(도면)이 먼저 그려지고(26판), 그 위로 실사가 훑고 지나가며 채워진다 (WRK)
   5. 03 손목시계 — 원본 정면·측면·뒷면 3컷을 세로축으로 넘겨 도는 것처럼 (자동, 끌기, 버튼)
   움직임 줄이기 사용자는 전부 최종 모습으로 바로 보인다 */

/* ── 2. 단어 ── fx.js 가 제목·설명을 단어(.w)로 나눈다. .rp.on 은 rotary.js 가 「도착」 때 붙임 */
.rp .w { display: inline-block; }
html.fx .rp h1 .w, html.fx .rp h2 .w {
  opacity: 0; filter: blur(calc(12 * var(--u))); transform: translateY(0.18em);
  transition: opacity .7s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}
html.fx .rp.on h1 .w, html.fx .rp.on h2 .w { opacity: 1; filter: blur(0); transform: none; }
html.fx .rp .lead .w { color: var(--line-2); transition: color .5s linear; transition-delay: calc(var(--i, 0) * 45ms + 420ms); }
html.fx .rp.on .lead .w { color: var(--fg-2); }
/* 인트로 동안엔 사진 줌이 거의 끝난 뒤에 글이 들어온다 */
html.intro .rp h1 .w { transition-delay: calc(var(--i, 0) * 90ms + 900ms); }
html.intro .rp .lead .w { transition-delay: calc(var(--i, 0) * 45ms + 1300ms); }

/* ── 3. 커서 반사광 ── 배경(.metal) 바로 위, 무대(multiply) 아래 — 사진의 흰 바탕과 금속 부분에 빛이 비친다 */
.lamp { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .8s; }
html.lit .lamp { opacity: 1; }
.lamp b {
  position: absolute; left: 0; top: 0; width: 70vmax; height: 46vmax; margin: -23vmax 0 0 -35vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(var(--lx, 50vw), var(--ly, 50vh), 0) rotate(-18deg); will-change: transform;
}
/* 사진 기울기: 24판의 섹션 3D 기울기(--d × --tilt)에 커서 몫(--px, --py)을 더한다 */
.rp .shot.lag {
  transform: translateY(calc(var(--d, 0) * var(--k, 0) * -24px)) perspective(calc(1200 * var(--u)))
    rotateX(var(--py, 0deg)) rotateY(calc(var(--d, 0) * var(--tilt, 25deg) + var(--px, 0deg)))
    scale(calc(1 - var(--ad, 0) * 0.42));
}

/* ── 4. 02 선화 → 실사 ── 두 장을 겹치고(.sk 윤곽선 / .real 실사) 마스크 경계를 위→아래로 옮긴다 */
.shot.draw .cr > span { position: absolute; inset: 0; display: block; }
/* 36판: 선화는 미리 구운 그림(img/mf-line.webp), 경계는 clip-path 로 위→아래 — 예전 실시간 SVG 필터 + 마스크 위치 애니메이션은 매 프레임 다시 그려 폰에서 무거웠다 */
.shot.draw .cr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html.fx .shot.draw .sk, html.fx .shot.draw .real { clip-path: inset(0 0 100% 0); }
html.fx .rp.on .shot.draw .sk { animation: rv 1.3s cubic-bezier(.45, 0, .2, 1) .35s forwards; }
html.fx .rp.on .shot.draw .real { animation: rv 1.4s cubic-bezier(.45, 0, .2, 1) 2.05s forwards; }
@keyframes rv { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* 실사가 훑고 지나가는 자리의 가는 빛줄(가공 스캔 느낌) */
.shot.draw .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 30%, rgba(255, 255, 255, .95) 70%, transparent); box-shadow: 0 0 calc(14 * var(--u)) calc(3 * var(--u)) rgba(255, 255, 255, .7); mix-blend-mode: screen; }
html.fx .rp.on .shot.draw .scan { animation: scan 1.4s cubic-bezier(.45, 0, .2, 1) 2.05s forwards; }
@keyframes scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* 지금 무엇을 보는지 — 도면 / 완성품 */
.shot .cap { display: flex; justify-content: center; gap: var(--sp-12); margin-top: var(--sp-12); font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); letter-spacing: .04em; }
html.fx .rp.on .shot.draw .cap .a { animation: capa 2.6s linear .35s forwards; }
html.fx .rp.on .shot.draw .cap .b { animation: capb .4s linear 2.9s forwards; }
@keyframes capa { 0%, 95% { color: var(--fg); } 100% { color: var(--muted); } }
@keyframes capb { to { color: var(--fg); } }
.shot.draw .cap i { font-style: normal; color: var(--line-2); }

/* ── 5. 03 3컷 회전 ── */
.shot.turn .cr { perspective: calc(900 * var(--u)); touch-action: pan-y; cursor: grab; }
.shot.turn .cr:active { cursor: grabbing; }
.shot.turn .v { position: absolute; inset: 0; display: block; backface-visibility: hidden; }
.shot.turn .v:not(.cur) { opacity: 0; }
.shot.turn .cap button {
  font: inherit; color: inherit; background: none; border: 0; padding: var(--sp-8) var(--sp-4); min-height: calc(32 * var(--u)); cursor: pointer;
  border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.shot.turn .cap button:hover { color: var(--fg-2); }
.shot.turn .cap button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.shot.turn .cap button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
/* 캡션은 원형 흐림 마스크 밖에 있어야 보인다 — .shot 의 마스크를 사진(.cr)으로 옮김 */
.rp .shot.draw, .rp .shot.turn { -webkit-mask-image: none; mask-image: none; }
.rp .shot.draw .cr, .rp .shot.turn .cr {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 72%, transparent 100%);
}
@media (max-width: 1023px) { .shot .cap { margin-top: var(--sp-4); } }

@media (prefers-reduced-motion: reduce) {
  html.fx .rp h1 .w, html.fx .rp h2 .w { opacity: 1; filter: none; transform: none; transition: none; }
  html.fx .rp .lead .w { color: var(--fg-2); transition: none; }
  html.fx .shot.draw .sk { clip-path: none; opacity: 0; }
  html.fx .shot.draw .real { clip-path: none; }
  html.fx .rp.on .shot.draw .sk, html.fx .rp.on .shot.draw .real, html.fx .rp.on .shot.draw .scan { animation: none; }
  .lamp { display: none; }
  html.fx .shot.draw .cap .b { color: var(--fg); }
  html.fx .rp.on .shot.draw .cap .a, html.fx .rp.on .shot.draw .cap .b { animation: none; }
}