/* =====================================================
   INTERACTIVE SHOWCASE : IMAGE (crossfade + séparateurs)
===================================================== */

.showcase-image{
  width: 50%;
  aspect-ratio: 4/3;
  max-height: 900px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #140804;
}

.showcase-main-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateZ(0);
  transition: opacity .28s var(--ease);
}

.showcase-main-img.is-front{
  opacity: 1;
}

.showcase-image::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2px;
  background: var(--line-gold);
  pointer-events: none;
  z-index: 3;
}

.showcase-image::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(230,214,158,0.55) 12%,
    rgba(230,214,158,1) 50%,
    rgba(230,214,158,0.55) 88%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

.interactive-showcase.reverse .showcase-image::after{
  left: 0;
  right: auto;
}