/* =========================================================
   움직임 (모든 페이지)
   글: 큰 제목은 한 줄씩, 영문 큰 제목은 한 글자씩 아래에서 올라옴.
   사진: 아래에서 열리며 확대가 풀림.  선: 왼쪽에서 그어짐.
   시간·곡선·시작 지점은 모두 tokens.css. 한 번만 재생합니다.
   .rl-motion = 스크립트가 준비됐을 때만 붙음 (스크립트가 없으면 모두 그냥 보임)
   ========================================================= */

/* 줄·글자 마스크 (스크립트가 글을 감싸는 태그) */
rl-l { display: inline-block; vertical-align: top; overflow: hidden; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
rl-i, rl-c { display: inline-block; }
rl-w { display: inline-block; white-space: nowrap; }   /* 한 단어는 한 줄에 */
rl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 한 줄씩 / 한 글자씩 */
.rl-motion #app [data-rl="lines"][data-rl-in] rl-i { transition: transform var(--rl-dur-lines) var(--rl-ease-text); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--rl-stagger-lines)); }
.rl-motion #app [data-rl="chars"][data-rl-in] rl-c { transition: transform var(--rl-dur-chars) var(--rl-ease-text); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--rl-stagger-chars)); }
.rl-motion #app [data-rl="lines"]:not([data-rl-in]) rl-i,
.rl-motion #app [data-rl="chars"]:not([data-rl-in]) rl-c { transform: translate3d(0, 110%, 0) !important; }
.rl-motion #app [data-rl="chars"]:not([data-rl-in]) sup { opacity: 0 !important; }   /* rootlove의 ®는 글자 뒤에 */

/* 서서히 떠오르기 */
.rl-motion #app [data-rl="fade"][data-rl-in] {
  transition: opacity var(--rl-dur-fade) var(--rl-ease-text) var(--d, 0ms), transform var(--rl-dur-fade-move) var(--rl-ease-text) var(--d, 0ms),
              color .25s, background-color .25s, background-size .55s var(--rl-ease) !important;
}
.rl-motion #app [data-rl="fade"]:not([data-rl-in]) { opacity: 0 !important; transform: translate3d(0, var(--rl-fade-distance), 0) !important; transition: none !important; }

/* 사진: 아래에서 열리고, 확대가 풀림 */
.rl-motion #app [data-rl="img"][data-rl-in] { transition: clip-path var(--rl-dur-img) var(--rl-ease) var(--d, 0ms), opacity .9s var(--rl-ease), transform 1s var(--rl-ease); }
.rl-motion #app [data-rl="img"]:not([data-rl-in]) { clip-path: inset(var(--rl-from, 18% 0% 0% 0%) round var(--rl-r, var(--rl-r-card))) !important; transition: none !important; }
.rl-motion #app [data-rl="img"][data-rl-in]:not([data-rl-done]) { clip-path: inset(0 0 0 0 round var(--rl-r, var(--rl-r-card))); }
.rl-motion #app [data-rl="img"][data-rl-in]:not([data-rl-done]) img { transition: scale var(--rl-dur-img-zoom) var(--rl-ease) var(--d, 0ms), filter .6s; }
.rl-motion #app [data-rl="img"]:not([data-rl-in]) img { scale: var(--rl-img-zoom) !important; transition: none !important; }

/* 섹션 머리 위의 가는 선 (길이는 스크립트가 섹션 폭에 맞춰 --rl-lw로 줌) */
.rl-motion #app .section-label::before {
  content: ""; position: absolute; left: 0; top: calc(-1 * var(--rl-head-line-gap)); height: 1px; width: var(--rl-lw, 0px);
  background: currentColor; opacity: var(--rl-head-line-opacity); pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
}
.rl-motion #app .section-label[data-rl-in]::before { transform: scaleX(1); transition: transform var(--rl-dur-draw) var(--rl-ease-io); }
.rl-motion #app .section-label[data-rl-in] { transition: opacity 1.1s var(--rl-ease-text) .15s; }
.rl-motion #app .section-label:not([data-rl-in]) { opacity: 0 !important; }

/* 첫 방문 단계 목록의 구분선 (21개 페이지 아래쪽에 반복되는 부품) */
.rl-motion #app .visit-list > div + div, .rl-motion #app .visit-list > .visit-note {
  border-top-color: transparent; background-repeat: no-repeat;
  background-image: linear-gradient(var(--rl-line-on-light), var(--rl-line-on-light)); background-position: 0 0; background-size: 0% 1px;
}
.rl-motion #app .visit-list > [data-rl-in] { background-size: 100% 1px; transition: background-size 1.4s var(--rl-ease-io) var(--d, 0ms); }

/* 원본의 등장 효과는 위 기준(늦게 시작, 차례로)으로 대신 처리 */
.rl-motion #app .reveal-wait { opacity: 1; transform: none; }
/* 제목이 줄 단위로 움직이는 묶음은 통째로 미끄러지지 않게 */
.rl-motion #app .visit-copy { transform: none; opacity: 1; }