/* Index of Marks — canonical detail and cross-document View Transition presentation.
   Navigation state and lifecycle live in view-transitions.js. */

@view-transition {
  navigation: auto;
}

/* Cross-document shared symbol. pageswap and pagereveal assign this class
   only to the one SVG that participates in the current navigation. */
.vt-shared {
  view-transition-name: symbol-shared;
}
.vt-detail-slide {
  view-transition-name: detail-slide-symbol;
}

/* Keep the logo geometry transition generous while leaving the document
   transition itself to the browser. */
::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-group(symbol-shared) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  z-index: 10000;
}
::view-transition-old(symbol-shared),
::view-transition-new(symbol-shared) {
  animation-duration: inherit;
  height: 100%;
  object-fit: contain;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 520ms;
}

/* Same-document collection layout changes remain entirely in this View
   Transition owner rather than leaking presentation into interactions.css. */
html[data-layout-transition="true"]::view-transition-group(*) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.22,.78,.18,1);
}
html[data-layout-transition="true"]::view-transition-old(*) {
  animation: iom-layout-old 320ms cubic-bezier(.4,0,.2,1) both;
}
html[data-layout-transition="true"]::view-transition-new(*) {
  animation: iom-layout-new 400ms cubic-bezier(.18,.78,.18,1) both;
}
@keyframes iom-layout-old {
  from { opacity:1; transform:scale(1); }
  to { opacity:.78; transform:scale(1.008); }
}
@keyframes iom-layout-new {
  from { opacity:.76; transform:scale(.99); }
  to { opacity:1; transform:scale(1); }
}

/* Previous/Next detail navigation keeps the interface spatially fixed.
   Only the active symbol travels horizontally; header, metadata, arrows,
   size cues and page framing never translate. */
html[data-detail-nav-direction]::view-transition-group(root) {
  animation: none !important;
}
html[data-detail-nav-direction]::view-transition-old(root) {
  animation: detail-fixed-old 120ms linear 155ms both;
  mix-blend-mode: normal;
}
html[data-detail-nav-direction]::view-transition-new(root) {
  animation: detail-fixed-new 120ms linear 155ms both;
  mix-blend-mode: normal;
}

html[data-detail-nav-direction]::view-transition-group(detail-slide-symbol) {
  animation-duration: 430ms;
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
  z-index: 10000;
}
html[data-detail-nav-direction]::view-transition-old(detail-slide-symbol),
html[data-detail-nav-direction]::view-transition-new(detail-slide-symbol) {
  animation-duration: 430ms;
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
  height: 100%;
  object-fit: contain;
}
html[data-detail-nav-direction="next"]::view-transition-old(detail-slide-symbol) {
  animation-name: detail-symbol-next-out;
}
html[data-detail-nav-direction="next"]::view-transition-new(detail-slide-symbol) {
  animation-name: detail-symbol-next-in;
}
html[data-detail-nav-direction="prev"]::view-transition-old(detail-slide-symbol) {
  animation-name: detail-symbol-prev-out;
}
html[data-detail-nav-direction="prev"]::view-transition-new(detail-slide-symbol) {
  animation-name: detail-symbol-prev-in;
}

/* The fixed page content only swaps opacity very briefly around the midpoint.
   There is no positional motion outside the symbol. */
