/* 모션 — 숨김은 html.motion 일 때만. ⚠️ JS 가 안 돌면 전부 그대로 보여야 한다 */
html.motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
html.motion .rv.in { opacity: 1; transform: none; }
html.motion .ex-grid video.rv { transform: translateY(18px) scale(.92); }
html.motion .ex-grid video.rv.in { transform: none; }

/* 형광펜 — 왼→오 */
html.motion .marker { background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1s cubic-bezier(.6,.1,.2,1) .25s; }
html.motion .marker.in { background-size: 100% 100%; }

/* 첫 화면 — 폰 둥실 · 캡처 패럴랙스(JS 가 --py) */
html.motion .phone-float { animation: mo-float 5s ease-in-out infinite; }
@keyframes mo-float { 50% { transform: translateY(-10px); } }
html.motion .hero-shot .shot-frame { transform: translateY(var(--py,0px)); }

/* 가계도 선 — 위에서 아래로, 가운데서 양옆으로 */
html.motion .tree-cols::before { transform: scaleY(0); transform-origin: top; transition: transform .5s ease-out; }
html.motion .tree-cols::after { transform: scaleX(0); transition: transform .7s ease-out .45s; }
html.motion .tree-cols.in::before, html.motion .tree-cols.in::after { transform: none; }

/* 손맛 — 버튼 떠오름 + 빛 한 번 */
.btn { position: relative; overflow: hidden; }
html.motion .btn { transition: background .15s, transform .25s, box-shadow .25s; }
html.motion .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
html.motion .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
html.motion .btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }
html.motion :is(.spec-card,.tg-kind,.who-card,.card).rv.in { transition: opacity .7s, transform .3s ease, box-shadow .3s ease; }
html.motion :is(.spec-card,.tg-kind,.who-card,.card):hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15,40,50,.10); }

/* 머리 막대 그림자 */
html.motion .top { transition: box-shadow .3s; }
html.motion .top.scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.08); }

@media (prefers-reduced-motion: reduce) {
  html.motion .rv, html.motion .ex-grid video.rv { opacity: 1; transform: none; transition: none; }
  html.motion .marker { background-size: 100% 100%; transition: none; }
  html.motion .phone-float { animation: none; }
  html.motion .hero-shot .shot-frame, html.motion .tree-cols::before, html.motion .tree-cols::after { transform: none; transition: none; }
  html.motion .btn:hover, html.motion :is(.spec-card,.tg-kind,.who-card,.card):hover { transform: none; }
  html.motion .btn::after { display: none; }
}