/* Material details inherit the approved collector, pill and type system. */
.detail-collector {
  rotate: var(--detail-axis-x, 1) var(--detail-axis-y, 0) 0 var(--detail-angle, 0deg);
  transition: rotate .1s linear;
}
/* The compact collection retired the old tilt with stronger neutral rules.
   Restore only the response; the resting grid, size and angle stay unchanged. */
#work .study-item:has(.detail-collector) { perspective: 900px; }
#work .study-item .collector.detail-collector {
  rotate: var(--detail-axis-x, 1) var(--detail-axis-y, 0) 0 var(--detail-angle, 0deg);
  transition: rotate .08s linear;
}
#work .study-item .collector.detail-collector::after {
  display: block;
  z-index: 2;
}
#work .collector.detail-collector > img {
  scale: 1;
  transition: scale .7s var(--ease), filter .3s var(--ease);
}
#work .collector.detail-collector.detail-active > img { scale: 1.025; }
#work .collector.detail-collector > .film-play {
  translate: var(--detail-play-x, 0px) var(--detail-play-y, 0px);
}
.detail-collector::after {
  inset: -45%;
  background: linear-gradient(115deg,
    transparent 39%,
    rgba(212,162,74,.12) 46%,
    rgba(244,239,230,.25) 50%,
    rgba(158,109,233,.14) 54%,
    transparent 61%);
  opacity: var(--detail-foil-opacity, 0);
  transform: translateX(var(--detail-foil-x, 0%));
  mix-blend-mode: screen;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.detail-pill > span,
.detail-pill > svg {
  translate: var(--detail-label-x, 0px) var(--detail-label-y, 0px);
}
.detail-pill > svg {
  translate: calc(var(--detail-label-x, 0px) * 1.3) var(--detail-label-y, 0px);
}
.detail-pill:active {
  scale: .985;
}
.detail-menu-link {
  position: relative;
}
.detail-menu-window {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.detail-menu-copy,
.detail-menu-echo {
  display: block;
  transition: transform .55s var(--ease);
  transform-origin: 50% 0;
}
.detail-menu-echo {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--bone);
  transform: translateY(110%);
  transition-delay: .025s;
  pointer-events: none;
}
.detail-menu-link::after {
  content: '';
  position: absolute;
  inset: auto 0 -.07em;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .55s var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .detail-menu-link:hover .detail-menu-copy,
  .detail-menu-link:focus-visible .detail-menu-copy { transform: translateY(-110%); }
  .detail-menu-link:hover .detail-menu-echo,
  .detail-menu-link:focus-visible .detail-menu-echo { transform: translateY(0); }
  .detail-menu-link:hover::after,
  .detail-menu-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
html[data-detail-motion="paused"] .detail-collector,
html[data-motion="paused"] .detail-collector { rotate: none; transition: none; }
html[data-detail-motion="paused"] #work .collector.detail-collector,
html[data-motion="paused"] #work .collector.detail-collector { rotate: none; transition: none; }
html[data-detail-motion="paused"] #work .collector.detail-collector > img,
html[data-motion="paused"] #work .collector.detail-collector > img { scale: 1; transition: none; }
html[data-detail-motion="paused"] #work .collector.detail-collector > .film-play,
html[data-motion="paused"] #work .collector.detail-collector > .film-play { translate: none; }
html[data-detail-motion="paused"] .detail-collector::after,
html[data-motion="paused"] .detail-collector::after { opacity: 0; transition: none; }
html[data-detail-motion="paused"] #work .collector.detail-collector::after,
html[data-motion="paused"] #work .collector.detail-collector::after { opacity: 0; transition: none; }
html[data-detail-motion="paused"] .detail-pill > span,
html[data-detail-motion="paused"] .detail-pill > svg,
html[data-motion="paused"] .detail-pill > span,
html[data-motion="paused"] .detail-pill > svg { translate: none; }
html[data-detail-menu-motion="paused"] .detail-menu-link .detail-menu-copy,
html[data-motion="paused"] .detail-menu-link .detail-menu-copy { transform: none; transition: none; }
html[data-detail-menu-motion="paused"] .detail-menu-link .detail-menu-echo,
html[data-motion="paused"] .detail-menu-link .detail-menu-echo { transform: translateY(110%); transition: none; }
html[data-detail-menu-motion="paused"] .detail-menu-link::after,
html[data-motion="paused"] .detail-menu-link::after { transform: scaleX(0); transition: none; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), (forced-colors: active) {
  .detail-collector { rotate: none; transition: none; }
  .detail-collector::after { opacity: 0; transition: none; }
  .detail-pill > span, .detail-pill > svg { translate: none; }
  .detail-menu-copy { transform: none !important; transition: none; }
  .detail-menu-echo { transform: translateY(110%) !important; transition: none; }
  .detail-menu-link::after { transform: scaleX(0) !important; transition: none; }
  #work .study-item .collector.detail-collector { rotate: none; transition: none; }
  #work .study-item .collector.detail-collector::after { opacity: 0; transition: none; }
  #work .collector.detail-collector > img { scale: 1; transition: none; }
  #work .collector.detail-collector > .film-play { translate: none; }
}