/* Approved case-study navigation. Contract: docs/design-system/motion.md. */
:root {
  --motion-case-open: 1150ms;
  --motion-case-close: 1000ms;
  --motion-case-step: 950ms;
  --motion-content-duration: 800ms;
  --motion-content-delay: 400ms;
  --motion-art-delay: 480ms;
  --motion-page-radius: clamp(20px, 2.4vw, 32px);
  --ease-page-transition: cubic-bezier(.76, 0, .24, 1);
}

@view-transition { navigation: auto; }

::view-transition { background: var(--cream); --chapter-round: var(--motion-page-radius); }
::view-transition-group(root) { animation-duration: var(--motion-case-open); }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  overflow: clip;
  transform-origin: 50% 50%;
  animation-timing-function: var(--ease-page-transition);
  animation-fill-mode: both;
}

html[data-route-motion="enter"]::view-transition-old(root) {
  z-index: 1;
  animation: chapter-recede var(--motion-case-open) var(--ease-page-transition) both;
}
html[data-route-motion="enter"]::view-transition-new(root) {
  z-index: 2;
  animation: chapter-open var(--motion-case-open) var(--ease-page-transition) both;
}
html[data-route-motion="return"]::view-transition-old(root) {
  z-index: 2;
  animation: chapter-open var(--motion-case-close) var(--ease-page-transition) reverse both;
}
html[data-route-motion="return"]::view-transition-new(root) {
  z-index: 1;
  animation: chapter-recede var(--motion-case-close) var(--ease-page-transition) reverse both;
}

/* Sibling stories trade places sideways; entering/leaving stays vertical. */
html[data-route-motion="next"] { --chapter-step: 1; }
html[data-route-motion="previous"] { --chapter-step: -1; }
html:is([data-route-motion="next"], [data-route-motion="previous"])::view-transition-old(root) {
  z-index: 1;
  animation: chapter-side-away var(--motion-case-step) var(--ease-page-transition) both;
}
html:is([data-route-motion="next"], [data-route-motion="previous"])::view-transition-new(root) {
  z-index: 2;
  animation: chapter-side-in var(--motion-case-step) var(--ease-page-transition) both;
}
@keyframes chapter-side-away {
  from { transform: translateX(0) scale(1); clip-path: inset(0 round 0); opacity: 1; }
  to { transform: translateX(calc(var(--chapter-step) * -20%)) scale(.92); clip-path: inset(0 round var(--chapter-round)); opacity: .65; }
}
@keyframes chapter-side-in {
  0% { transform: translateX(calc(var(--chapter-step) * 100%)) scale(.94); clip-path: inset(0 round var(--chapter-round)); }
  75% { clip-path: inset(0 round var(--chapter-round)); }
  100% { transform: translateX(0) scale(1); clip-path: inset(0 round 0); }
}

.case-navigation [data-case-return] { display: inline-flex; align-items: center; min-height: 44px; }
.case-navigation .case-step { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
.case-navigation-label { margin-right: auto; }
@media (max-width: 760px) {
  .case-navigation { flex-wrap: wrap; }
  .case-navigation .case-navigation-label { order: 3; width: 100%; max-width: none; text-align: left; }
}

@keyframes chapter-recede {
  from { transform: translateY(0) scale(1); clip-path: inset(0 round 0); opacity: 1; }
  to { transform: translateY(-10%) scale(.92); clip-path: inset(0 round var(--chapter-round)); opacity: .65; }
}
@keyframes chapter-open {
  0% { transform: translateY(100%) scale(.94); clip-path: inset(0 round var(--chapter-round)); }
  75% { clip-path: inset(0 round var(--chapter-round)); }
  100% { transform: translateY(0) scale(1); clip-path: inset(0 round 0); }
}

/* Content settles while the incoming sheet opens. No persistent hidden state. */
html[data-route-motion="enter"] .opening-words,
html[data-route-motion="enter"] .opening-art {
  animation: chapter-content var(--motion-content-duration) var(--ease-out-quint) var(--motion-content-delay) both;
}
html[data-route-motion="enter"] .opening-art { animation-delay: var(--motion-art-delay); }
@keyframes chapter-content {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The collection is ready beneath the closing sheet. Keep its direct-load rise. */
html.route-arrived .work-collection .rise {
  animation: none;
  opacity: 1;
  transform: none;
}

/* The originating homepage work reader is already revealed on return. Its
   26px scroll-reveal offset must not alter the restored scroll coordinate. */
html.route-arrived .work-featured .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html[data-route-motion] .opening-words,
  html[data-route-motion] .opening-art { animation: none; }
}