/**
 * Анимация рукописного подчеркивания
 * Стили для эффекта подчеркивания текста, как на сайте ДОМ.РФ
 */

.svg-anima {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    z-index: 0;
}

.svg-anima svg {
    position: absolute;
    bottom: -15px;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* Корректировка позиции для разных размеров экрана */
.svg-anima__desktop {
    bottom: -25px;
    left: -5px;
}

.svg-anima__tablet {
    bottom: -22px;
    left: -4px;
}

.svg-anima__mobile {
    bottom: -20px;
    left: -3px;
}

/* Desktop версия */
.svg-anima__desktop {
    display: block;
}

.svg-anima__tablet,
.svg-anima__mobile {
    display: none;
}

/* Tablet версия */
@media (max-width: 1024px) {
    .svg-anima__desktop {
        display: none;
    }
    
    .svg-anima__tablet {
        display: block;
    }
}

/* Mobile версия */
@media (max-width: 768px) {
    .svg-anima__tablet {
        display: none;
    }
    
    .svg-anima__mobile {
        display: block;
    }
}

/* Анимация появления линии */
.svg-anima.active svg path {
    animation: drawPath 1.5s ease-in-out forwards;
}

@keyframes drawPath {
    from {
        stroke-dashoffset: var(--path-length, 950);
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Задержка анимации для более плавного эффекта */
.svg-anima.active svg path {
    animation-delay: 0.2s;
}

/* Устанавливаем длину пути для каждого размера */
.svg-anima__desktop path {
    --path-length: 950;
}

.svg-anima__tablet path {
    --path-length: 800;
}

.svg-anima__mobile path {
    --path-length: 750;
}