/* Hero map extras (map-plus.js). Only applies once the map has .map-plus,
   which map-plus.js adds after the "New features" launch check. */

/* Layer that holds the map image, the lines and the markers so they move together.
   The map does not magnify itself any more (founder 2026-10-18: "Don't zoom in the map or
   globe"). map-plus.js no longer adds is-zoomed or map-intro, so the two rules that scaled
   this layer are gone. Pinch and drag in full screen still work: map-features.js sets that
   transform inline. To put the old behaviour back, restore these two rules and pass true
   again at the showCard calls in map-plus.js:
     .map-zoom.is-zoomed { transform: scale(1.75); }
     .hero-map.map-intro.is-ready .map-zoom { animation: mapIntro 2.8s cubic-bezier(.25,.7,.2,1) both;
                                              transform-origin: var(--hq-x, 23%) var(--hq-y, 33%); }
     @keyframes mapIntro { from { transform: scale(2.8); filter: brightness(1.25); } to { transform: scale(1); filter: none; } } */
.map-zoom { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 1.3s cubic-bezier(.3, .7, .2, 1); }
.map-zoom .map-bg { display: block; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.map-overlay > * { pointer-events: auto; }

/* 8. Tilt */
.hero-map.can-tilt { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.35s ease-out; }

/* 1. Day and night */
.map-night { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.map-lights { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .map-plus:not(.reduce-motion) .map-lights { animation: mapTwinkle 3.7s ease-in-out infinite; }
}
@keyframes mapTwinkle { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.25; } 60% { opacity: 1; } }

/* 9. Comet trails (replace the plain packets) */
.has-comets .map-packet { display: none; }
.map-comet { fill: none; stroke-linecap: round; stroke-dashoffset: var(--o0); animation: mapComet 3s linear infinite both; }
.map-comet.c2 { stroke: var(--accent-2); stroke-width: 2.4; opacity: 0.55; }
.map-comet.c1 { stroke: #fff; stroke-width: 2.8; }
@keyframes mapComet { from { stroke-dashoffset: var(--o0); } to { stroke-dashoffset: var(--o1); } }

/* 6 + 7. Spotlight and tap cards */
.map-line.is-spot { opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 4px var(--accent-2)); }
.map-dot.is-spot { box-shadow: 0 0 0 3px #fff, 0 0 16px 4px var(--accent-2); z-index: 3; }
.map-card {
  position: absolute; transform: translate(-50%, calc(-100% - 14px)); padding: 8px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(10, 14, 26, 0.92); border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.82rem; line-height: 1.3; text-align: center;
  animation: mapCardIn 0.35s ease both;
}
.map-card.below { transform: translate(-50%, 16px); }
.map-card[hidden] { display: none; }
.map-card strong { display: block; font-size: 0.92rem; }
.map-card span { color: #a6adc8; }
.map-card .map-card-time { display: block; margin-top: 3px; color: #cfe3ff; font-size: 0.76rem; }
.map-card-join {
  display: inline-block; margin-top: 7px; padding: 4px 11px; border-radius: 999px; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 0.76rem; text-decoration: none;
}
.map-card-join:hover, .map-card-join:focus-visible { filter: brightness(1.15); }
@keyframes mapCardIn { from { opacity: 0; margin-top: 6px; } }

/* 3. Class is live */
.map-live-pill {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: #ef4444; color: #fff; font: 800 0.72rem/1 Inter, system-ui, sans-serif; letter-spacing: 0.06em; text-decoration: none;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: mapLivePulse 1.8s ease-out infinite;
}
.map-live-pill[hidden] { display: none; }
.map-live-sub { font-weight: 600; letter-spacing: 0; opacity: 0.92; }
.map-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
@keyframes mapLivePulse { 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.map-ripples { display: none; }
.map-live .map-ripples { display: inline; }
.map-ripple { fill: none; stroke: #ef4444; stroke-width: 2; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .map-live:not(.reduce-motion) .map-ripple { animation: mapRipple 3.3s ease-out infinite; }
}
@keyframes mapRipple { from { r: 6; opacity: 0.9; } to { r: 120; opacity: 0; } }
.map-live .map-line { opacity: 0.95; stroke-width: 2; filter: drop-shadow(0 0 3px var(--accent-2)); }
.map-live .map-dot-hub { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.6), 0 0 22px 6px rgba(239, 68, 68, 0.55); }

/* 2. New student joined */
.map-join-beam { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 5px #fbbf24); }
.map-join-burst { fill: none; stroke: #fbbf24; stroke-width: 2.5; animation: mapBurst 1.5s ease-out forwards; }
@keyframes mapBurst { from { r: 4; opacity: 1; } to { r: 40; opacity: 0; } }
.map-toast {
  position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px);
  padding: 8px 14px 8px 10px; border-radius: 14px; background: rgba(10, 14, 26, 0.92); border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fff; font-size: 0.8rem; line-height: 1.25; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.map-toast.show { opacity: 1; transform: none; }
.map-toast[hidden] { display: none; }
.map-toast-icon { font-size: 1.2rem; }
.map-toast strong { display: block; font-weight: 600; }
.map-toast small { color: #a6adc8; font-size: 0.74rem; }

/* 11. Milestones */
.map-milestone {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 20px; border-radius: 16px; text-align: center;
  background: rgba(10, 14, 26, 0.94); border: 1px solid #fbbf24; color: #fff; box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.8);
  animation: mapMilestoneIn 0.6s cubic-bezier(.34, 1.56, .64, 1) both; max-width: calc(100% - 32px);
}
.map-milestone.out { opacity: 0; transition: opacity 0.5s ease; }
.map-milestone strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.map-milestone span { font-size: 0.8rem; color: #a6adc8; }
@keyframes mapMilestoneIn { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } }
.map-confetti { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; pointer-events: none; animation: mapConfetti 2.6s ease-in forwards; }
@keyframes mapConfetti { to { transform: translate(var(--drift), 340px) rotate(560deg); opacity: 0; } }

/* 4. Class time around the world */
.map-times { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); overflow: hidden; }
.map-times[hidden] { display: none; }
.map-times-head { flex-shrink: 0; font-weight: 700; color: var(--accent-2); }
.map-times-track { display: flex; gap: 28px; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.map-times-row { display: flex; gap: 28px; flex-shrink: 0; animation: mapTimes 38s linear infinite; }
.map-times.static .map-times-row { animation: none; flex-wrap: wrap; gap: 6px 18px; }
.map-times.static .map-times-track { mask-image: none; -webkit-mask-image: none; }
.map-times:hover .map-times-row { animation-play-state: paused; }
.map-time { white-space: nowrap; }
.map-time b { color: var(--text); font-weight: 600; }
@keyframes mapTimes { to { transform: translateX(calc(-100% - 28px)); } }

/* 5. Globe view */
.map-toggle { position: absolute; top: 10px; right: 10px; display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(10, 14, 26, 0.8); border: 1px solid rgba(255, 255, 255, 0.14); }
.map-toggle button { font: 600 0.74rem Inter, system-ui, sans-serif; color: #c7cbe0; background: none; border: 0; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.map-toggle button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.map-globe {
  display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); cursor: grab; touch-action: pan-y; z-index: 2;
}
.map-globe:active { cursor: grabbing; }
.globe-on .map-globe { display: block; }
.globe-on .map-zoom { opacity: 0; pointer-events: none; }
.globe-on .map-panel {
  background: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 80% 30%, #fff6, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff5, transparent), radial-gradient(1.5px 1.5px at 90% 75%, #fff7, transparent),
    radial-gradient(1px 1px at 55% 12%, #fff6, transparent), radial-gradient(1px 1px at 8% 65%, #fff5, transparent),
    radial-gradient(ellipse at center, #10183a 0%, #070a16 70%);
}
.globe-on .map-card { display: none; }

@media (max-width: 560px) {
  .map-toast { font-size: 0.72rem; padding: 6px 10px 6px 8px; }
  .map-live-sub { display: none; }
  .map-toggle button { padding: 4px 9px; font-size: 0.7rem; }
  .map-card { font-size: 0.74rem; padding: 6px 9px; }
  .map-milestone { padding: 8px 12px; border-radius: 12px; }
  .map-milestone strong { font-size: 0.85rem; }
  .map-milestone span { font-size: 0.7rem; }
  /* The toast and the "50,000+ students" counter share the bottom-left corner on phones
     (inside the globe's 64px bottom strip too): the counter steps aside while a toast
     shows, and the toast stays clear of the Full screen button on the right. */
  .map-toast { left: 6px; bottom: 6px; max-width: calc(100% - 60px); }
  .hero-map .mapf-counter { transition: opacity 0.3s ease; }
  .hero-map:has(.map-toast.show) .mapf-counter { opacity: 0; }
  .map-toast-icon { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .map-zoom, .hero-map.can-tilt { transition: none; animation: none !important; }
  .map-comet, .map-live-pill, .map-times-row, .map-confetti { animation: none !important; }
}

/* The sweep's "screen" blend is costly over the animated layers; a plain
   translucent sweep looks almost the same on the dark map. */
.map-plus .map-sweep { mix-blend-mode: normal; opacity: 0.3; }

/* Full screen button and full screen view (map.js) */
.map-fs-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(10, 14, 26, 0.8);
  color: #e5e8f5; font: 600 0.74rem Inter, system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(6px);
}
.map-fs-btn svg { width: 15px; height: 15px; }
.map-fs-btn:hover, .map-fs-btn:focus-visible { border-color: var(--accent-2, #4fd1ff); color: #fff; }
.map-fs-btn:focus-visible { outline: 2px solid var(--accent-2, #4fd1ff); outline-offset: 2px; }
@media (max-width: 600px) { .map-fs-btn span { display: none; } .map-fs-btn { padding: 7px; right: 8px; bottom: 8px; } }
/* Full screen: the map as large as the screen allows, keeping its 2:1 shape. */
.hero-map:fullscreen, .hero-map:-webkit-full-screen, .hero-map.map-fs {
  max-width: none; width: 100%; height: 100%; margin: 0; padding: 2vmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #020617; transform: none !important;
}
.hero-map.map-fs { position: fixed; inset: 0; z-index: 2147483000; height: 100dvh; } /* above the chat bubble */
.hero-map:fullscreen .map-panel, .hero-map:-webkit-full-screen .map-panel, .hero-map.map-fs .map-panel { width: min(100%, calc((100dvh - 4vmin - 40px) * 2)); max-width: none; aspect-ratio: 2 / 1; }
.hero-map:fullscreen .map-legend, .hero-map:-webkit-full-screen .map-legend, .hero-map.map-fs .map-legend { margin: 0; }
html.map-fs-lock, html.map-fs-lock body { overflow: hidden; }
@media (orientation: portrait) and (max-width: 700px) {
  .hero-map:fullscreen::after, .hero-map:-webkit-full-screen::after, .hero-map.map-fs::after {
    content: "Turn your phone sideways for a bigger map"; font: 600 0.85rem Inter, system-ui, sans-serif; color: #9aa3c7;
  }
}
/* The map's section has its own layer (z-index 1), so on phones the menu bar and
   chat button would float over it: hide them while the map fills the window. */
html.map-fs-lock body > header.nav, html.map-fs-lock .chat-launcher, html.map-fs-lock .chat-panel, html.map-fs-lock #taaBanner { visibility: hidden; }

/* The button that opens it (next to "Next class, your time:" under the homepage map) */
.ct-open-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 12px; min-height: 34px; border-radius: 999px; cursor: pointer;
  font: 700 0.78rem/1 var(--font-body); color: #fff; border: 0; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 90%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ct-open-btn:hover, .ct-open-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 100%, transparent); }
.ct-open-btn svg { width: 15px; height: 15px; }
.map-times .ct-open-btn { margin-left: 2px; }
@media (max-width: 640px) {
  .map-times { flex-wrap: wrap; row-gap: 8px; }
  .map-times-track { flex-basis: 100%; }
}