/* Highlight Slider Effects */
.highlight-slide-event {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transform: scale(1.05);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}
.highlight-slide-event.active {
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
    transform: scale(1);
}
.dot-active {
    width: 24px !important;
    background-color: #ea57c4 !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease;
}