:root{
  --efp-gap: 14px;
  --efp-duration: 70s;
  --efp-columns: 4;
  --efp-height: 80vh;
  --efp-delay: 0s;
}

/* container */
.efp-carousel-container{
  position: relative;
  width: 100%;
  height: var(--efp-height);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--efp-columns), minmax(0, 1fr));
  gap: var(--efp-gap);
  overflow: hidden;

  /* ✅ main fade: to TRANSPARENT (no dark overlay) */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
}

/* ✅ remove old overlay blocks completely (if they exist in HTML) */
.efp-carousel-fade{ display:none !important; }

.efp-carousel-col{
  display:flex;
  flex-direction:column;
  gap: var(--efp-gap);
  transform: translate3d(0,0,0);
  will-change: transform;

  /* paused by default; JS toggles .efp-is-on */
  animation-play-state: paused;
  animation-delay: var(--efp-delay);
}

.efp-carousel-container.efp-is-on .efp-carousel-col{
  animation-play-state: running;
}

.efp-col-up{ animation: efp-scroll-up var(--efp-duration) linear infinite; }
.efp-col-down{ animation: efp-scroll-down var(--efp-duration) linear infinite; }

.efp-carousel-item{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  text-decoration:none !important;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.efp-carousel-item img{
  width:100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  filter: brightness(.92);
  transition: transform .35s ease, filter .35s ease;
}

@media (hover:hover){
  .efp-carousel-item:hover img{
    transform: scale(1.06);
    filter: brightness(1);
  }
}

/* Seamless loop */
@keyframes efp-scroll-up{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(0, calc(-50% - var(--efp-gap) / 2), 0); }
}
@keyframes efp-scroll-down{
  0%{ transform: translate3d(0, calc(-50% - var(--efp-gap) / 2), 0); }
  100%{ transform: translate3d(0,0,0); }
}

@media (max-width: 768px){
  .efp-carousel-container{
    --efp-columns: 3;
    --efp-duration: 20s;
    height: min(72vh, 720px);
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .efp-carousel-col{
    animation: none !important;
    transform: none !important;
  }
}
.efp-carousel-item{ cursor: default; }