/* vondrei — case motion (fail-safe)
   Rule: Print cases with click-to-enlarge (lightbox).
   Not for app/web cases — no lightbox, no hover-zoom there.

   Hover zoom only on lightbox targets:
     img[data-vdr-lb]  OR  a[data-vdr-lb] > img
   Never on .vdr-hero.

   Reveals: JS adds .vdr-reveal then arms html.vdr-case-motion.
   Without those, content stays fully visible.
*/

#vdr-case .vdr-bento figure:has([data-vdr-lb]),
#vdr-case .vdr-year-grid figure:has([data-vdr-lb]) {
  overflow: hidden;
}

#vdr-case img[data-vdr-lb],
#vdr-case a[data-vdr-lb] img {
  transition: transform .35s ease;
  transform-origin: center center;
}

#vdr-case figure:hover img[data-vdr-lb],
#vdr-case figure:hover a[data-vdr-lb] img,
#vdr-case a[data-vdr-lb]:hover img {
  transform: scale(1.02);
}

@keyframes vdr-reveal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vdr-reveal-in-hero {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(1.012);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.vdr-case-motion #vdr-case .vdr-reveal:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

html.vdr-case-motion #vdr-case .vdr-reveal.vdr-reveal--hero:not(.is-in) {
  transform: translate3d(0, 12px, 0) scale(1.012);
}

html.vdr-case-motion #vdr-case .vdr-reveal.is-in {
  animation: vdr-reveal-in .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--d, 0ms);
}

html.vdr-case-motion #vdr-case .vdr-reveal.vdr-reveal--hero.is-in {
  animation-name: vdr-reveal-in-hero;
}

html.vdr-case-motion #vdr-case .vdr-reveal.is-in:hover img[data-vdr-lb],
html.vdr-case-motion #vdr-case .vdr-reveal.is-in:hover a[data-vdr-lb] img,
html.vdr-case-motion #vdr-case .vdr-reveal.is-in a[data-vdr-lb]:hover img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  html.vdr-case-motion #vdr-case .vdr-reveal:not(.is-in),
  html.vdr-case-motion #vdr-case .vdr-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  #vdr-case img[data-vdr-lb],
  #vdr-case a[data-vdr-lb] img {
    transition: none !important;
  }
  #vdr-case figure:hover img[data-vdr-lb],
  #vdr-case figure:hover a[data-vdr-lb] img,
  #vdr-case a[data-vdr-lb]:hover img {
    transform: none !important;
  }
}