/* ONLYDROP v98 — Project previews fill their card from edge to edge.
   Keep the 1.4% breathing movement; prioritize card width instead of contain.
   Some vertical cropping is intentional for images with a different aspect ratio. */
html body #home .category-menu .cat-projects .category-slide {
  isolation: isolate;
  background: #111820 !important;
}
html body #home .category-menu .cat-projects .category-slide[data-slide-index="0"] {
  --project-preview-bg: url("assets/previews/groove%20way.png");
}
html body #home .category-menu .cat-projects .category-slide[data-slide-index="1"] {
  --project-preview-bg: url("assets/previews/experimento.png");
}
html body #home .category-menu .cat-projects .category-slide[data-slide-index="2"] {
  --project-preview-bg: url("assets/previews/devotus%20anima.jpg");
}
html body #home .category-menu .cat-projects .category-slide::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--project-preview-bg);
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(.53) saturate(.8);
  transform: scale(1.03);
}
html body #home .category-menu .cat-projects .category-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,12,18,.20), transparent 30%, transparent 70%, rgba(7,12,18,.20));
}
html body #home .category-menu .cat-projects .category-slide img {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  animation: none !important;
  will-change: auto !important;
}
html body #home .category-menu .cat-projects .category-slide.is-active img {
  animation: odProjectGentleZoom 7.2s cubic-bezier(.2,.65,.3,1) both !important;
  will-change: transform !important;
}
@keyframes odProjectGentleZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.014); }
}
html.motion-paused body #home .category-menu .cat-projects .category-slide.is-active img {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #home .category-menu .cat-projects .category-slide.is-active img {
    animation: none !important;
    transform: scale(1) !important;
  }
}

/* Experimento: give priority to the characters in the lower part of the artwork. */
html body #home .category-menu .cat-projects .category-slide[data-slide-index="1"] img {
  object-position: 50% 88% !important;
}
html body #home .category-menu .cat-projects .category-slide[data-slide-index="1"]::before {
  background-position: 50% 88% !important;
}