/* Index of Marks — archive experience layer */

html[data-archive-xdoc="1"]::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
html[data-archive-xdoc="1"]::view-transition-old(root) {
  animation: archive-page-out 170ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
}
html[data-archive-xdoc="1"]::view-transition-new(root) {
  animation: archive-page-in 330ms cubic-bezier(.16, 1, .3, 1) 155ms both;
  mix-blend-mode: normal;
}
html[data-archive-xdoc="1"]::view-transition-group(symbol-shared) {
  animation-duration: 690ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  z-index: 10002;
}
@keyframes archive-page-out { from { opacity:1; } to { opacity:0; } }
@keyframes archive-page-in { from { opacity:0; } to { opacity:1; } }

.archive-filter-marker {
  margin-right: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.archive-filter-marker:hover,
.archive-filter-marker:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Structural transforms belong to the chrome, never to a symbol transition. */
.detail-neighbors {
  transform: translateY(-50%) !important;
}

/* Small/Large scale navigation remains legible on every viewport. */
.scroll-cue {
  gap: 8px;
  min-height: 30px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.scroll-cue span { display:inline !important; }
.scroll-cue svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
}

/* Native scroll is untouched. Only artwork trails, capped at two pixels. */
html[data-archive-scroll-trailing="true"] .symbol-grid .symbol-art {
  transform: translate3d(0, var(--archive-scroll-trail, 0px), 0);
  will-change: transform;
}

@media (max-width:760px) {
  .archive-filter-marker { margin-right:6px; }
  .scroll-cue {
    gap:6px;
    min-height:30px;
    font-size:12px;
  }
  .scroll-cue svg {
    width:17px !important;
    height:17px !important;
    flex-basis:17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-archive-xdoc="1"]::view-transition-group(root),
  html[data-archive-xdoc="1"]::view-transition-group(symbol-shared),
  html[data-archive-xdoc="1"]::view-transition-old(root),
  html[data-archive-xdoc="1"]::view-transition-new(root) {
    animation-duration:1ms !important;
    animation-delay:0ms !important;
  }
  html[data-archive-scroll-trailing="true"] .symbol-grid .symbol-art {
    transform:none;
    will-change:auto;
  }
}