/* Hero map, more animations (map-fx.js). */
.mfx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.globe-on .mfx-layer { display: none; }

/* 2. Clouds: three soft white patches that drifted left to right across the map, 90s a crossing.
   Off since 2026-10-18 (founder: "Remove the white effect that moves across the map"). The night
   shade and the city lights are untouched, so the map keeps its depth. */
.mfx-cloud { display: none !important; }

/* 1. Sonar wave and the yellow flash on each pin */
.mfx-sonar {
  position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(255, 210, 63, 0.7);
  box-shadow: 0 0 24px 4px rgba(255, 210, 63, 0.25), inset 0 0 30px rgba(255, 210, 63, 0.18);
}
.mfx-flash {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 210, 63, 0.85); box-shadow: 0 0 16px 5px rgba(255, 210, 63, 0.7);
  animation: mfx-flash 0.9s ease-out forwards;
}
@keyframes mfx-flash { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.9); } }

/* 3. Cursor spotlight */
.mfx-spot {
  position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 122, 0.16), rgba(79, 209, 255, 0.07) 55%, transparent);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.3s ease; will-change: transform;
}
.mfx-spot.on { opacity: 1; }

/* 4. Tap ripple */
.mfx-ripple {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid rgba(255, 210, 63, 0.9); animation: mfx-ripple 0.95s ease-out forwards;
}
@keyframes mfx-ripple { to { transform: scale(9); opacity: 0; border-width: 1px; } }

/* 5. Shooting stars */
.mfx-star {
  position: absolute; width: 110px; height: 2px; margin-left: -110px; transform-origin: right center; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 80%, #fff);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

@media (prefers-reduced-motion: reduce) { .mfx-layer { display: none; } }
html.lite .mfx-layer { display: none; }

/* Full screen: edge to edge. The map and the globe use the whole width of the
   screen (no side margins, square corners); the legend and the class-time strip
   sit in a slim row underneath. The flat map fills the height too, but never
   gets taller than 1 : 1.45 of the width, so on a phone held upright it is not
   stretched (it is centred instead). The globe's panel always fills the screen. */
.hero-map:fullscreen, .hero-map:-webkit-full-screen, .hero-map.map-fs { padding: 0 0 6px; gap: 4px; justify-content: center; }
.hero-map:fullscreen .map-panel, .hero-map:-webkit-full-screen .map-panel, .hero-map.map-fs .map-panel {
  width: 100%; max-width: none; aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
  max-height: calc(100vw / 1.45); border-radius: 0; border-left: 0; border-right: 0;
}
.hero-map.globe-on:fullscreen .map-panel, .hero-map.globe-on:-webkit-full-screen .map-panel, .hero-map.globe-on.map-fs .map-panel { max-height: none; }
.hero-map:fullscreen .map-times, .hero-map:-webkit-full-screen .map-times, .hero-map.map-fs .map-times { width: 100%; padding: 0 16px; box-sizing: border-box; margin-top: 0; }

/* Phones: the map's small labels at a readable size (map-more.js greetings, map-features.js counter) */
@media (max-width: 640px) {
  .hero-map .mm-hello > :not(.mm-hello-word) { font-size: 11.5px !important; }
  .hero-map .mapf-counter { font-size: 12px !important; }
}