/* ═══ 움직임 층 2차 (2026-09-13) — 브런치 실측값(03.사장님확인/브런치_움직임_명세_2026-09-13.md)으로 새로 작성 ═══
   브런치 코드는 쓰지 않았다. 잰 숫자(시간·곡선·거리·배율)만 옮겼다. 레이아웃·색·문구는 그대로.
   모바일 먼저: 휴대폰은 더 짧게(브런치 원칙 — 머리글 0.1초 vs PC 0.3초).
   움직임 줄이기 설정이면 design-tokens.css가 모든 전환을 끄고, 아래에서 숨김도 풀어 둔다. */
:root {
  --mo-ease-out: cubic-bezier(0, 0, 0.58, 1);              /* 등장·진행 막대 (브런치: ease-out) */
  --mo-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);        /* 사진 hover (브런치: ease-in-out) */
  --mo-ease-glide: cubic-bezier(0.06, 0.84, 0.77, 0.99);   /* 맨 위로 버튼만 (브런치 실측: 빨리 출발해 아주 천천히 멈춤) */
  --mo-rise: 20px;          /* 휴대폰 등장 거리 */
  --mo-move: 400ms;         /* 휴대폰 등장 이동 */
  --mo-fade: 200ms;         /* 등장 투명도 (브런치: 0.2초) */
  --mo-nav-dur: 100ms;      /* 휴대폰 머리글 배경 (브런치: 0.1초) */
  --mo-nav-ease: var(--mo-ease-out);
}
@media (min-width: 768px) {
  :root { --mo-rise: 30px; --mo-move: 500ms; --mo-nav-dur: 300ms; --mo-nav-ease: cubic-bezier(0.42, 0, 1, 1); }
}

/* 1) 스크롤 등장 — 첫 화면 아래 요소만 (브런치: 아래 30px → 제자리, 투명도 0.2초·이동 0.5초 ease-out) */
.mo-reveal {
  opacity: 0;
  transform: translateY(var(--mo-rise));
  transition: opacity var(--mo-fade) var(--mo-ease-out), transform var(--mo-move) var(--mo-ease-out) !important;
  transition-delay: var(--mo-delay, 0ms) !important;
  animation: none !important;
}
.mo-reveal.mo-in { opacity: 1; transform: none; }
.mo-done { animation: none !important; }   /* 등장이 끝난 뒤: 기존 fadeUp이 다시 재생되지 않게 */

/* 2) 첫 문장 — 한 줄씩 떠오름 (전화 버튼이 든 줄은 제외: .mo-static) */
.mo-hero > *:not(.mo-static) { animation: moRise var(--mo-move) var(--mo-ease-out) both; }
.mo-hero > *:nth-child(2) { animation-delay: 90ms; }
.mo-hero > *:nth-child(3) { animation-delay: 180ms; }
.mo-hero > *:nth-child(n+4) { animation-delay: 270ms; }
@keyframes moRise { from { opacity: 0; transform: translateY(var(--mo-rise)); } to { opacity: 1; transform: none; } }

/* 3) 카드 사진 — 마우스 올리면 0.3초에 1.1배, 사진이 살짝 짙어짐
      (브런치: 1.0→1.1배 + 가림막 0.4→0.6, 0.3초 ease-in-out)
      우리 카드엔 가림막 층이 없어(사진 위 배지 위치 보호) 밝기 90%로 같은 느낌을 낸다. hover 있는 기기만. */
.exp-card-photo > *, .venue-photo img {
  transition: transform 300ms var(--mo-ease-in-out), filter 300ms var(--mo-ease-in-out) !important;
}
.exp-card, .v-card, .venue-card, .category-item, .program-card, .nearby-card {
  transition: box-shadow 300ms var(--mo-ease-in-out), border-color 300ms var(--mo-ease-in-out), transform 300ms var(--mo-ease-in-out);
}
@media (hover: hover) {
  .exp-card:hover .exp-card-photo > *, .venue-card:hover .venue-photo img { transform: scale(1.1); filter: brightness(0.9); }
}
/* 휴대폰: hover가 없으니 누를 때 살짝 눌린다 */
@media (hover: none) {
  .exp-card:active, .v-card:active, .venue-card:active, .category-item:active,
  .program-card:active, .nearby-card:active { transform: scale(0.985); transition-duration: 120ms; }
  .btn-tel:active, .card-phone-btn:active, .btn-primary:active, .btn-detail:active, .btn-sm:active {
    transform: scale(0.97); transition: transform 120ms var(--mo-ease-out);
  }
  a, button { -webkit-tap-highlight-color: rgba(26, 26, 26, 0.06); }
}

/* 4) 머리글 — 내리면 배경이 차오르고 가는 선 (브런치: 휴대폰 0.1초 ease-out · PC 0.3초 ease-in) */
.navbar {
  transition: background-color var(--mo-nav-dur) var(--mo-nav-ease), box-shadow var(--mo-nav-dur) var(--mo-nav-ease),
    border-color var(--mo-nav-dur) var(--mo-nav-ease) !important;
}
.navbar.shrink { background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08); }

/* 5) 읽기 진행 막대 — 가이드 글 (브런치: 0.2초 ease-out으로 쫓아오듯 채움) */
.mo-progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  background: var(--fg); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 200ms var(--mo-ease-out);
  pointer-events: none; z-index: 1;
}

/* 6) 맨 위로 버튼 — 새 요소 (브런치: 0.55초, 빨리 출발해 아주 천천히 멈추는 곡선)
      휴대폰은 하단 탭바(아래 12px + 높이 56px) 위에 둔다. */
.mo-top {
  position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 34;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); color: var(--fg);
  border: 1px solid rgba(26, 26, 26, 0.10); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; padding: 0;
  opacity: 0; transform: translateY(120px); pointer-events: none;
  transition: transform 550ms var(--mo-ease-glide), opacity 550ms var(--mo-ease-glide);
}
.mo-top.mo-show { opacity: 1; transform: none; pointer-events: auto; }
.mo-top svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .mo-top { right: 24px; bottom: 24px; } }

/* 7) 휴대폰 사진 — 불러오면 0.5초에 서서히 나타남 (브런치 휴대폰 본문 사진: 0.5초 ease) */
.mo-img-wait { opacity: 0; }
.mo-img-in { opacity: 1; transition: opacity 500ms ease; }

@media (prefers-reduced-motion: reduce) {
  .mo-reveal, .mo-img-wait { opacity: 1 !important; transform: none !important; }
  .mo-hero > * { animation: none !important; }
}