/* Project pagination transitions */
.project-item {
  transition: opacity .35s ease, transform .35s ease;
}
.project-item.is-hidden {
  display: none !important;
}
.project-item.is-fading-out {
  opacity: 0;
  transform: translateY(8px);
}
.project-item.is-fading-in {
  opacity: 0;
  transform: translateY(8px);
}
.project-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pagination button styling (keeps your current style vibe) */
.pagination-area ul li {
  cursor: pointer;
  user-select: none;
}
.pagination-area ul li.disabled {
  opacity: .4;
  pointer-events: none;
}


/* before and after */
.comparison-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: ew-resize;
}

.comparison-slider img {
    width: 100%;
    display: block;
    user-select: none;
    pointer-events: none;
}

.resize {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    height: 100%;
}

.divider {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 3px;
    background: #fff;
    z-index: 5;
}

.handle {
    position: absolute;
    top: 50%;
    left: -12px;
    width: 24px;
    height: 24px;
    background: #FF5E14;
    border-radius: 50%;
    transform: translateY(-50%);
}

.label {
    position: absolute;
    top: 20px;
    padding: 8px 16px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-weight: 600;
    z-index: 10;
}

.label.after { right:20px; }
.label.before { left:20px; }