/* Camera stage + the SVG world's own type/interaction styling. */

.map-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  /* A dark void, not the same parchment tone as the map itself — without
     real contrast at the edges, a 3D tilt just reads as a vague skew.
     Against a dark backdrop the tilted, shadowed plane reads immediately
     as a physical object sitting in space. A quiet static starfield
     (tiled, never animated — cheap) pushes it further toward "floating
     in space" rather than just "dark room." */
  background:
    radial-gradient(ellipse at 50% 40%, #2a2118 0%, #14100b 70%, #0a0806 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='%23e9dcc0'><circle cx='24' cy='38' r='1.4' opacity='0.7'/><circle cx='96' cy='14' r='1' opacity='0.4'/><circle cx='150' cy='70' r='1.6' opacity='0.6'/><circle cx='210' cy='30' r='1' opacity='0.5'/><circle cx='260' cy='90' r='1.3' opacity='0.4'/><circle cx='320' cy='40' r='1' opacity='0.6'/><circle cx='370' cy='110' r='1.4' opacity='0.5'/><circle cx='40' cy='150' r='1' opacity='0.4'/><circle cx='110' cy='190' r='1.5' opacity='0.6'/><circle cx='180' cy='150' r='1' opacity='0.35'/><circle cx='240' cy='210' r='1.3' opacity='0.5'/><circle cx='300' cy='170' r='1' opacity='0.45'/><circle cx='360' cy='230' r='1.5' opacity='0.6'/><circle cx='20' cy='260' r='1.2' opacity='0.5'/><circle cx='80' cy='300' r='1' opacity='0.4'/><circle cx='140' cy='270' r='1.4' opacity='0.55'/><circle cx='220' cy='320' r='1' opacity='0.4'/><circle cx='280' cy='280' r='1.3' opacity='0.5'/><circle cx='340' cy='340' r='1' opacity='0.45'/><circle cx='60' cy='370' r='1.4' opacity='0.6'/><circle cx='190' cy='380' r='1' opacity='0.4'/><circle cx='260' cy='360' r='1.2' opacity='0.5'/></g></svg>") ;
  background-size: cover, 500px 500px;
  perspective: 2200px;
  perspective-origin: 50% 32%;
}

/* A static ambient contact-shadow, not a real per-frame drop-shadow filter
   (that was expensive to keep re-rasterizing on a large, constantly
   animated 3D element — real jank). This is just a soft, fixed gradient
   sitting behind everything, doing the same visual job for near-zero cost. */
.map-stage::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 88%, rgba(0,0,0,0.55) 0%, transparent 55%);
}

/* Paper-Mario-diorama tilt — a real 3D rotation of the whole flat-paper
   world, not just a 2D pan/zoom. rotateX is driven by GSAP (base angle +
   an extra "swoop" punch while flying between zones), not fixed in CSS,
   so it can animate. #camera underneath keeps its existing plain 2D
   translate/scale math untouched — it just now renders inside a tilted
   3D context instead of a flat one. */
#tilt {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform-style: preserve-3d;
  /* No will-change here on purpose — it was promoting this (large,
     filter-heavy) element to its own GPU layer, which the browser then
     rasterizes ONCE and scales as a bitmap texture rather than
     re-rendering the underlying vector content sharply at each zoom
     level. That's the actual cause of the pixelation at high zoom — not
     a resolution problem, a caching one. */
}

/* First-person "look around" — small mouse-driven rotation layered on top
   of the scroll-driven tilt, independent of it. Because the whole map is
   one flat plane living inside a real perspective context, rotating it
   slightly makes the near and far parts of the SAME plane move at
   different apparent speeds — genuine parallax depth for free, no need
   to split the art into separate layers. */
#look {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

#camera {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0px 0px;
}

#world-map {
  display: block;
}

.map-label {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.05em;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--parchment);
  stroke-width: 6px;
}
.map-label--sub {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-soft);
  stroke: var(--parchment);
  stroke-width: 4px;
}
.compass-label {
  font-family: var(--font-mono);
  font-size: 20px;
  fill: var(--ink);
}

.poi {
  cursor: pointer;
}
.poi:focus-visible {
  outline: none;
}
.poi__halo {
  transition: opacity 0.4s ease;
  filter: blur(1.5px);
}

/* No motion on these at all — no idle sway, no hover lift, just a quiet
   brightness change on the shadow when you're near/hovering/focused, one
   step brighter still once you've actually arrived. (An idle sway and a
   hover-triggered lift were both tried here and both read as distracting/
   bouncy — sometimes the right answer is "less".) */
.poi:focus-visible .poi__halo,
.poi:hover .poi__halo,
.poi.is-near .poi__halo {
  opacity: 0.3;
}
.poi.is-active .poi__halo {
  opacity: 0.42;
}

.map-title-text {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.14em;
  fill: var(--ink);
  opacity: 0.85;
}

/* Hidden lore — invisible by default, revealed only by footstep proximity */
.secret {
  opacity: 0;
  pointer-events: none;
}
.secret use {
  stroke: var(--ink);
}
.secret[data-category="egyptian"] use   { stroke: var(--secret-egyptian); }
.secret[data-category="greek"] use      { stroke: var(--secret-greek); }
.secret[data-category="conspiracy"] use { stroke: var(--secret-conspiracy); }

/* Footstep trail */
.footstep {
  opacity: 0;
}
.footstep use {
  fill: var(--ink);
}

/* Floating popover for a revealed secret */
.secret-popover {
  position: fixed;
  z-index: 60;
  max-width: 220px;
  background: var(--parchment-deep);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 12px 14px;
  box-shadow: var(--card-shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  transform: translate(-50%, -120%);
}
.secret-popover.is-visible { opacity: 1; }
.secret-popover__symbol {
  width: 26px; height: 26px; margin: 0 auto 6px;
}
.secret-popover__symbol svg { width: 100%; height: 100%; stroke: var(--ink); fill: none; stroke-width: 2.5; }
.secret-popover__title {
  font-family: var(--font-display);
  font-size: 16px;
  text-align: center;
  margin: 0 0 4px;
}
.secret-popover__note {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-soft);
  margin: 0;
}