/* ── 2026년 경향을 «절제해서» 쓰는 장치 ────────────────────────────
   경향 자체가 목적이 아니다. 이사 사이트는 견적을 내러 온 사람이 보는 화면이라
   연출이 길을 막으면 안 된다. 그래서 세 가지만, 짧게 쓴다.
     ① 스크롤에 따라 «한 번만» 올라오며 나타난다 (되풀이하지 않는다)
     ② 머리띠에 유리 질감 — 뒤가 비쳐 화면이 이어져 보인다
     ③ 카드에 빛이 얹힌 듯한 깊이 — 그림자 두 겹으로 낸다
   🔴 움직임을 꺼 둔 사람에게는 전부 끈다.                          */

/* ① 나타나기 — 12px 만 올라온다. 크게 움직이면 읽는 눈이 따라다니느라 지친다 */
.rise { opacity: 0; transform: translateY(12px);
        transition: opacity .5s var(--ease), transform .5s var(--ease); will-change: opacity, transform; }
.rise.in { opacity: 1; transform: none; }
/* 여럿이 함께 있을 때 아주 짧게 시차를 준다 — 0.06초씩, 넷까지만 */
.rise:nth-child(2){ transition-delay:.06s } .rise:nth-child(3){ transition-delay:.12s }
.rise:nth-child(4){ transition-delay:.18s }

/* ② 유리 머리띠 — 받침이 없는 브라우저에서는 그냥 불투명하게 보인다 */
.glass { background: color-mix(in srgb, var(--c-surface) 78%, transparent);
         backdrop-filter: saturate(160%) blur(14px);
         -webkit-backdrop-filter: saturate(160%) blur(14px);
         border-bottom: 1px solid color-mix(in srgb, var(--c-line) 70%, transparent); }
@supports not (backdrop-filter: blur(1px)) { .glass { background: var(--c-surface); } }

/* ③ 얹힌 빛 — 그림자 두 겹. 위쪽이 밝고 아래쪽이 깊다 */
.lift { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 28px rgba(15,23,42,.08);
        transition: box-shadow .28s var(--ease), transform .28s var(--ease); }
.lift:hover { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.12);
              transform: translateY(-2px); }

/* 🔴 움직임을 줄이라고 해 둔 사람에게는 아무것도 움직이지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lift:hover { transform: none; }
}