#showcase-axis {
  position: relative;
  width: 100%;
  height: 100%;
}

.axis-item{
  position: absolute;
  z-index: 1;
  /* placement seulement (injecté JS) */
  transform: var(--base-transform, translate(-50%,-50%));
  transform-origin: center center;
  will-change: transform;
}

/* l'élément qui scale (séparé) */
.showcase-link {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform, background-color;
}

/* transitions UNIQUEMENT sur le scale, pas sur le placement */
#showcase-axis.is-interactive .showcase-link {
  transition:
    transform 300ms ease,
    background-color 300ms ease;
}

#showcase-axis.is-interactive .axis-item:hover{
  z-index: 999;
}

#showcase-axis.is-interactive .axis-item:hover .showcase-link{
  transform: scale(1.2);
  background-color: rgb(200, 200, 200);
}


.showcase-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.8;
  filter: drop-shadow(10px 4px 20px rgba(0,0,0,0.3));
}
@media (max-width: 768px) {
  .showcase-media {
    filter: drop-shadow(10px 4px 2.5vw rgba(0,0,0,0.3));
  }
}

.showcase-poster,
.showcase-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ton swap poster si tu l'utilises */
.showcase-poster {
  opacity: 1;
  transition: opacity 200ms linear;
}
.showcase-media.is-ready .showcase-poster {
  opacity: 0;
  pointer-events: none;
}

.showcase-scroll{
  height: calc(100svh - var(--space-6));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
}
.showcase-scroll.is-scrolling {
  scroll-snap-type: none;
}

.showcase-scroll::-webkit-scrollbar{ display: none; }

/* Chaque vue prend 1 écran */
#showcase-axis,
#projects-index{
  height: calc(100svh - var(--space-6));
  scroll-snap-align: start;
}