+

+  /* 애니메이션 토큰(신규 네임스페이스 — §4.2 승인). 오버레이·다이얼로그·토스트·

+     스플래시 전환에 사용. --ease-*는 Tailwind 기본값 사용, duration은 값에

+     내장(트랜지션 duration 표준은 bare 유틸 duration-200 사용). */

+  --animate-fade-in: fade-in 200ms var(--ease-out);

+  --animate-fade-out: fade-out 200ms var(--ease-in);

+  --animate-dialog-in: dialog-in 200ms var(--ease-out);

+  --animate-toast-in: toast-in 300ms var(--ease-out);

+}

+

+@keyframes fade-in {

+  from {

+    opacity: 0;

+  }

+  to {

+    opacity: 1;

+  }

+}

+

+/* 스플래시 등 풀스크린 오버레이 퇴장용 — fade-in의 역방향 키프레임. */

+@keyframes fade-out {

+  from {

+    opacity: 1;

+  }

+  to {

+    opacity: 0;

+  }

+}

+

+@keyframes dialog-in {

+  from {

+    opacity: 0;

+    transform: scale(0.95);

+  }

+  to {

+    opacity: 1;

+    transform: scale(1);

+  }

+}

+

+@keyframes toast-in {

+  from {

+    opacity: 0;

+    transform: translateY(0.5rem);

+  }

+  to {

+    opacity: 1;

+    transform: translateY(0);

+  }

+}

+

+/* 레이아웃 전환(View Transitions API, feature 레인 A안) — feature가 전환 루트

+   요소에 .layout-transition 클래스를 부여하면 view-transition-class로 매핑되어

+   아래 ::view-transition-old/new 규칙이 부드러운 크로스페이드를 적용한다.

+   (CSS View Transitions Level 2, view-transition-class 프로퍼티 사용) */

+.layout-transition {

+  view-transition-class: layout-transition;

+}

+

+::view-transition-old(.layout-transition) {

+  animation: var(--animate-fade-out);

+}

+

+::view-transition-new(.layout-transition) {

+  animation: var(--animate-fade-in);

+}

+

+@media (prefers-reduced-motion: reduce) {

+  ::view-transition-group(.layout-transition),

+  ::view-transition-old(.layout-transition),

+  ::view-transition-new(.layout-transition) {

+    animation: none;

+  }