/* ==========================================================================
   1. ОБЩИЙ КОНТЕЙНЕР СЕКЦИИ (.about)
   ========================================================================== */
.about {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    isolation: isolate;
    overflow: hidden;
    position: relative;
    padding: clamp(30px, calc(30px + (50 - 30) * ((100vw - 360px) / (768 - 360))), 50px) 20px clamp(80px, calc(80px + (180 - 80) * ((100vw - 360px) / (768 - 360))), 180px);
    gap: 80px;
}

@media (min-width: 768px) {
    .about {
        padding-top: clamp(50px, calc(50px + (60 - 50) * ((100vw - 768px) / (1280 - 768))), 60px);
        padding-bottom: clamp(180px, calc(180px + (290 - 180) * ((100vw - 768px) / (1280 - 768))), 290px);
    }
}

@media (min-width: 1280px) {
    .about {
        padding: clamp(60px, calc(60px + (80 - 60) * ((100vw - 1280px) / (1920 - 1280))), 80px) clamp(60px, calc(60px + (322 - 60) * ((100vw - 1280px) / (1920 - 1280))), 322px);
        padding-bottom: clamp(290px, calc(290px + (346 - 290) * ((100vw - 1280px) / (1920 - 1280))), 346px);
    }
}

/* ==========================================================================
   2. ШАПКА (about__header, about__description)
   ========================================================================== */
.about__header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 28px;
}

@media (min-width: 768px) {
    .about__header {
        margin-bottom: calc(197px + (423 - 197) * ((100vw - 768px) / (1280 - 768)));
    }
}

@media (min-width: 1280px) {
    .about__header {
        margin-bottom: calc(423px + (392 - 423) * ((100vw - 1280px) / (1920 - 1280)));
    }
}

@media (min-width: 1920px) {
    .about__header {
        margin-bottom: 392px;
    }
}

.about__title {
    text-align: center;
}

.about__description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

@media (min-width: 768px) {
    .about__description {
        max-width: calc(400px + (460 - 400) * ((100vw - 768px) / (1280 - 768)));
        margin-top: calc(72px + (85 - 72) * ((100vw - 768px) / (1280 - 768)));
        margin-left: calc(328px + (590 - 328) * ((100vw - 768px) / (1280 - 768)));
    }
}

@media (min-width: 1280px) {
    .about__description {
        max-width: calc(460px + (540 - 460) * ((100vw - 1280px) / (1920 - 1280)));
        margin-top: calc(85px + (120 - 85) * ((100vw - 1280px) / (1920 - 1280)));
        margin-left: calc(590px + (648 - 590) * ((100vw - 1280px) / (1920 - 1280)));
        margin-right: 170px;
    }
}

@media (min-width: 1920px) {
    .about__description {
        max-width: 540px;
        margin-top: 120px;
        margin-left: 648px;
    }
}

/* ==========================================================================
   4. ФОНОВЫЙ ТЕКСТ (SVG)
   ========================================================================== */
.about__bg-text1,
.about__bg-text2 {
    display: none;
}

.about__bg-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 768px) {

    .about__bg-text1,
    .about__bg-text2 {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        width: 100%;
        padding: 0 20px;
        pointer-events: none;
    }

    .about__bg-text1 {
        top: calc(180px + (230 - 180) * ((100vw - 768px) / (1280 - 768)));
    }

    .about__bg-text2 {
        top: calc(600px + (845 - 600) * ((100vw - 768px) / (1280 - 768)));
    }
}

@media (min-width: 1280px) {

    .about__bg-text1,
    .about__bg-text2 {
        padding: 0 60px;
    }

    .about__bg-text1 {
        top: calc(230px + (290 - 230) * ((100vw - 1280px) / (1920 - 1280)));
    }

    .about__bg-text2 {
        top: calc(845px + (865 - 845) * ((100vw - 1280px) / (1920 - 1280)));
    }
}

