@font-face {
  font-family: 'Helmswald';
  src: url('./Fonts/Helmswald.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTRemark';
  src: url('./Fonts/LTRemark-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTRemark';
  src: url('./Fonts/LTRemark-Bold.otf') format('opentype');
   font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTRemark';
  src: url('./Fonts/LTRemark-BoldItalic.otf') format('opentype');
   font-weight: bold; 
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'LTRemark';
  src: url('./Fonts/LTRemark-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Olietta';
  src: url('./Fonts/ofont.ru_Olietta script Lyrica.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
 
  vertical-align: baseline;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

body {
  background-color: rgba(53, 25, 55, 1);
  font-family: 'LTRemark';
  line-height: 1;
}
body tspan, body text{
     font-family: 'LTRemark';
       line-height: 1;
 will-change: transform;
  font-variant-ligatures: none; 
   font-kerning: none;
}

 body text[fill="white"] tspan{
   fill: white;
 }

 body tspan{
  font-size: inherit;
 }
 body text[letter-spacing="0.09em"]{
   letter-spacing: 0.09em;
 }
 body text[letter-spacing="-0.01em"]{
   letter-spacing: -0.01em;
 }
 body text[letter-spacing="0em"]{
   letter-spacing:  0.01em;
 }

 body text[font-family="LT Remark"]{
   font-family: 'LTRemark';
 }
 body text[font-family="Helmswald Post"]{
   font-family: 'Helmswald';
 }
 body text[font-family="Helmswald Post"] tspan{
   font-family: 'Helmswald';
 }
 body text[font-family="Olietta script Lyrica"]{
   font-family: 'Olietta';
 }
 body text[font-family="LT Remark"] tspan{
   font-family: 'LTRemark';
   font-weight: bold;
 }
 body text[font-family="Olietta script Lyrica"] tspan{
   font-family: 'Olietta';
   font-weight: bold;
 }
 
body text[font-size="64"]{
     font-size: 64px;
}

body text[font-size="47.3189"]{
     font-size: 47px;
}

body text[font-size="37"]{
     font-size: 37px;
}
 
body text[font-size="14"]{
     font-size: 14px;
}
 
body text[font-size="13"]{
    font-size: 13px;
}
 
body text[font-size="12"]{
    font-size: 12px;
}
 
body text[font-size="11"]{
    font-size: 11px;
    font-weight: 900;
}
 
body text[font-size="10"]{
    font-size: 10px;
}
 
body text[font-size="19.4019"]{
  font-size: 19px;
}
 
body text[font-size="9"]{
  font-size: 9px;
}
 
body text[font-size="9.1588"]{
  font-size: 9px;
}
 
body text[font-size="8"]{
  font-size: 8px;
}
 
body text[font-size="7"]{
  font-size: 7px;
}
 
body text[font-size="7.3195"]{
  font-size: 7px;
}
 
body text[font-size="15.3043"]{
  font-size: 15px;
}
 
body text[font-size="6"]{
  font-size: 6px;
}
 
body text[font-weight="bold"]{
    font-weight: 700;
}
body text[font-weight="bold"] tspan{
    font-weight: 700;
}
body text[font-weight="medium"]{
    font-weight: 500;
}
body text[font-weight="medium"] tspan{
    font-weight: 500;
}
body text[font-style="italic"]{
    font-style: italic;
}
body text[font-style="italic"] tspan{
    font-style: italic;
}
body text[font-style="italic"][font-weight="bold"]{
    font-weight: 400;
}
body text[font-style="italic"][font-weight="bold"] tspan{
    font-weight: 400;
}
 
.map {
  width: 100vw;
  height: 100dvh;
}

.map__zoom {
  position: relative;
  width: 1960px;
  height: 1410px;
}

.map__map {
 width: 1960px;
  height: 1410px;
 
      position: absolute;
    z-index: -1;
 
}
.svg--texts{
  position: absolute;
  inset: 0;
  z-index: 3;
}
 
.svg--ships{
  position:absolute; 
  left:0;
  z-index: 2;
}
.clouds{
  position:absolute; 
  left:0;
  z-index: 1;  
}
.filtered-islands{
  position:absolute; 
  left:0;
  z-index: 1;  
}
.filtered-islands path{
  opacity: 0;
  transition: 0.3s;
}
.text {
  fill: #fff;
  white-space: pre;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  cursor: pointer;
}

.partners {
  position: absolute;
  width: 100%;
  top: 32px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 32px;
  padding-right: 32px;
  z-index: 4;
  padding-right: 120px;
}

.partners_bot {
  top: auto;
  bottom: 32px;
}

.partners__item {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 14%;
}
.partners__item a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.partners_bot .partners__item {
    width: 10%;
    
}
.partners__toggle {
  opacity: 1;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(90, 197, 242, 1);
  transform: scale(var(--app-scale, 1));
}

.partners__item_info-opened .partners__toggle {
  opacity: 1;
  background-color: transparent;
}

.partners__toggle-ico {
  position: relative;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background-color: black;
  pointer-events: none;
}

.partners__item_info-opened .partners__toggle-ico {
  width: 16px;
  background-color: transparent;
}

.partners__toggle-ico::before,
.partners__toggle-ico::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: black;
  border-radius: 4px;
}

.partners__toggle-ico::before {
  top: -6px;
}

.partners__toggle-ico::after {
  bottom: -6px;
}

.partners__item_info-opened .partners__toggle-ico::before {
  top: 0;
  transform: rotate(45deg);
}

.partners__item_info-opened .partners__toggle-ico::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.partners__info {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  border-radius: 10px;
  background-color: #fff;
  padding: 16px;
  transform: scale(var(--app-scale, 1));
  transform-origin: top right;
}

.partners__item_info-opened .partners__info {
  display: block;
}

.zoom-btns {
  display: none;
  position: fixed;
  right: 8px;
  top: 50%;
  z-index: 11111111;
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  .zoom-btns {
    display: none;
  }
}

.zoom-btns__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 5px;
  background-color: #fff;
}

.zoom-btns__btn_in {
  margin-bottom: 16px;
}

.zoom-btns__btn_out {
}

.map__map path {
  z-index: 10000;
  position: relative;
}

.svg_content_one .legend tspan {
  fill: #fff482;
}
.svg_content_one .p {
  stroke: #fff482;
}

.svg_content_two .legend tspan {
  fill: #91c998;
}
.svg_content_two .p {
  stroke: #91c998;
}
.blue_content .p {
  stroke: #83d0f5;
}
.grey_content .p {
  stroke: #9bafbf;
}
.svg_content_thre .legend tspan {
  fill: #b2a0cd;
}

.svg_content_thre .p {
  stroke: #b2a0cd;
}

.svg_content_four .legend tspan {
  fill: #f29fc5;
}

.svg_content_four .p {
  stroke: #f29fc5;
}

.svg_content_five .legend tspan {
  fill: #d1dd77;
}

.svg_content_five .p {
  stroke: #d1dd77;
}

.svg_content_six .legend tspan {
  fill: #78c7c9;
}

.svg_content_six .p {
  stroke: #78c7c9;
}

.svg_content_seven .legend tspan {
  fill: #ed6c77;
}

.svg_content_seven .p {
  stroke: #ed6c77;
}

.svg_content_eight .legend tspan {
  fill: #b164a5;
}

.svg_content_eight .p {
  stroke: #b164a5;
}

.svg_content_nine .legend tspan {
  fill: #80b5c4;
}

.svg_content_nine .p {
  stroke: #80b5c4;
}

.svg_content_ten .legend tspan {
  fill: #fbbd51;
}

.svg_content_ten .p {
  stroke: #fbbd51;
}

.svg_content_elev .legend tspan {
  fill: #e5ddaa;
}

.svg_content_elev .p {
  stroke: #e5ddaa;
}

.svg_content_tw .legend tspan {
  fill: #a0c96d;
}

.svg_content_tw .p {
  stroke: #a0c96d;
}

.svg_content_thre2 .legend tspan {
  fill: #509ccd;
}

.svg_content_thre2 .p {
  stroke: #509ccd;
}

.text {
  fill: #fff;
  white-space: pre;
  font-family: 'Moscow Sans';
  font-size: 12.5px;
  font-weight: 400;
  line-height: 14.62px;
  touch-action: pan-x pan-y;
}
.legend text {
  pointer-events: auto;
  cursor: pointer;
  white-space: pre;
  font-family: 'Moscow Sans';
  font-size: 12.5px;
  font-weight: 400;
  line-height: 14.62px;
  touch-action: pan-x pan-y;
}
.partner__mini--wrapp{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 50px;
}
.partner__mini--wrapp .partners__item{
  width: 200px;
  height: 180px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0px;
  aspect-ratio: unset;
}
.partners .partner__mini--wrapp:last-child{
  justify-content: end;
   
}
.partner__content{
  display: flex;
    width: 100%;
    height: 100%;
}
.partners__item--content h1{
 
  font-weight: 600;
  font-style: Bold;
  font-size: 110px;
  line-height: 100%;
  letter-spacing: 3px;
  text-align: center;
  color: rgba(90, 197, 242, 1);
}
.partners__item--content h2{
 
  font-weight: 400;
  font-style: Medium;
  font-size: 90px;
  line-height: 100%;
  letter-spacing: 5%;
  text-align: center;

  color: rgba(90, 197, 242, 1);
}
 
.partners_bot .partner__mini--wrapp .partners__item{
  width: 200px;
  height: 130px;
}
a:visited tspan{
  /*fill: white;*/
}

.navigation__column, .right--navigation{
  display: flex;
  flex-direction: column;
}
.right--navigation{
  width: 90px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: #000000BF;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  z-index: 5;
  padding-top: 20px;
  padding-bottom: 100px;
  padding-left: 10px;
  padding-right: 10px;
}
.top__navigation{
  width: 100%;
}
.top__navigation button{
   outline: none;
   border: 0px;
   height: 80px;
   width:100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   cursor: pointer;
}
.right--navigation img{
  max-width: 100%;
  height: auto;
}
.main__filter{
  width: 100%;
  gap: 20px;
}
.navigation__info{
  gap: 15px;
}

.main__filter div{
     padding: 10px;
     cursor: pointer;
}
.main__filter div, .navigation__info div{
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 10px;
  font-family: LTRemark;
  font-weight: bold;
  font-style: italic;
 
}
.navigation__info .navigation__info--one{
  font-family: Olietta;
  font-size: 22px;
    font-weight: bold;
}
.navigation__info .navigation__info--two{
  font-family: Olietta;
  font-size: 15px;
  font-weight: bold;
}
.main__filter img{
  width: 32px;
  height: 48px;
}

.ship {
  transform-box: fill-box;
  transform-origin: center;
  animation: ship-sway 3s ease-in-out infinite;
  transition: 0.3s;
}


  .result__search{
      background: #000000BF;
        left: 50%;
        top:  50%;
        border-radius: 4px;
        position: absolute;
        width: 550px;
        height: auto;
        min-height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        opacity: 0;
        transform: translate(-50%, -100%);
        transition: 0.3s;
        visibility: hidden;
        z-index: 10;
        flex-shrink: 0;
        color: white;
  }
  .result__search--wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
  }
  .close__result{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
   .result__search.active{
    opacity: 1;
    transform: translate(-50%, -50%);
    visibility: visible;
  }
  .search-result-item img{
    max-width: 100%;
 
  }
 
 
  .serach-content{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
  }
  .search-no-results{
    display: flex;
    flex-direction: column;
    gap: 20px;
        align-items: center;
  }

  .see_in_cart{
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 24px;
    background: radial-gradient(59.96% 67.68% at 50% 50%, rgba(11, 183, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
    margin-top: 30px;
    font-weight: 400;
    font-size: 18px;
    line-height: 118%;
    letter-spacing: 2%;
    text-align: center;
    cursor: pointer;
  }
  .search-no-results p{
  font-weight: 400;
  font-style: Regular;
  font-size: 31px;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  text-align: center;

  }
  .search-no-results span{
    font-family: Olietta;
    font-weight: 700;
    font-style: BoldItalic;
    font-size: 36px;
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
    text-align: center;
  }
  .search-result-item svg{
      flex-shrink: 0;
  }
 
  .search-result-item .result-path{
    display: flex;
    flex-direction: column;
  }
  .holding-iamge{
    max-width: 170px;
  }
  .holding-iamge p{
    font-family: Olietta;
    font-weight: 700;
    font-size: 35px;
    line-height: 110%;
    letter-spacing: 1%;
    text-align: center;
     margin-top: 10px;
  }
  .group-iamge{
    max-width: 90px;
  }
  .group-iamge p{
    font-family: Olietta;
    font-weight: 700;
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0%;
    text-align: center;
    margin-top: 10px;

  }
  .item-iamge img{
    max-width: 50px;
  }
   .item-iamge p{
    font-family: LTRemark;
    font-weight: 700;
    font-style: Bold Italic;
    font-size: 12px;
    line-height: 118%;
    letter-spacing: 0%;
    text-align: center;

   }

   .top-search-content{
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    text-align: center
   }
    .top-search-content h2{
      font-weight: 400;
      font-style: Regular;
      font-size: 31px;
      line-height: 110.00000000000001%;
      letter-spacing: 0%;
      text-align: center;

    }
   .top-search-content img{
    width: 45px;
    height: 27px;
    position: absolute;
    left: 50%;
    top:40px; 
    transform: translateX(-50%);
   }

   .result-name{
    width: 130px;
    padding: 20px;
    border: 1px solid #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
   }
   .result--ship {
    justify-content: center;
   }
   .result--ship  .result-name{
    border: 0px;
    width: 100%;
   }
   .result--ship  .result-name p{
    font-family: Olietta;
    font-weight: 700;
    font-size: 20px;
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
    text-align: center;

   }
  .search--modal{
        background: #000000BF;
        right: 105px;
        top: 40px;
        border-radius: 4px;
        position: absolute;
            width: 260px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        opacity: 0;
        transform: translateX(100%);
        transition: 0.3s;
        visibility: hidden;
        z-index: 10;
        flex-shrink: 0;
  }
  
  .search--modal.active{
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
  }


  .search--modal input{
    background: #FFFFFF4D;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 14px;
    color: #FFFFFF;
    width: 200px;
    outline: none;
  }
  .search--modal div{
    display: flex;
    align-items: center;
    gap: 10px;
  }
 .search--modal button{
  height: 100%;
 }

.info--modal{
    background: #000000BF;
    right: 105px;
    top: 95px;
    border-radius: 4px;
    position: absolute;
    width: 500px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    opacity: 0;
    transform: translateX(100%);
    transition: 0.3s;
    visibility: hidden;
  }
 
.info--modal.active{
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}
.close__modal{
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 3;
   cursor: pointer;
}
.info--modal h3{
  font-family: LTRemark;
  font-weight: 700;
  font-size: 16px;
  line-height: 110%;
  letter-spacing: 0%;
  color: #FFFFFF;
  margin-bottom: 16px;
  opacity: 0.9;
}
.info--modal p{
  font-weight: 400;
  font-size: 14px;
  line-height: 12px;
  letter-spacing: 0%;
  color: #FFFFFF;
  opacity: 0.9;
}
.info--modal a{
  text-decoration: underline;
  color: #FFFFFF;
}
.info--modal ul{
  list-style-type: none;
  margin-bottom: 30px;
 
}
.info--modal li{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0%;
  color: #FFFFFF;
   line-height: 120%;
  opacity: 0.9;
}
.info.active{
      background: radial-gradient(59.96% 67.68% at 50% 50%, rgba(11, 183, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 2px;
}
.search.active{
       background: radial-gradient(59.96% 67.68% at 50% 50%, rgba(11, 183, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 2px; 
}
@keyframes ship-sway {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-2px) rotate(-1deg); }
}

 


.shield {
  transform-box: fill-box;
  transform-origin: 50% 20%; 
  animation: shield-sway 6s ease-in-out infinite;
}

.adindex{
  position: absolute;
  bottom: 50px;
  left: 50px;
}
.partners__item{
  transform-box: fill-box;
  transform-origin: top; 
  animation: partners-sway 6s ease-in-out infinite;
}
 .mainShip{
  position: absolute;
 }
 .mainShip div a{
    position: absolute;
    width: 150px;
    height: 40px;
    left: 150px;
    top: 55%;
 }

@keyframes partners-sway {
   0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  25% {
    transform: translate(1px, -2px) rotate(1deg);
  }
  50% { 
    transform: translate(-1px, -1px) rotate(-1deg); 
  }
  75% {
    transform: translate(0.5px, -2px) rotate(0.5deg);
  }
}


@keyframes shield-sway {
   0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  25% {
    transform: translate(1px, -2px) rotate(1deg);
  }
  50% { 
    transform: translate(-1px, -1px) rotate(-1deg); 
  }
  75% {
    transform: translate(0.5px, -2px) rotate(0.5deg);
  }
}

.clouds image {
  animation: drift linear infinite;
  transform-box: fill-box;
}

@keyframes drift {
  from {
    /* Начинаем движение далеко слева за пределами карты */
    transform: translateX(-100%); 
  }
  to {
    /* Уплываем далеко вправо за пределы карты */
    transform: translateX(2000px); 
  }
}

.clouds image:nth-child(1) { animation-duration: 60s; animation-delay: -5s; }
.clouds image:nth-child(2) { animation-duration: 85s; animation-delay: -15s; }
.clouds image:nth-child(3) { animation-duration: 70s; animation-delay: -30s; }
.clouds image:nth-child(4) { animation-duration: 95s; animation-delay: -10s; }
.clouds image:nth-child(5) { animation-duration: 110s; animation-delay: -50s; }
.clouds image:nth-child(6) { animation-duration: 100s; animation-delay: -0s; }
.clouds image:nth-child(7) { animation-duration: 90s; animation-delay: -20s; }
.clouds image:nth-child(8) { animation-duration: 80s; animation-delay: -30s; }
.clouds image:nth-child(9) { animation-duration: 70s; animation-delay: -10s; }
.clouds image:nth-child(10) { animation-duration: 60s; animation-delay: -15s; }
.clouds image:nth-child(11) { animation-duration: 50s; animation-delay: -35s; }
.clouds image:nth-child(12) { animation-duration: 60s; animation-delay: -5s; }




/* 1. Состояние по умолчанию: приглушаем все элементы, когда какой-то фильтр включен */
.castle--item .castle--shield{
transform-box: fill-box;
transition: 0.3s;
}
body[data-active-filter] .castle--item .castle--shield {
    opacity: 0.2;
    transition:  0.3s ease;
}

/* 2. Подсвечиваем острова (path) */
body[data-active-filter="yellow"] .filtered-islands path[data-color="yellow"],
body[data-active-filter="blue"]   .filtered-islands path[data-color="blue"],
body[data-active-filter="white"]  .filtered-islands path[data-color="white"],
body[data-active-filter="green"]  .filtered-islands path[data-color="green"],
body[data-active-filter="red"]    .filtered-islands path[data-color="red"] {
    opacity: 0.3;
    transition:  0.3s ease;
}

/* 3. Подсвечиваем замки (castle--item) */
/* Если в классе замка есть цвет (castle--green), сопоставляем его с фильтром */
.castle--item.search-active .castle--shield,
body[data-active-filter="yellow"] .castle--item.castle--yellow .castle--shield,
body[data-active-filter="blue"]   .castle--item.castle--blue .castle--shield,
body[data-active-filter="white"]  .castle--item.castle--white .castle--shield,
body[data-active-filter="green"]  .castle--item.castle--green .castle--shield,
body[data-active-filter="red"]    .castle--item.castle--red .castle--shield{
    opacity: 1;
    transform: scale(1.15);
}

body[data-active-filter="yellow"] .castle--item.castle--yellow::after,
body[data-active-filter="blue"]   .castle--item.castle--blue::after,
body[data-active-filter="white"]  .castle--item.castle--white::after,
body[data-active-filter="green"]  .castle--item.castle--green::after,
body[data-active-filter="red"]    .castle--item.castle--red::after{
   content: '';
   background: #FFF6E9;
}
.castle--item{
  z-index: 1;
}
.castle-pulse-glow {
    fill: #FFF6E9;
    opacity: 0;
    filter: blur(8px);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity 0.6s ease; 
    pointer-events: none;
    z-index: -1;
}
/* Логика активации (например для зеленого фильтра) */

.castle-pulse-glow.search-active,
body[data-active-filter="green"] .castle--green.castle-pulse-glow,
body[data-active-filter="blue"] .castle--blue.castle-pulse-glow,
body[data-active-filter="red"] .castle--red.castle-pulse-glow,
body[data-active-filter="white"] .castle--white.castle-pulse-glow,
body[data-active-filter="yellow"] .castle--yellow.castle-pulse-glow {
    opacity: 1;
    animation: glow-pulse 3s infinite ease-in-out;
}

.ship.search-active{
  scale: 1.2;
}
/* Общая анимация пульсации */
@keyframes glow-pulse {
    0% { 
        r: 25; 
        opacity: 0.7; 
    }
    50% { 
        r: 30; 
        opacity: 1;           
    }
    100% { 
        r: 25; 
        opacity: 0.7; 
    }
}

/* Стили для активной кнопки в меню (опционально) */
.main__filter div.active {
    
    background: radial-gradient(59.96% 67.68% at 50% 50%, rgba(11, 183, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 2px;
}

.highlight-stroke tspan {
  paint-order: stroke fill;  
  stroke: #ffff00;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: black!important;
}