/* === Preview Section Container === */
.writer-preview-map {
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to bottom,
    #e6f1f8,
    #cfdfea
  );  
  border-radius: 12px;
  margin: 60px auto;
  width: 600px;            /* LESS WIDE */
  height:400px;           /* TALLER CANVAS */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.writer-preview-map.visible .map-headline-text {
  opacity: 1;
  transform: translateY(0);
  animation: headlineScroll 10s linear infinite;
  
}
/* Wrapper stays in place */
.map-headline-wrapper {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 24px;
  z-index: 3;
}

/* Headline that slides */
.map-headline-text {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Georgia', serif;
  font-size: 20px;
  font-weight: 600;
  color: #192231;
  animation: headlineScroll 10s linear infinite;
  padding-left: 100%;
  animation: none;
  opacity: 0;
  transform: translateX(0%);
  transition: opacity 0.3s ease;
}

@keyframes headlineScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* === SVG Wrapper === */
.svg-container {
  width: 100%;
  padding: 16px;          /* slight breathing room */
  box-sizing: border-box;
}

.svg-container svg {
  width: 100%;
  height: auto;
  display: block;
  fill: #3b3f34;                /* earthy land */
  stroke: #d6c8a3 !important;   /* subtle coast definition */
  stroke-width: 0.35;
  transform: scale(1.70);  /* increase map size */
  transform-origin: center;
}

.map-pin {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #A61E1E;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(204, 30, 30, 0.5);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1.2s ease, transform 1.2s ease;
  z-index: 3;
}

/* Pulsing ring */
.map-pin::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: rgba(204, 30, 30, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: none;
  pointer-events: none;
}

@keyframes pulse {
  0%   { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Label */
.pin-label {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

/* === Desktop map pin positions === */
.pin-nietzsche {
  top: 32%;
  left: 50.5%;
}

.pin-dostoevsky {
  top: 30%;
  left: 57%;
}

.pin-marquez {
  top: 51%;
  left: 29.8%;
}

@media screen and (max-width: 768px) {
  .writer-preview-map {
    width: 92%;
    height: 280px;
    margin: 40px auto;
    border-radius: 10px;
  }

  .svg-container {
    padding: 12px;
  }

  .svg-container svg {
    transform: scale(1.1); /* slightly smaller map */
  }

  .map-pin {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 6px rgba(204, 30, 30, 0.5);
  }

  .map-pin::after {
    width: 12px;
    height: 12px;
  }

  .pin-label {
    font-size: 0.4rem;
    padding: 1px 4px;
    top: -20px;
  }

  /* === Mobile-specific pin positions === */
  .pin-nietzsche {
    top: 33.5%;
    left: 50.5%;
  }

  .pin-dostoevsky {
    top: 32%;
    left: 55.8%;
  }

  .pin-marquez {
    top: 51%;
    left: 30%;
  }
}