@media (min-width: 1920px) {

    .about__bg-text1,
    .about__bg-text2 {
        padding: 0 322px;
    }

    .about__bg-text1 {
        top: 290px;
    }

    .about__bg-text2 {
        top: 865px;
    }
}

/* ==========================================================================
   5. ДЕКОРАТИВНЫЕ ИЗОБРАЖЕНИЯ (Rider, Bicycle, Krutit, Helms)
   ========================================================================== */

/* --- Rider --- */
.about__image-rider {
    display: none;
    position: absolute;
    z-index: 1;
}

@media (min-width: 768px) {
    .about__image-rider {
        display: block;
        width: calc(377px + (465 - 377) * ((100vw - 768px) / (1280 - 768)));
        top: calc(152px + (160 - 152) * ((100vw - 768px) / (1280 - 768)));
        left: calc(-56px + (60 - (-56)) * ((100vw - 768px) / (1280 - 768)));
    }
}

@media (min-width: 1280px) {
    .about__image-rider {
        width: calc(465px + (551 - 465) * ((100vw - 1280px) / (1920 - 1280)));
        top: calc(160px + (180 - 160) * ((100vw - 1280px) / (1920 - 1280)));
        left: calc(60px + (280 - 60) * ((100vw - 1280px) / (1920 - 1280)));
    }
}

@media (min-width: 1920px) {
    .about__image-rider {
        width: 551px;
        top: 180px;
        left: 280px;
    }
}

/* --- Bicycle --- */
.about__image-bicycle {
    display: none;
    position: absolute;
    z-index: 1;
}

@media (min-width: 768px) {
    .about__image-bicycle {
        display: block;
        width: calc(454px + (496 - 454) * ((100vw - 768px) / (1280 - 768)));
        top: calc(620px + (890 - 620) * ((100vw - 768px) / (1280 - 768)));
        right: calc(-155px + (37 - (-155)) * ((100vw - 768px) / (1280 - 768)));
    }
}

@media (min-width: 1280px) {
    .about__image-bicycle {
        width: calc(496px + (590 - 496) * ((100vw - 1280px) / (1920 - 1280)));
        top: calc(890px + (900 - 890) * ((100vw - 1280px) / (1920 - 1280)));
        right: calc(37px + (271 - 37) * ((100vw - 1280px) / (1920 - 1280)));
    }
}

@media (min-width: 1920px) {
    .about__image-bicycle {
        width: 590px;
        top: 900px;
        right: 271px;
    }
}

/* --- Krutit --- */
.about__image-krutit {
    display: none;
    position: absolute;
    z-index: 1;
}

@media (min-width: 768px) {
    .about__image-krutit {
        display: block;
        width: 243px;
        top: 1020px;
        right: 340px;
    }
}

@media (min-width: 1280px) {
    .about__image-krutit {
        width: 440px;
        top: 490px;
        right: 190px;
    }
}

@media (min-width: 1920px) {
    .about__image-krutit {
        width: 550px;
        top: 530px;
        right: 397px;
    }
}

.reveal {
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1s ease-out;
    will-change: transform, opacity;
}

.reveal--bottom {
    transform: translateY(60px);
}

.reveal--left {
    transform: translateX(-150px);
}

.reveal--right {
    transform: translateX(150px);
}

.reveal--active {
    opacity: 1;
    transform: translate(0, 0);
}

.about__bg-text1.reveal--bottom:not(.reveal--active),
.about__bg-text2.reveal--bottom:not(.reveal--active),
.routes__bg-text.reveal--bottom:not(.reveal--active) {
    transform: translate(-50%, calc(-50% + 60px)) !important;
}

.about__bg-text1.reveal--active,
.about__bg-text2.reveal--active,
.routes__bg-text.reveal--active {
    transform: translate(-50%, -50%) !important;
}

@media (min-width: 1280px) {
    .details__bicycle.reveal--right:not(.reveal--active) {
        transform: translate(calc(50% + 150px), -50%) !important;
    }

    .details__bicycle.reveal--active {
        transform: translate(50%, -50%) !important;
    }
}