/* ----------------- استایل تغییر مود صفحه ----------------- */
.mood-changer-blur{
    
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: var(--transition-10);
}



/* ----------------- استایل های کانتینر ----------------- */
.container {
    width: calc(100% - clamp(32px, 8vw, 128px));
    height: calc(100% - clamp(32px, 8vw, 128px));
    position: relative;
    box-shadow: var(--base-box-shadow);
    overflow: hidden;
}

/* ----------------- استایل تغییر اسلاید----------------- */
.slider-changer {
    width: 105%;
    height: 102%;
    position: absolute;
    left: -1%;
    top: -1%;
    overflow: hidden;
    z-index: 20;
    pointer-events: none;
    will-change: transform;
}

.slider-changer-parts {
    transform: translateX(-102%);
    width: 110%;
    height: 21%;
    background-color: var(--bg-color);
    position: absolute;
    will-change: transform;
}

.slider-changer.active .slider-changer-parts {
    transform: translateX(-4%);
    will-change: transform;
}

.p-1 {
    transition: var(--transition-6);
    top: -2px;
    left: 0;
}

.p-2 {
    transition: var(--transition-7);
    top: 20%;
    left: 0;
}

.p-3 {
    transition: var(--transition-8);
    top: 40%;
    left: 0;

}

.p-4 {
    transition: var(--transition-9);
    top: 60%;
    left: 0;
}

.p-5 {
    transition: var(--transition-10);
    top: 80%;
    left: 0;
}