@keyframes detail-fixed-old {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes detail-fixed-new {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes detail-symbol-next-out {
  from { transform: translate3d(0,0,0) scale(1); opacity: 1; }
  to { transform: translate3d(-78vw,0,0) scale(.97); opacity: 0; }
}
@keyframes detail-symbol-next-in {
  from { transform: translate3d(78vw,0,0) scale(.97); opacity: 0; }
  to { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}
@keyframes detail-symbol-prev-out {
  from { transform: translate3d(0,0,0) scale(1); opacity: 1; }
  to { transform: translate3d(78vw,0,0) scale(.97); opacity: 0; }
}
@keyframes detail-symbol-prev-in {
  from { transform: translate3d(-78vw,0,0) scale(.97); opacity: 0; }
  to { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}


/* Slideshow entry uses a same-document shared-element View Transition.
   The nearest visible mark becomes the first slideshow mark while the Index
   recedes softly underneath it. */
.slideshow-vt-shared {
  view-transition-name: slideshow-shared;
}
html[data-slideshow-transition="enter"]::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
html[data-slideshow-transition="enter"]::view-transition-old(root) {
  animation: slideshow-index-out 520ms cubic-bezier(.22, 1, .36, 1) both;
}
html[data-slideshow-transition="enter"]::view-transition-new(root) {
  animation: slideshow-index-in 520ms cubic-bezier(.22, 1, .36, 1) both;
}
html[data-slideshow-transition="enter"]::view-transition-group(slideshow-shared) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  z-index: 10001;
}
html[data-slideshow-transition="enter"]::view-transition-old(slideshow-shared),
html[data-slideshow-transition="enter"]::view-transition-new(slideshow-shared) {
  animation-duration: inherit;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}
@keyframes slideshow-index-out {
  from { opacity: 1; }
  to { opacity: .12; }
}
@keyframes slideshow-index-in {
  from { opacity: .12; }
  to { opacity: 1; }
}

html[data-slideshow-transition="exit"]::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
html[data-slideshow-transition="exit"]::view-transition-old(root) {
  animation: slideshow-exit-old 520ms cubic-bezier(.22, 1, .36, 1) both;
}
html[data-slideshow-transition="exit"]::view-transition-new(root) {
  animation: slideshow-exit-new 520ms cubic-bezier(.22, 1, .36, 1) both;
}
html[data-slideshow-transition="exit"]::view-transition-group(slideshow-shared) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  z-index: 10001;
}
html[data-slideshow-transition="exit"]::view-transition-old(slideshow-shared),
html[data-slideshow-transition="exit"]::view-transition-new(slideshow-shared) {
  animation-duration: inherit;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}
@keyframes slideshow-exit-old { from { opacity: 1; } to { opacity: .12; } }
@keyframes slideshow-exit-new { from { opacity: .12; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-group(symbol-shared),
  ::view-transition-group(detail-slide-symbol),
  ::view-transition-group(slideshow-shared),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(slideshow-shared),
  ::view-transition-new(slideshow-shared),
  ::view-transition-old(detail-slide-symbol),
  ::view-transition-new(detail-slide-symbol) { animation-duration: 160ms !important; }
}

html[data-detail-nav-direction] .detail-identity {
  view-transition-name: detail-header-identity;
}
html[data-detail-nav-direction]::view-transition-group(detail-header-identity) {
  animation-duration: 430ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  z-index: 10001;
}
html[data-detail-nav-direction]::view-transition-old(detail-header-identity),
html[data-detail-nav-direction]::view-transition-new(detail-header-identity) {
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
html[data-detail-nav-direction="next"]::view-transition-old(detail-header-identity) {
  animation: detail-identity-next-out 210ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-detail-nav-direction="next"]::view-transition-new(detail-header-identity) {
  animation: detail-identity-next-in 280ms cubic-bezier(.16, 1, .3, 1) 95ms both;
}
html[data-detail-nav-direction="prev"]::view-transition-old(detail-header-identity) {
  animation: detail-identity-prev-out 210ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-detail-nav-direction="prev"]::view-transition-new(detail-header-identity) {
  animation: detail-identity-prev-in 280ms cubic-bezier(.16, 1, .3, 1) 95ms both;
}
@keyframes detail-identity-next-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-5px, 0, 0); }
}
@keyframes detail-identity-next-in {
  from { opacity: 0; transform: translate3d(5px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes detail-identity-prev-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(5px, 0, 0); }
}
@keyframes detail-identity-prev-in {
  from { opacity: 0; transform: translate3d(-5px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Collection ↔ Detail: shared mark owns the motion; chrome swaps quickly on a
   solid palette surface so Safari never exposes a transparent intermediate. */
html[data-archive-xdoc="1"]::view-transition-group(root) {
  animation-duration: 430ms !important;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-archive-xdoc="1"]::view-transition-old(root),
html[data-archive-xdoc="1"]::view-transition-new(root) {
  background: var(--bg);
  mix-blend-mode: normal;
}
html[data-archive-xdoc="1"]::view-transition-old(root) {
  animation: iom-archive-chrome-out 90ms linear both !important;
}
html[data-archive-xdoc="1"]::view-transition-new(root) {
  animation: iom-archive-chrome-in 170ms cubic-bezier(.16,1,.3,1) 145ms both !important;
}
html[data-archive-xdoc="1"]::view-transition-group(symbol-shared) {
  animation-duration: 520ms !important;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
  z-index: 10002;
}
html[data-archive-xdoc="1"]::view-transition-old(symbol-shared),
html[data-archive-xdoc="1"]::view-transition-new(symbol-shared) {
  animation-duration: 520ms !important;
  mix-blend-mode: normal;
}
@keyframes iom-archive-chrome-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes iom-archive-chrome-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html[data-archive-xdoc="1"]::view-transition-group(root),
  html[data-archive-xdoc="1"]::view-transition-old(root),
  html[data-archive-xdoc="1"]::view-transition-new(root),
  html[data-archive-xdoc="1"]::view-transition-group(symbol-shared),
  html[data-archive-xdoc="1"]::view-transition-old(symbol-shared),
  html[data-archive-xdoc="1"]::view-transition-new(symbol-shared),
  html[data-detail-nav-direction]::view-transition-group(detail-header-identity),
  html[data-detail-nav-direction]::view-transition-old(detail-header-identity),
  html[data-detail-nav-direction]::view-transition-new(detail-header-identity) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}