/* Sequential work stages: the selected step becomes a large, readable peach
   callout while the image panel changes in sync. */
html body .stages.vo-stages-sequence .ul_remont.stb li {
    position: relative;
    z-index: 1;
    transition: z-index .01s linear;
}

html body .stages.vo-stages-sequence .ul_remont.stb li > a {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 88%;
    padding: 3px 7px;
    border-radius: 8px;
    transform: translateZ(0) scale(1);
    transform-origin: left center;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), background-color .55s ease, box-shadow .55s ease, color .55s ease !important;
}

html body .stages.vo-stages-sequence .ul_remont.stb li > a span:first-child {
    flex: 0 0 auto;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), background-color .55s ease, box-shadow .55s ease !important;
}

html body .stages.vo-stages-sequence .ul_remont.stb li.vo-stage-item-active {
    z-index: 8;
}

html body .stages.vo-stages-sequence .ul_remont.stb li.vo-stage-item-active > a {
    background: rgba(255, 170, 131, .25);
    color: #283c37 !important;
    box-shadow: 0 7px 18px rgba(226, 140, 98, .28), 0 0 0 2px rgba(255, 170, 131, .38);
    transform: translateZ(0) scale(1.55);
}

html body .stages.vo-stages-sequence .ul_remont.stb li.vo-stage-item-active > a span:first-child {
    background: #ffaa83;
    box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 3px 8px rgba(91, 61, 48, .20);
    transform: scale(1.16);
}

html body .stages.vo-stages-sequence .stb-tab .tab-pane.rem img {
    display: block;
    transform: translateZ(0) scale(1);
    transform-origin: 50% 50%;
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter 1.1s ease !important;
    will-change: transform, filter;
}

html body .stages.vo-stages-sequence .stb-tab .tab-pane.rem:hover img {
    transform: translateZ(0) scale(1.07);
    filter: saturate(1.05) contrast(1.02);
}

html body .stages.vo-stages-sequence .stb-tab .tab-pane.rem.vo-stage-visual-active img {
    animation: vo-stage-photo-arrive .85s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes vo-stage-photo-arrive {
    0% { opacity: .55; transform: translateZ(0) scale(.94); filter: saturate(.9); }
    100% { opacity: 1; transform: translateZ(0) scale(1); filter: saturate(1); }
}

@media (max-width: 767px) {
    html body .stages.vo-stages-sequence .ul_remont.stb li.vo-stage-item-active > a {
        transform: translateZ(0) scale(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .stages.vo-stages-sequence .ul_remont.stb li > a,
    html body .stages.vo-stages-sequence .ul_remont.stb li > a span:first-child,
    html body .stages.vo-stages-sequence .stb-tab .tab-pane.rem img {
        transition: none !important;
        animation: none !important;
    }
}