/* ============ Magnetic · 동작과 상호작용 ============ */
/*
   요소가 커서에 끌려오고, 손을 떼면 제자리로 되돌아간다.
   장식을 더하지 않고 '반응'만으로 살아 있게 만드는 방식이라
   오래 보는 학습 화면과 잘 맞는다.

   지키는 선:
     · 움직임은 작게 (최대 4px). 크면 누르려는 걸 놓치게 된다.
     · 되돌아올 때는 살짝 지나쳤다 멈춘다 — 자석에 붙는 느낌
     · 색·테두리를 늘리지 않는다. 깔끔함이 먼저다.
     · 동작 줄이기를 켠 사람에게는 전부 끈다.
*/

:root {
  /* 끌려올 때: 즉각 반응 */
  --ease-pull: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 놓았을 때: 살짝 지나쳤다 멈춤 */
  --ease-snap: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ---- 자석처럼 끌려오는 요소 ---- */
/*
   좌표 계산은 JS 가 하고 CSS 는 --mx/--my 만 받아 쓴다.
   transform 만 건드리므로 레이아웃을 다시 계산하지 않는다.
*/
[data-magnetic] {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 260ms var(--ease-snap);
  will-change: transform;
}
[data-magnetic][data-pulling] {
  /* 따라오는 동안은 부드럽게 이어져야 해서 전환을 짧게 */
  transition: transform 90ms var(--ease-pull);
}

/* ---- 화면 전환 ---- */
/*
   장식 없이 짧게. 아래에서 살짝 올라오며 나타난다.
   블러를 쓰면 글자가 뭉개져 보여 뺐다.
*/
.view[data-entering] > * {
  animation: rise 300ms var(--ease-pull) backwards;
}
.view[data-entering] > *:nth-child(1) { animation-delay: 0ms; }
.view[data-entering] > *:nth-child(2) { animation-delay: 26ms; }
.view[data-entering] > *:nth-child(3) { animation-delay: 48ms; }
.view[data-entering] > *:nth-child(4) { animation-delay: 66ms; }
.view[data-entering] > *:nth-child(n+5) { animation-delay: 80ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 네비게이션 ---- */
/* 활성 표시가 제자리에 붙듯 들어온다 */
.nav-item.active::before {
  animation: snap-in 300ms var(--ease-snap);
}
@keyframes snap-in {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* 아이콘은 색이 아니라 선명도로 상태를 말한다 */
.nav-item {
  transition: opacity 160ms var(--ease-pull), background 160ms var(--ease-pull);
}

/* ---- 눌리는 느낌 ---- */
/*
   버튼이 눌린 걸 손이 알아야 한다. 자석이 붙었다 떨어지듯 잠깐 들어간다.
*/
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.nav-item:active {
  transform: scale(0.97);
  transition: transform 60ms var(--ease-pull);
}

/* ---- 카드 ---- */
/*
   테두리 하나로 끝내지 않고 얕은 그림자를 준다.
   판이 배경에서 살짝 떠 있는 정도. 더 주면 지저분해진다.
*/
.today-card,
.section,
.view-empty {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 6px 20px -16px rgba(0, 0, 0, 0.9);
  transition: border-color 200ms var(--ease-pull);
}

/* ---- 움직임을 줄여달라고 한 경우 ---- */
@media (prefers-reduced-motion: reduce) {
  .view[data-entering] > *,
  .nav-item.active::before {
    animation: none !important;
  }
  [data-magnetic] {
    transform: none !important;
    transition: none !important;
  }
  .btn:active,
  .nav-item:active { transform: none; }
}