/* 들어올 때 한 번 나타나는 공용 움직임 (TW-11) — 짝은 motion.js. 어디에 무엇을 줄지는 motion.js 의 적용 표 한 곳.
   속도·거리·느낌은 아래 :root 값으로 조정한다 (시작 선 «화면 아래 15%» 는 motion.js 의 START_LINE).
   움직이는 속성은 opacity·transform 둘뿐이라 배치를 다시 계산하지 않는다 — 아래 요소가 밀리지 않는다. */
:root{
  --motion-duration:1.5s;
  --motion-distance:50px;
  --motion-ease:ease-out;
  --motion-hero:1.4s; /* 상세 히어로 글자 등장 시간 — TW-22 가 가져다 쓴다 */
  --motion-stagger:.5s; /* 메인 About 순서 간격 — 글은 상자보다 한 칸, 밑줄은 두 칸 늦게 (TW-28) */
  --motion-expand:.8; /* 메인 About 상자가 커지기 시작하는 크기 (TW-28) */
}
[data-reveal]:not([data-reveal=none]){transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}
/* 숨김은 motion.js 가 <html data-motion="on"> 을 켤 때만 생긴다 — JS 가 막히거나 늦어도 글이 사라지지 않는다.
   숨길 때는 바로(transition:none), data-revealed 가 붙어 나타날 때만 움직인다. */
:root[data-motion=on] [data-reveal]:not([data-revealed]):not([data-reveal=none]){opacity:0;transition:none}
:root[data-motion=on] [data-reveal=fade-up]:not([data-revealed]){transform:translateY(var(--motion-distance))}
:root[data-motion=on] [data-reveal=zoom]:not([data-revealed]){transform:scale(1.05)}
/* 메인 About (TW-28) — 상자 expand · 글 step 1 · 링크 밑줄 step 2 가 한 묶음의 같은 신호를 받고, 순서는 지연으로만 낸다 */
:root[data-motion=on] [data-reveal=expand]:not([data-revealed]){transform:scale(var(--motion-expand))}
[data-reveal][data-reveal-step="1"]:not([data-reveal=none]){transition-delay:var(--motion-stagger)}
/* 링크는 글 묶음과 함께 나타나므로 따로 숨기지 않는다 — 숨기는 건 밑줄(::after)뿐. 마우스 올림 밑줄은 끈다(선이 두 줄이 되지 않게) */
:root[data-motion=on] [data-reveal=underline]:not([data-revealed]):not([data-reveal=none]){opacity:1}
[data-reveal=underline]{position:relative}
[data-reveal=underline]:hover{text-decoration:none}
[data-reveal=underline]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform-origin:left center}
:root[data-motion=on] [data-reveal=underline]:not([data-revealed])::after{transform:scaleX(0)}
[data-reveal=underline][data-revealed]::after{transition:transform var(--motion-duration) var(--motion-ease) calc(var(--motion-stagger) * 2)}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-reveal]::after{transition:none!important}}