html, body {scrollbar-gutter: stable;}

h1, h2, h3 {text-rendering: optimizeLegibility;}

/* .active { background: var(--color-peach);} */

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;
}

/* Animation keyframes */
@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%);
    }

    100% {
        background-color: rgb(0 0 0 / 50%);
    }
}

/* shine btn */
@keyframes shine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.shine {
  position: relative;
  overflow: hidden;
}

.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 2s infinite;
}
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-full { transform: translateY(100%); }
.translate-y-0 { transform: translateY(0); }



/* 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);
}

#scheme-image-inner {
  position: relative;
  width: 4094px;
  height: 2304px;
  background: url(../../assets/img/map-large.webp) no-repeat center / contain;
}

.marker {
transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: auto;
}

pinch-zoom {
  --zoom: 1;
}

pinch-zoom .marker {
  scale: calc(1 / var(--zoom));
}

@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;
  }
}


}