@charset "UTF-8";

/* ============================================================
   페이지 이동 / 전환 애니메이션

   1) View Transitions (크롬·엣지·사파리)
      브라우저가 이전 페이지와 새 페이지 화면을 찍어 두고 그 사이를 애니메이션한다.
      - 페이지 전체: 흰 화면을 거치지 않고, 새 화면이 이전 화면 위로 바로 겹쳐 들어오며 살짝만 올라온다
      - 헤더: 이름(site-header)을 붙여 두어 페이지가 바뀌어도 제자리에 있다
      - 제품 카드 → 상세: 카드 사진·이름과 상세 머리의 사진·이름에 같은 이름을 붙여
        (product-photo-{slug}, product-name-{slug}) 카드가 그대로 커지며 이어진다
   2) 지원하지 않는 브라우저 (파이어폭스 등)
      <head> 의 인라인 스크립트가 html.no-vt 를 붙이고, main.js 가 링크 클릭을 가로채
      짧게 페이드아웃한 뒤 이동한다. 새 페이지는 페이드인으로 시작한다.
   3) 동작 줄이기 설정이면 모두 끈다
   ============================================================ */

@view-transition {
	navigation: auto;
}

/* 같은 페이지 안 이동(#about, #products)은 부드럽게 스크롤 */
html {
	scroll-behavior: smooth;
}

/* ---------- 1. View Transitions ---------- */

.site-header {
	view-transition-name: site-header;
}

/* 헤더는 움직이지 않고 새 헤더로 바로 바꿔 낀다.
   이전 헤더를 남겨 교차 페이드하면 두 메뉴 글자가 겹쳐 보인다
   (스크롤로 작아진 헤더 → 새 페이지의 큰 헤더처럼 크기가 다르면 특히 심하다) */
::view-transition-group(site-header) {
	animation: none;
	z-index: 10;
}

::view-transition-old(site-header) {
	display: none;
}

::view-transition-new(site-header) {
	animation: none;
}

/* 페이지: 이전 화면은 바로 치우고 새 화면만 살짝 올라오며 나타난다.
   두 화면을 동시에 비추면(교차 페이드) 글자가 겹쳐 보이므로 겹치는 순간을 두지 않는다 */
::view-transition-old(root) {
	display: none;
}

::view-transition-new(root) {
	animation: vt-page-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes vt-page-out {
	to {
		opacity: 0;
	}
}

@keyframes vt-page-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* 제품 카드 ↔ 상세 머리: 위치·크기가 이어지는 전환 */
::view-transition-group(*.product-morph) {
	animation-duration: 0.55s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 사진은 비율이 달라도 찌그러지지 않게 채운다 */
::view-transition-old(*.product-photo),
::view-transition-new(*.product-photo) {
	height: 100%;
	object-fit: cover;
	overflow: clip;
}

/* ---------- 2. 미지원 브라우저용 페이드 ---------- */

.no-vt main,
.no-vt .site-footer {
	animation: vt-page-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.no-vt.is-leaving main,
.no-vt.is-leaving .site-footer {
	animation: vt-page-out 0.12s ease-out both;
}

/* ---------- 3. 동작 줄이기 ---------- */

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	html {
		scroll-behavior: auto;
	}
}