/* Homepage map and globe: one colour story (founder, 2026-10-04).
   Midnight navy sea, aqua students, gold Academy HQ, soft mint lines. The same aqua and gold are
   used by the globe in map-plus.js, so the map and the globe match. Loaded after the other map
   styles. The yellow X sparkles and the falling confetti are gone. */
.hero-map { --mt-aqua: #3fe0ff; --mt-blue: #2b8cff; --mt-gold: #ffd23f; --mt-mint: #5eead4; --mt-ink: #04112e; }

/* No sparkles, no confetti on the map. */
.wow-sparkle, .map-confetti { display: none !important; }

/* The sea: deep navy with a faint teal light in the middle, so the land stands out. */
.map-panel { background: radial-gradient(ellipse at 50% 45%, #082a4d 0%, #051836 55%, #030c22 100%); }

/* Students: glassy aqua pins. */
.map-dot { background: radial-gradient(circle at 35% 30%, #c8f7ff 0%, var(--mt-aqua) 45%, var(--mt-blue) 100%); box-shadow: 0 0 10px 1px rgba(63, 224, 255, 0.6); }
.map-dot svg { color: #04204a; }
.map-dot:hover, .map-dot:focus-visible { box-shadow: 0 0 18px 4px rgba(63, 224, 255, 0.8); }
.map-dot-ring, .map-dot-burst { border-color: var(--mt-aqua); }

/* The Academy HQ: gold. */
.map-dot-hub { background: radial-gradient(circle at 35% 30%, #fff8d0 0%, var(--mt-gold) 55%, #f5a50b 100%); box-shadow: 0 0 16px 3px rgba(255, 210, 63, 0.7); }
.map-dot-hub svg { color: #6b4300; }
.map-dot-hub:hover, .map-dot-hub:focus-visible { box-shadow: 0 0 22px 5px rgba(255, 210, 63, 0.85); }
.legend-dot { background: var(--mt-aqua); box-shadow: 0 0 6px 1px rgba(63, 224, 255, 0.7); }
.legend-dot-hub { background: var(--mt-gold); box-shadow: 0 0 6px 1px rgba(255, 210, 63, 0.75); }

/* Lines and the little lights that travel along them. */
.map-line { stroke: var(--mt-aqua); opacity: 0.5; }
.map-packet { fill: #fff3b0; filter: drop-shadow(0 0 4px var(--mt-gold)); }

/* Names and "+3" badges: clear on any land colour. */
.map-label { color: #f2fbff; }
.map-badge { background: rgba(4, 17, 46, 0.88); border-color: rgba(63, 224, 255, 0.55); color: #eaf9ff; }

/* ===== Ultra-premium map colours (founder 2026-10-18: "the current map colour is not beautiful enough,
   change the colour and use ultra premium colourful map design") =====
   What was wrong: the map was MUDDY BROWN, and only on Sundays. map-wow.css paints the class-day variant
   (.hero-map.wow-sunday) with `fill:#4a3308; stroke:rgba(255,210,63,.8)` on the land and a `sepia(.42)`
   filter on the satellite picture, which together read as olive/brown. Measured on screen: land
   rgb(74,51,8) over #4C3710 / #5B4D24 browns.
   Now: deep ocean-blue land with a luminous aqua coastline and a soft outer glow, matching the cyan/blue
   glow used everywhere else on the site. The Sunday celebration is KEPT - the gold "Class day" pill, the
   gold HQ pin and the gold hover fill all stay - but the continents no longer go brown.
   This file already loads after map-wow.css (index.html), so the only !important here is on the picture
   filter, which map-wow.css sets with high specificity on the same element. */
.hero-map .map-bg,
.hero-map.wow-sunday .map-bg { filter: saturate(1.75) brightness(1.02) contrast(1.1) !important; }
.map-panel { background: radial-gradient(ellipse at 50% 45%, #0d2a5e 0%, #071a3d 55%, #030a1c 100%); }
/* The land fill is nearly transparent on purpose (founder 2026-10-18: "I want the map to be colourful").
   It used to be solid #071d3a, which hid the satellite picture completely and left the map one flat blue.
   At 18% the real earth shows through - green forests, tan deserts, blue sea - and the coastline glows on
   top of it. This is why .map-bg is now brightened rather than darkened. */
.hero-map .mh-land { filter: drop-shadow(0 0 8px rgba(34, 211, 238, .45)); }
.hero-map .mh-land path,
.hero-map.wow-sunday .mh-land path:not(.is-hover) {
  fill: rgba(4, 18, 40, .18); stroke: rgba(120, 245, 255, .9); stroke-width: .8px;
}

/* No expanding circles on the pins (founder 2026-10-18: "Remove the circle wave like animation that pops
   up"). Two separate effects, both gone: .map-dot-ring was a ring pinging every 2.6s around a country's
   lead pin (styles.css keyframes map-ping) and .map-dot-burst was the circle that grew 1x -> 3x and faded
   when a new student arrived (keyframes map-burst). Hidden rather than un-animated, so nothing is left
   drawn around the pins. The pins, their glow and the travelling line lights all stay. */
.map-dot-ring, .map-dot-burst { display: none !important; }
/* Hovering a country still flashes gold, so the map keeps its warm highlight. */
.hero-map .mh-land path.is-hover,
.hero-map.wow-sunday .mh-land path.is-hover { fill: #facc15; stroke: #fde68a; }
@media (prefers-reduced-motion: reduce) { .hero-map .mh-land { filter: none; } }