/* Decorative images have their own layer; text and controls stay opaque. */
[data-card-art] {
  --card-art-opacity: .58;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.card-art {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(100%, 30rem);
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--card-art-opacity);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.home-interests .card-art img,
.vibe-lab .card-art img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 78% 52%;
  transition: none;
}
[data-theme="dark"] [data-card-art] { --card-art-opacity: .24; }
[data-theme="firework"] [data-card-art] { --card-art-opacity: .22; }
.home-interests__project .card-art,
.home-interests__post .card-art {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .card-art { transition: opacity .18s ease; }
}
@media (forced-colors: active) {
  .card-art { display: none; }
}