html, body {scrollbar-gutter: stable;}

/* * {
  outline: .5px solid #ffffff;
} */

/* dialog */
/* dialog {
    animation: fade-out 0.5s ease-out;
    will-change: transform, opacity;

}
dialog[open] {
    will-change: transform, opacity;
    animation: slide-in .3s ease-out;
}

dialog[open]::backdrop {
    transition: background-color .3s ease-out;
    background-color: rgb(0 0 0 / 50%);
    animation: backdrop-fade-in .3s ease-out forwards;
}
@keyframes slide-in {
    from {
        transform: translate3D(0, -30px, 0);
        opacity: 0;
    }
    to {
        transform: translate3D(0, 0, 0);
        opacity: 1;
    }
}
@keyframes backdrop-fade-in {
    0% {
        background-color: rgb(0 0 0 / 0%);
        backdrop-filter: blur(0);
    }

    100% {
        background-color: rgb(0 0 0 / 50%);
        backdrop-filter: blur(15px);
    }
} */


/* hamburger */
/* .hamburger-icon {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hamburger-icon path {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.hamburger-icon.active #middle-line {
    opacity: 0;
}

.hamburger-icon.active #top-line {
    transform: translate(0, 4.5px) rotate(45deg);
}

.hamburger-icon.active #bottom-line {
    transform: translate(0, -4.5px) rotate(-45deg);
} */

section {
    scroll-margin-top: 120px;
}

.marker {
  position: absolute;
  transform: translate(-50%, -100%);
  transform-origin: center bottom;
  will-change: transform;
  pointer-events: auto;
  width: 30px;
  height: 30px;
  background: url(../../assets/img/pin.svg) no-repeat center / cover;
}



.modal-content ul{
  & a {
    transition: opacity .3s ease-out;
  }
  &:hover a {
    opacity: .5;
  }
  & a:hover {
    opacity: 1;
  }
}

/* main {
  transition: visibility 0s .3s;
}

main.open {
  transition: transform .3s ease-out;
  transform: translateX(140px);
  filter: brightness(.5);
} */


dialog {
    animation: fade-out 0.5s ease-out;
    will-change: transform, opacity;

}
dialog[open] {
    will-change: transform, opacity;
    animation: slide-in .3s ease-out;
}

dialog[open]::backdrop {
    transition: background-color .3s ease-out;
    background-color: rgb(0 0 0 / 50%);
    animation: backdrop-fade-in .3s ease-out forwards;
}





/* 
.dialog {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    background: #00000050;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: background-color .3s ease-out;
    background-color: rgb(0 0 0 / 50%);
    animation: backdrop-fade-in .3s ease-out forwards;
    &.active{
        visibility: visible;
        opacity: 1;
        transition: opacity .3s ease-out;
        .dialog-container {
    will-change: transform, opacity;
    animation: slide-in .3s ease-out;
        }
    }
}
.dialog-container {
    animation: fade-out 0.5s ease-out;
    will-change: transform, opacity;

} */

/* checkbox */
  
  .checkbox .path {
    fill: none;
    stroke: #E5E7EB;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease, stroke .5s ease;
    stroke-dasharray: 241 9999999;
    stroke-dashoffset: 0;
  }
  
  .checkbox input:checked ~ svg .path {
    stroke-dasharray: 70.5096664428711 9999999;
    stroke-dashoffset: -262.2723388671875;
    stroke: #337242;
  }


.close-svg {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
@media (max-width: 480px) {
    .dialog-container {
        width:90%;
        h3 {
            font-size: 1.5rem;
        }
    }
}

    .modal-menu {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 20;
            height: 100vh;
            width: 100%;
            max-width: 500px;
            transform: translateX(-100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
            overflow-y: auto;
        }

    .modal-menu.open {
        transform: translateX(0);
    }


  /* Кастомные анимации для более сложных эффектов */
        @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scaleXIn {
            from {
                opacity: 0;
                transform: scaleX(0);
            }
            to {
                opacity: 1;
                transform: scaleX(1);
            }
        }

        .animate-slide-in-left {
            animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .animate-scale-x-in {
            animation: scaleXIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Улучшенные переходы */
        .transition-smooth {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .transition-fast {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Анимация гамбургера
        .hamburger-active #top-line {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger-active #middle-line {
            opacity: 0;
        }

        .hamburger-active #bottom-line {
            transform: rotate(-45deg) translate(7px, -6px);
        } */

        /* .hamburger-icon path {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
        } */

        /* Стили для поочередной анимации пунктов меню */
        .menu-item {
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .menu-item.animate {
            opacity: 1;
            transform: translateX(0);
        }

        .info-block {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .info-block.animate {
            opacity: 1;
            transform: translateY(0);
        }

        .divider {
            opacity: 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .divider.animate {
            opacity: 1;
            transform: scaleX(1);
        }

@media (max-width: 1024px) {
.map-wrapper {
  position: relative;
  &::after {
    content: '';
    inset: 0;
    position: absolute;
    background: rgba(0,0,0,0.3) url(../../assets/img/tap.svg) no-repeat center;
    /* background-color: rgba(0,0,0,0.3); */
    transition: background 0.5s ease-out;
  }
  &.is-active::after {
    background-color: transparent;
    background-image: none;
    pointer-events: none;
  }
}