/* Auth-page mesh backdrop.
 *
 * The full-viewport companion to the small "Mirrored across the mesh" card on
 * the home page: the same dotted world map and the same teardrop node pins,
 * blown up behind the login and signup cards. Nodes only -- the routes between
 * them are deliberately not drawn, because at this scale a web of arcs reads
 * as clutter over the form rather than as a network.
 *
 * The artwork is decorative: auth-mesh.js injects it, so a visitor without
 * JavaScript simply gets the plain page background and every control still
 * works. The map itself is one masked box rather than 800 circles
 * (assets/mesh-map.svg), so the dot colour follows the light/dark theme
 * through currentColor instead of being baked into the file.
 */

.auth-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: #cfcfcf;
  /* Everything inside fades out towards the edges of the viewport so the map
     reads as a horizon rather than as a rectangle pasted on the page. */
  -webkit-mask-image: radial-gradient(
    120% 92% at 50% 46%,
    #000 34%,
    rgba(0, 0, 0, 0.55) 66%,
    transparent 100%
  );
  mask-image: radial-gradient(
    120% 92% at 50% 46%,
    #000 34%,
    rgba(0, 0, 0, 0.55) 66%,
    transparent 100%
  );
}

html.light .auth-mesh {
  color: #4c5560;
}

/* One coordinate space for the map, the nodes and the pins: the stage box is
   exactly the drawn area of the 628x276 artwork, so a pin at "68.7% / 49.6%"
   lands on Bengaluru at every viewport size. */
.auth-mesh-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 68rem);
  aspect-ratio: 628 / 276;
  transform: translate(-50%, -52%);
}

.auth-mesh-map {
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.3;
  -webkit-mask-image: url("/assets/mesh-map.svg");
  mask-image: url("/assets/mesh-map.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

html.light .auth-mesh-map {
  opacity: 0.4;
}

.auth-mesh-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.auth-mesh-node {
  fill: #7df0a5;
  opacity: 0.85;
}

.auth-mesh-halo {
  fill: none;
  stroke: #5eea8b;
  stroke-width: 0.8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: auth-mesh-ping 4.4s ease-out infinite;
}

@keyframes auth-mesh-ping {
  0% {
    opacity: 0.55;
    transform: scale(0.4);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

html.light .auth-mesh-node {
  fill: #1f883d;
  opacity: 0.7;
}

html.light .auth-mesh-halo {
  stroke: #1f883d;
}

/* The tip of the teardrop sits on the coordinate, so the body of the pin is
   lifted clear of its anchor -- same geometry as the home page card. */
.auth-mesh-pin {
  position: absolute;
  width: 2.9rem;
  aspect-ratio: 24 / 32;
  margin-left: -1.45rem;
  transform: translateY(-100%);
  filter: drop-shadow(0 0.5rem 0.85rem rgba(0, 0, 0, 0.62));
}

.auth-mesh-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-mesh-pin svg path {
  fill: #2b3037;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.2;
}

html.light .auth-mesh-pin svg path {
  fill: #eef1f5;
  stroke: rgba(31, 35, 40, 0.18);
}

html.light .auth-mesh-pin {
  filter: drop-shadow(0 0.5rem 0.85rem rgba(31, 35, 40, 0.18));
}

.auth-mesh-avatar {
  position: absolute;
  left: 50%;
  top: 37.5%;
  display: block;
  overflow: hidden;
  width: 73%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #161616;
  transform: translate(-50%, -50%);
}

.auth-mesh-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The mesh's own mark rides in a pin like any node portrait, but it is a
   logo on transparency rather than a photograph: give it a dark disc to sit
   on and room to breathe instead of cropping it to fill. */
.auth-mesh-avatar-mark {
  background: #10141a;
}

.auth-mesh-avatar-mark img {
  padding: 16%;
  object-fit: contain;
}

html.light .auth-mesh-avatar-mark {
  background: #20252d;
}

/* Below the tablet breakpoint the stage would crop to Europe and Africa and
   take every portrait pin off screen with it, so the map shrinks to fit
   instead of filling. */
@media (max-width: 760px) {
  .auth-mesh-stage {
    width: max(100%, 34rem);
  }

  .auth-mesh-pin {
    width: 2rem;
    margin-left: -1rem;
  }
}

/* Wide-screen mirrors. The map is legible at 900px with nine nodes; a 1440px
   login screen has the room for the rest of the fleet. */
.auth-mesh [data-wide] {
  display: none;
}

@media (min-width: 1180px) {
  .auth-mesh [data-wide] {
    display: revert;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mesh-halo {
    animation: none;
    opacity: 0.22;
  }
}

/* The mark is a pale silver cube: on the dark card it carries itself, on the
   white one it needs an edge to sit against. */
html.light [data-fm-auth] .brand-mark {
  filter: drop-shadow(0 1px 1px rgba(31, 35, 40, 0.4));
}

/* The auth shell paints an opaque page background of its own in light mode,
   which would bury the artwork; the body already carries that colour, so the
   shell only needs to keep its glow. */
[data-fm-auth] .auth-shell,
html.light [data-fm-auth] .auth-shell {
  background-color: transparent;
}

/* ── Header over the mesh ────────────────────────────────────────────────
   On an auth page the bar sits on the artwork rather than on a slab of its
   own, so the map runs behind it uninterrupted. Everything else about the
   header (including the "clean" variant in site-header.css) is unchanged. */
[data-fm-auth] .forkmesh-simple-header {
  background: transparent;
  border-bottom-color: transparent;
}