/* SynapMall — 움직임(모든 스킨 공통). base.html 이 스킨 CSS 보다 먼저 불러온다.
   속도·거리·곡선은 스킨 CSS 의 :root 토큰(--sm-dur 등)으로 바꾸고, 스킨만의 움직임은 각 스킨 CSS 끝에 둔다.
   ⚠️ 전부 prefers-reduced-motion: no-preference 안에만 — '동작 줄이기'를 켠 사람에게는 아무것도 움직이지 않는다.
   ⚠️ 위치를 잡는 transform 과 섞이지 않게 움직임은 개별 속성(translate·scale·rotate)으로 준다.
   JS(shop.js '움직임')가 하는 일: 화면 밖 요소에 .sm-reveal → 보이면 .is-in, 사진 로딩 .sm-img-wait → .sm-img-in,
   머리말 .is-scrolled, [data-parallax] 에 --sm-p(0~1), 장바구니 숫자 .bump, 하트 .pop, 담기 → 날아가는 점(.sm-fly). */
:root {
  --sm-ease: cubic-bezier(.2, .7, .2, 1);          /* 기본 — 빠르게 나와 부드럽게 멈춤 */
  --sm-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 톡 튀는 */
  --sm-dur: .6s;
  --sm-rise: 24px;                                  /* 나타날 때 올라오는 거리 */
  --sm-stagger: 70ms;                               /* 한 줄 안에서 차례로 */
}

@media (prefers-reduced-motion: no-preference) {
  /* ── 스크롤하면 나타나기 ─────────────────────────────── */
  /* 다 나타나면 translate 를 none 으로 — 값이 남으면 안쪽의 position: fixed 요소가 기준을 잃는다(모바일 구매 막대 등) */
  .sm-reveal { opacity: 0; translate: 0 var(--sm-rise);
    transition: opacity var(--sm-dur) var(--sm-ease), translate var(--sm-dur) var(--sm-ease), filter var(--sm-dur) var(--sm-ease);
    transition-delay: calc(var(--i, 0) * var(--sm-stagger)); }
  .sm-reveal.is-in { opacity: 1; translate: none; }

  /* ── 첫 화면 등장(JS 없이) ───────────────────────────── */
  @keyframes sm-rise-in { from { opacity: 0; translate: 0 var(--sm-rise); } to { opacity: 1; translate: 0 0; } }
  @keyframes sm-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .sm-hero > *, .sm-slider, .sm-herogrid > * { animation: sm-rise-in var(--sm-dur) var(--sm-ease) both; }
  .sm-hero > :nth-child(2), .sm-herogrid > :nth-child(2) { animation-delay: .08s; }
  .sm-hero > :nth-child(3) { animation-delay: .16s; }
  .sm-hero > :nth-child(4) { animation-delay: .24s; }
  .sm-hero > :nth-child(5) { animation-delay: .32s; }
  .sm-quick > a, .sm-hashtags > a, .sm-perks > li { animation: sm-rise-in var(--sm-dur) var(--sm-ease) both; animation-delay: calc(.3s + var(--n, 0) * 45ms); }
  /* 줄 안에서 차례로 — 앞 14개까지 */
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(2) { --n: 1; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(3) { --n: 2; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(4) { --n: 3; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(5) { --n: 4; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(6) { --n: 5; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(7) { --n: 6; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(8) { --n: 7; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(9) { --n: 8; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(10) { --n: 9; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(11) { --n: 10; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(12) { --n: 11; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(13) { --n: 12; }
  :is(.sm-quick, .sm-hashtags, .sm-perks) > :nth-child(14) { --n: 13; }

  /* 배너 — 보이는 장의 사진이 아주 천천히 다가온다 */
  @keyframes sm-kenburns { from { scale: 1; } to { scale: 1.06; } }
  .sm-slide.on img { animation: sm-kenburns 7s ease-out both; }

  /* ── 사진 로딩 — 자리에 은은한 반짝임, 다 오면 살짝 커졌다 제자리 ── */
  @keyframes sm-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
  :is(.sm-thumb, .sm-event-img):has(.sm-img-wait) {
    background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    background-size: 200% 100%; animation: sm-shimmer 1.3s linear infinite; }
  .sm-img-wait { opacity: 0; }
  @keyframes sm-img-in { from { opacity: 0; scale: 1.04; } to { opacity: 1; scale: 1; } }
  .sm-img-in { animation: sm-img-in .55s var(--sm-ease); }

  /* ── 누르는 느낌 ─────────────────────────────────────── */
  .btn, .sm-addbar, .sm-chip, .sm-hashtags a, .sm-more a { transition: transform .12s var(--sm-ease), background-color .15s, border-color .15s, color .15s, box-shadow .2s; }
  .btn:active, .sm-addbar:active, .sm-chip:active, .sm-hashtags a:active { transform: scale(.97); }

  /* ── 머리말 — 내려가면 그림자 ───────────────────────── */
  .sm-header { transition: box-shadow .3s var(--sm-ease), background-color .3s; }
  .sm-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }

  /* ── 장바구니 숫자·하트 ──────────────────────────────── */
  @keyframes sm-bump { 0% { scale: 1; } 40% { scale: 1.45; } 100% { scale: 1; } }
  .sm-cart-count.bump { animation: sm-bump .5s var(--sm-ease-spring); }
  @keyframes sm-pop { 0% { scale: 1; } 35% { scale: 1.35; } 100% { scale: 1; } }
  .sm-card-wish.pop i, .sm-wish-btn.pop i { display: inline-block; animation: sm-pop .45s var(--sm-ease-spring); }

  /* ── 담기 → 장바구니로 날아가는 점 ──────────────────── */
  .sm-fly { position: fixed; z-index: 80; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    background: var(--sm-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); pointer-events: none; }

  /* ── 카드 — 올리면 사진이 천천히 다가온다(스킨이 더 꾸민다) ── */
  .sm-card .sm-thumb img, .sm-event-img img { transition: transform .6s var(--sm-ease), opacity .3s; }
  .sm-rail-nav button, .sm-slide-ctrl button { transition: transform .15s var(--sm-ease), border-color .15s, background-color .15s; }
  .sm-rail-nav button:hover { transform: scale(1.08); }
}