/* Hero map, more animations (map-more.js): greeting bubbles, daylight wave,
   student constellation, hover highlight, stardust. */

/* 3. Student constellation: faint lines between neighbouring countries. */
.mm-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mm-link {
  stroke: #a5f3fc; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round;
  opacity: 0.22; stroke-dasharray: 1; stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .map-more .mm-link {
    stroke-dashoffset: 1;
    animation: mmLinkIn 1.4s ease-out forwards, mmLinkShimmer 7s ease-in-out infinite;
  }
}
@keyframes mmLinkIn { to { stroke-dashoffset: 0; } }
@keyframes mmLinkShimmer { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.42; } }

/* 4. Hover a country: its lines light up, the rest dim. */
.mm-focus .map-line:not(.mm-hl), .mm-focus .map-comet:not(.mm-hl), .mm-focus .map-packet:not(.mm-hl), .mm-focus .mm-link:not(.mm-hl) {
  opacity: 0.08; transition: opacity 0.25s ease;
}
.map-line.mm-hl { opacity: 1; stroke-width: 2.4; stroke: #67e8f9; filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.9)); transition: opacity 0.25s ease; }
.mm-link.mm-hl { opacity: 0.85; stroke-width: 1.6; animation: none; stroke-dashoffset: 0; }
.map-packet.mm-hl { r: 3.6; }

/* 2. Daylight wave. The white band that crossed the map west to east is off since 2026-10-18
   (founder: "Remove the white effect that moves across the map"). The element stays in the page
   and map-more.js still runs its timer, so the student icons below keep lighting up in turn,
   west to east; only the band itself is gone. To bring it back, restore the rules here. */
.mm-wave { display: none !important; }
/* Each student icon glows as the band passes over it (delay = its distance west to east). */
.map-more .map-dot::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(253, 230, 138, 0.85), rgba(253, 230, 138, 0) 70%);
}
.mm-waving .map-dot::before { animation: mmIconGlow 0.9s ease-out var(--mm-d, 0s) 1; }
@keyframes mmIconGlow { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.8); } }

/* 1. Greeting bubbles. */
.mm-hello {
  position: absolute; z-index: 4; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 16px));
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px 5px; border-radius: 12px;
  background: rgba(8, 20, 48, 0.92); border: 1px solid rgba(103, 232, 249, 0.55);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7), 0 0 14px -2px rgba(103, 232, 249, 0.45);
  animation: mmHello 2.9s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.mm-hello::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border-right: 1px solid rgba(103, 232, 249, 0.55); border-bottom: 1px solid rgba(103, 232, 249, 0.55);
  transform: rotate(45deg);
}
.mm-hello.mm-below { transform: translate(-50%, 16px); }
.mm-hello.mm-below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.mm-hello-word { font-weight: 700; font-size: 0.95rem; color: #fff; letter-spacing: 0.01em; }
.mm-hello-from { font-size: 0.66rem; color: #a5f3fc; text-transform: uppercase; letter-spacing: 0.08em; }
@keyframes mmHello {
  0% { opacity: 0; margin-top: 8px; }
  14% { opacity: 1; margin-top: 0; }
  82% { opacity: 1; margin-top: 0; }
  100% { opacity: 0; margin-top: -6px; }
}
.map-dot.mm-greeting { z-index: 3; box-shadow: 0 0 20px 5px rgba(103, 232, 249, 0.9); }
@media (max-width: 640px) {
  .mm-hello { padding: 4px 9px 4px; border-radius: 10px; }
  .mm-hello-word { font-size: 0.8rem; }
  .mm-hello-from { font-size: 0.56rem; }
}

/* 5. Stardust (canvas over the map picture, under the lines and icons). */
.mm-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Paused off screen; hidden in the globe view; nothing moves for reduced motion. */
.mm-paused .mm-link, .mm-paused .mm-hello, .mm-paused .mm-wave, .mm-paused .map-dot::before { animation-play-state: paused; }
.globe-on .mm-dust, .globe-on .mm-hello, .globe-on .mm-wave, .globe-on .mm-mesh { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mm-wave, .mm-dust, .mm-hello { display: none; }
}

/* ===== Globe view extras (map-more.js setupGlobe) ===== */
/* Centre the globe in the (now taller) panel. */
/* Globe view: a taller panel so the globe can be big AND sit fully inside it, between a 64px
   strip at the top (counter, Map/Globe switch) and one at the bottom (new-student note, Full
   screen). map-plus.js precompute uses the same margins. Square on computers (at most 950px
   tall), 3:4 on phones. Nothing covers or cuts the globe. */
.globe-on .map-panel { width: 100%; aspect-ratio: 1 / 1; max-height: 950px; }
@media (max-width: 640px) { .globe-on .map-panel { aspect-ratio: 3 / 4; max-height: none; } }
/* The milestone card sits in the middle of the panel: shown on the flat map only. */
.globe-on .map-milestone, .globe-on .map-confetti { display: none; }
.globe-on .map-globe { top: 50%; transform: translate(-50%, -50%); }
.mm-space { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.globe-on .mm-space { display: block; }
.mm-space-back { z-index: 1; }
.mm-space-front { z-index: 3; }
.mm-gtip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px));
  padding: 5px 10px; border-radius: 8px; font: 600 0.78rem Inter, system-ui, sans-serif; color: #fff;
  background: rgba(8, 20, 48, 0.94); border: 1px solid rgba(103, 232, 249, 0.55);
}
.mm-gtip[hidden], .hero-map:not(.globe-on) .mm-gtip { display: none; }
/* the globe's hover label matches the yellow hovered dot */
.mm-gtip { border-color: rgba(255, 210, 63, 0.7) !important; color: #ffe27a !important; }