/* ============================================
   MAP HOMEPAGE — Hotspots, Hover FX, Layout
   Image displayed at object-fit: contain scale
   — NEVER cropped, NEVER enlarged beyond natural
   ============================================ */

/* --- Map Container (full viewport, dark bg) --- */
#map-container {
  position: fixed;
  inset: 0;
  z-index: var(--z-map);
  overflow: hidden;
  background: #0d0800;
}

/* --- Map Viewport (receives zoom transform, centers content) --- */
#map-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform var(--duration-cinematic) var(--ease-cinematic);
  /* filter removed — use #map-darken overlay instead (GPU composited) */
}

/* --- Map Wrapper (sized by JS to match rendered image bounds) --- */
#map-wrapper {
  position: relative;
  /* JS sets width & height to fit image aspect ratio within viewport */
  overflow: visible;
  flex-shrink: 0;
}

/* --- Map Image (fills wrapper exactly, no object-fit needed) --- */
#map-image {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* --- Vignette Overlay (on the wrapper, follows image bounds) --- */
#map-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(10, 5, 0, 0.35) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* --- Hotspot Layer (inside wrapper = coordinates match image) --- */
#hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-hotspot);
  contain: layout style;
}

/* --- Map Darken Overlay (replaces expensive filter: blur + brightness) --- */
#map-darken {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-hotspot) + 1);
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-cinematic) var(--ease-dramatic);
  will-change: opacity;
}

#map-darken.active {
  opacity: 1;
}

/* --- Individual Hotspot --- */
.hotspot {
  position: absolute;
  width: clamp(50px, 8vw, 110px);
  height: clamp(50px, 8vw, 110px);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: var(--z-hotspot);
  will-change: transform;
}

/* Invisible expanded click area */
.hotspot-click-area {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  z-index: 2;
}

/* Pulse ring — always visible */
.hotspot-ring {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0.5;
  animation: hotspotPulse 3s var(--ease-smooth) infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Secondary ring — offset timing */
.hotspot-ring-secondary {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1.5px solid var(--gold-light);
  opacity: 0;
  animation: hotspotPulse 3s var(--ease-smooth) infinite;
  animation-delay: 1.5s;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Glow core */
.hotspot-glow {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-gold) 0%, transparent 70%);
  opacity: 0.3;
  animation: hotspotGlow 4s ease-in-out infinite alternate;
  will-change: opacity;
  pointer-events: none;
}

/* Hover enhancements */
.hotspot:hover .hotspot-ring {
  border-color: var(--gold-bright);
  opacity: 0.9;
  animation-duration: 1.5s;
}

.hotspot:hover .hotspot-ring-secondary {
  border-color: var(--gold-bright);
}

.hotspot:hover .hotspot-glow {
  opacity: 0.7;
  animation-duration: 1s;
}

/* --- Tooltip Label --- */
.hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  color: var(--parchment);
  background: linear-gradient(135deg, rgba(42, 26, 10, 0.95), rgba(58, 42, 26, 0.95));
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-normal) var(--ease-smooth);
  will-change: opacity, transform;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px var(--glow-gold);
  z-index: var(--z-tooltip);
  letter-spacing: 0.05em;
}

.hotspot-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gold);
}

.hotspot:hover .hotspot-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Hotspot Positions (% relative to map-wrapper = relative to image) --- */
.hotspot[data-location="about"]        { left: 13%;  top: 24%; }
.hotspot[data-location="skills"]       { left: 76%;  top: 18%; }
.hotspot[data-location="projects"]     { left: 48%;  top: 46%; }
.hotspot[data-location="experience"]   { left: 18%;  top: 62%; }
.hotspot[data-location="certificates"] { left: 78%;  top: 67%; }
.hotspot[data-location="contact"]      { left: 50%;  top: 80%; }

/* --- Particle Canvas (viewport-sized, behind map) --- */
#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-particles);
  pointer-events: none;
}

/* --- Map State Transitions --- */
#map-container.zooming-out #map-viewport {
  filter: none;
}

#map-container.transitioning {
  pointer-events: none;
}

/* --- Map Legend (bottom-left, subtle) --- */
#map-legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: var(--z-hotspot);
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--parchment-dark);
  background: rgba(42, 26, 10, 0.85);
  /* backdrop-filter removed — expensive compositor operation */
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 168, 76, 0.3);
  opacity: 0.7;
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

#map-legend:hover {
  opacity: 1;
}

#map-legend p {
  font-style: italic;
  letter-spacing: 0.03em;
}

/* --- Compass Hint (top-right, subtle) --- */
#compass-hint {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: var(--z-hotspot);
  font-family: var(--font-accent);
  font-size: clamp(0.65rem, 1.2vw, 0.8rem);
  color: var(--gold);
  opacity: 0.5;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  letter-spacing: 0.1em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hotspot {
    width: clamp(40px, 12vw, 80px);
    height: clamp(40px, 12vw, 80px);
  }

  .hotspot-tooltip {
    font-size: 0.65rem;
    padding: 4px 10px;
  }

  #map-legend {
    bottom: 10px;
    left: 10px;
    font-size: 0.6rem;
    padding: 6px 10px;
  }

  #compass-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .hotspot {
    width: clamp(35px, 14vw, 60px);
    height: clamp(35px, 14vw, 60px);
  }

  .hotspot-ring {
    inset: 10%;
    border-width: 1.5px;
  }

  .hotspot-tooltip {
    font-size: 0.6rem;
    padding: 3px 8px;
  }

  #map-legend {
    display: none;
  }
}