/**
 * 番剧封面标记点样式
 * 为地图上的番剧封面标记点提供样式
 */

/* 封面标记点容器 */
.anime-cover-container {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  background-color: #fff;
  position: relative;
  z-index: 1000; /* 确保封面图标记点显示在其他点之上 */
  transition: all 0.3s ease;
}

/* 封面图片 */
.anime-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 封面标记点悬停效果 */
.anime-cover-marker:hover .anime-cover-container {
  transform: scale(1.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  z-index: 1001; /* 悬停时提高z-index */
}

/* 封面标记点激活效果 */
.anime-cover-marker.active .anime-cover-container {
  transform: scale(1.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 1002; /* 激活时提高z-index */
}

/* 确保封面标记点在其他标记点之上 */
.leaflet-marker-pane .anime-cover-marker {
  z-index: 1000 !important;
}

/* 封面标记点脉动动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 为新添加的封面标记点添加脉动动画 */
.anime-cover-marker.new-marker .anime-cover-container {
  animation: pulse 1.5s infinite;
}

/* 深色模式适配 */
.dark-mode .anime-cover-container {
  border-color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.dark-mode .anime-cover-marker:hover .anime-cover-container {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}

.dark-mode .anime-cover-marker.active .anime-cover-container {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .anime-cover-container {
    width: 20px;
    height: 20px;
  }
  
  .anime-cover-marker:hover .anime-cover-container {
    transform: scale(1.1); /* 移动端悬停效果稍微小一点 */
  }
}

/* 高DPI屏幕适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .anime-cover-container {
    border-width: 1.5px; /* 高DPI屏幕上边框稍微细一点 */
  }
}