/*!
 * SQI Globe Mark v1.0.0 — stylesheet
 *
 * Only the host element needs styling; everything else is drawn to canvas.
 * The two custom properties below are the intended theming surface:
 *
 *   .sqi-globe-mark { --sqi-glow-a: rgba(43,140,255,.22);
 *                     --sqi-glow-b: rgba(255,122,26,.14); }
 *
 * Dot and edge colours are a JS option (data-colors), not CSS, because they
 * are sampled per-pixel at draw time.
 */

.sqi-globe-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1;
  /* the canvas ignores pointer events, so vertical scrolling still works
     when a visitor drags across the mark on a touch screen */
  touch-action: pan-y;
}

/* Soft brand bloom behind the mark. A blurred gradient is far cheaper than
   putting a real glow pass in the render loop. */
.sqi-globe-mark::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%,
              var(--sqi-glow-a, rgba(43, 140, 255, 0.22)),
              var(--sqi-glow-b, rgba(255, 122, 26, 0.14)) 52%,
              transparent 72%);
  filter: blur(38px);
  pointer-events: none;
  /* --sqi-px / --sqi-py are written by the script as the pointer moves, so
     the bloom drifts against the globe and reads as a separate depth layer */
  transform: translate3d(var(--sqi-px, 0px), var(--sqi-py, 0px), 0);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sqi-globe-mark canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Fallback slot: markup inside .sqi-globe-mark__fallback stays hidden unless
   the canvas context could not be created. */
.sqi-globe-mark__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.sqi-globe-mark[data-sqi-state="failed"] .sqi-globe-mark__fallback {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sqi-globe-mark::before { transition: none; }
}