/* 양미관 실험계(lab) — 움직임
   "화면이 새로 그려지지 않고 이어진다."
   원칙
     1. transform 과 opacity 만 움직인다. width/height/top/left 로 애니메이션하지 않는다.
     2. 같은 것은 같은 문법으로 — 모바일에서 밀려 들어오는 상세와 PC 에서 바뀌는 상세는
        같은 View Transition 이름을 쓴다.
     3. 손잡이를 바꾸면 레일은 미끄러져 간다. 점프하면 무슨 일이 일어났는지 안 보인다.
     4. prefers-reduced-motion 이면 전부 0ms — 그래도 화면은 정확히 같은 곳에 도착한다. */

:root{
  /* 지속시간 */
  --d-instant:90ms;    /* 눌림 · 색 바뀜 */
  --d-quick:180ms;     /* 토글 · 알림 띠 */
  --d-base:260ms;      /* 화면 전환 · 상세 열기 */
  --d-slow:420ms;      /* 레일이 반대편으로 미끄러지기 */

  /* 이징 — 스프링 느낌을 cubic-bezier 로 (실제 스프링은 계산 비용만 들고 티가 안 난다) */
  --e-spring:cubic-bezier(.22,1.2,.36,1);   /* 들어올 때 — 살짝 넘겼다 앉는다 */
  --e-out:cubic-bezier(.22,.9,.3,1);        /* 나갈 때 */
  --e-in:cubic-bezier(.5,0,.9,.3);
  --e-std:cubic-bezier(.4,0,.2,1);
}

/* ── 공용 전환 ── */
.mo-press{ transition:transform var(--d-instant) var(--e-std), opacity var(--d-instant) var(--e-std); }
.mo-press:active{ transform:scale(.97); }

.mo-fade{ animation:mo-fade var(--d-base) var(--e-out) both; }
@keyframes mo-fade{ from{opacity:0} to{opacity:1} }

.mo-rise{ animation:mo-rise var(--d-base) var(--e-spring) both; }
@keyframes mo-rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.mo-sheet{ animation:mo-sheet var(--d-base) var(--e-spring) both; }
@keyframes mo-sheet{ from{transform:translateY(100%)} to{transform:none} }

/* 레일 · 떠 있는 알약이 반대편으로 갈 때 — 미끄러진다 */
.rail, .bnav, .fab, .abar{
  transition:transform var(--d-slow) var(--e-spring),
             left var(--d-slow) var(--e-spring),
             right var(--d-slow) var(--e-spring),
             opacity var(--d-quick) var(--e-out);
}

/* 알림 띠 · 확인 카드 */
.toast{ animation:mo-toast var(--d-base) var(--e-spring) both; }
@keyframes mo-toast{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.toast.out{ animation:mo-toast-out var(--d-quick) var(--e-in) both; }
@keyframes mo-toast-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(10px)} }

.cfm{ animation:mo-cfm var(--d-base) var(--e-spring) both; }
@keyframes mo-cfm{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.scrim{ animation:mo-fade var(--d-quick) var(--e-out) both; }

/* 뼈대(불러오는 중) — 밝기만 오간다 */
.skel{ animation:mo-skel 1.15s var(--e-std) infinite; }
@keyframes mo-skel{ 0%,100%{opacity:.55} 50%{opacity:.9} }

/* 버튼 안 표시자 — 버튼은 제자리에 있고 동그라미만 돈다 */
.spin{ animation:mo-spin .8s linear infinite; transform-origin:50% 50%; }
@keyframes mo-spin{ to{transform:rotate(360deg)} }

/* ── View Transitions ──
   이름 있는 요소는 사라지고 나타나는 게 아니라 이어진다.
   shell.js 가 고른 행에 --vt-row, 상세 머리에 --vt-head 를 붙인다. */
@view-transition{ navigation:none; }

::view-transition-group(root){ animation-duration:var(--d-base); }
::view-transition-old(root){ animation:mo-fade var(--d-quick) var(--e-in) reverse both; }
::view-transition-new(root){ animation:mo-fade var(--d-base) var(--e-out) both; }

/* 목록 → 상세: 고른 행이 상세 머리 자리로 이어진다 */
::view-transition-group(pick){
  animation-duration:var(--d-base);
  animation-timing-function:var(--e-spring);
}
::view-transition-old(pick),::view-transition-new(pick){ height:100%; }

/* 좁은 기기에서 상세는 옆에서 밀려 들어온다 */
html[data-vt="push"] ::view-transition-old(pane){
  animation:mo-push-out var(--d-base) var(--e-out) both;
}
html[data-vt="push"] ::view-transition-new(pane){
  animation:mo-push-in var(--d-base) var(--e-spring) both;
}
html[data-vt="pop"] ::view-transition-old(pane){
  animation:mo-pop-out var(--d-base) var(--e-out) both;
}
html[data-vt="pop"] ::view-transition-new(pane){
  animation:mo-pop-in var(--d-base) var(--e-spring) both;
}
@keyframes mo-push-in{ from{opacity:0;transform:translateX(22%)} to{opacity:1;transform:none} }
@keyframes mo-push-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(-10%)} }
@keyframes mo-pop-in{ from{opacity:0;transform:translateX(-10%)} to{opacity:1;transform:none} }
@keyframes mo-pop-out{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(22%)} }

/* ── 손가락으로 넘길 때 ──
   스냅숏 전환(View Transition)을 쓰지 않는다. 손에서 떨어진 자리에서
   **그대로 이어서** 나가고, 새 화면이 작고 흐린 채로 올라온다 —
   그 두 움직임을 shell.js 가 한 줄기로 그린다. 여기서 또 그리면 두 번 움직인다.
   (2026-09-18 대표 지적: 「기존 화면이 원상복구됐다가 넘어간다」) */

/* 손잡이 바꾸기 — 이름 붙은 조각들이 제자리에서 반대편으로 미끄러진다.
   (2026-09-18 대표 지시: 「왼손을 눌렀으면 같이 왼손으로 뜨는 걸 애니메이션으로」) */
html[data-vt="hand"] ::view-transition-group(*){
  animation-duration:var(--d-slow);
  animation-timing-function:var(--e-spring);
}
html[data-vt="hand"] ::view-transition-old(root),
html[data-vt="hand"] ::view-transition-new(root){ animation:none; mix-blend-mode:normal; }

/* 탭끼리는 밀지 않는다 — 옆으로 미는 것은 계층이 깊어질 때만 */
html[data-vt="tab"] ::view-transition-old(pane){ animation:mo-fade var(--d-quick) var(--e-in) reverse both; }
html[data-vt="tab"] ::view-transition-new(pane){ animation:mo-rise var(--d-base) var(--e-spring) both; }

/* ── 움직임을 줄여 달라고 한 사람 ── */
@media (prefers-reduced-motion: reduce){
  :root{ --d-instant:0ms; --d-quick:0ms; --d-base:0ms; --d-slow:0ms; }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .skel{ animation:none; opacity:.7; }
  .spin{ animation:none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}