/* Add after ai-dashboard.css. Scoped to archive cards; no inventory changes. */
#study-grid .study-open:focus-visible {
  outline: 2px solid #b9faff;
  outline-offset: 5px;
}
#study-grid .study-media { isolation: isolate; }
#study-grid .study-media::after {
  z-index: 3;
  border: 1px solid transparent;
  background: radial-gradient(240px circle at var(--aigh-x,50%) var(--aigh-y,50%), #e7ffff 0%, #7de8f2 30%, transparent 75%) border-box;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 180ms ease;
}
#study-grid .study-open:focus-visible .study-media::after,
#study-grid .study-open.aigh-active .study-media::after { opacity: 1; }
#study-grid .study-open:focus-visible .study-media {
  border-color: #a6eff5;
  box-shadow: 0 0 0 1px #b9faff55;
}
/* Titles remain readable at rest; reveal is an emphasis, never hidden content. */
#study-grid .study-caption h3 { transition: color 220ms ease, transform 220ms ease; }
#study-grid .study-open:focus-visible .study-caption h3,
#study-grid .study-open.aigh-active .study-caption h3 { color: #efffff; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  #study-grid[data-layout="gallery"] .study-media {
    transform: perspective(1000px) rotateX(var(--aigh-rx,0deg)) rotateY(var(--aigh-ry,0deg));
    transition: transform 180ms ease-out, border-color 180ms ease, box-shadow 180ms ease;
  }
  #study-grid[data-layout="gallery"] .aigh-active .study-media {
    box-shadow: 0 0 12px #75eaf21a;
  }
  #study-grid .study-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, #eaffff14 49%, transparent 63%);
    transform: translateX(-115%);
    opacity: 0;
  }
  #study-grid[data-layout="gallery"] .aigh-active .study-media::before,
  #study-grid[data-layout="gallery"] .study-open:focus-visible .study-media::before {
    animation: aigh-sweep 620ms ease-out 1;
  }
  #study-grid .aigh-active .study-caption h3,
  #study-grid .study-open:focus-visible .study-caption h3 { transform: translateY(-2px); }
  /* Disable the old zoom/brightness effect so the artwork is not cropped. */
  #study-grid .study-open:hover .study-media img { transform: none; filter: none; }
}
@keyframes aigh-sweep {
  0% { transform: translateX(-115%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}
@media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) {
  #study-grid .study-media, #study-grid .study-media img,
  #study-grid .study-caption h3, #study-grid .study-inspect, #study-grid .card-arrow {
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
  #study-grid .study-media::before { animation: none !important; display: none; }
  #study-grid .study-media::after { transition: none; }
  #study-grid .study-card.is-new { animation: none !important; }
}
@media (forced-colors:active) {
  #study-grid .study-media::before, #study-grid .study-media::after { display: none; }
  #study-grid .study-open:focus-visible { outline-color: Highlight; }
}

/* Scroll depth for the existing archive. Translates the intact image/caption link,
   never the image inside its crop. All cards in a column share one offset. No document-flow or column-width changes. */
#study-grid[data-layout="gallery"][data-aip-bound] .study-open {
  translate: 0 var(--aip-y, 0px);
}
#study-grid[data-layout="gallery"][data-aip-bound] .study-open.aip-visible {
  will-change: translate;
}
#study-grid[data-layout="gallery"][data-aip-bound]:has(.study-open:focus-visible) .study-open {
  translate: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #study-grid[data-layout="gallery"][data-aip-bound] .study-open:hover .study-media img {
    transform: scale(1.012);
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #study-grid[data-aip-bound] .study-open { translate: none !important; will-change: auto !important; }
}