/* Companion: the white claimant dot that carries on with the reader after the journey
   (assets/sections/companion.js). Decorative: aria-hidden, no pointer events, nothing to focus.
   The layer sits on the page (absolute, page coordinates), so a resting dot moves with the content
   exactly, bounce included; reduced motion fixes it to the screen instead (.cdot--still).
   Nothing here adds to the page's scrollable area: every box is at most the dot's own 8px, and the
   halo and ring only paint beyond it (a shadow, and SVG overflow).
   Above the content, below the nav (80), the menu drawer (70) and the review panel (90). */

.cdot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 60;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.cdot--still { position: fixed; }

.cdot__dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(.75);
  will-change: transform, opacity;
}
/* A very soft halo, about three times the dot's radius: it reads as a point of light, not dust.
   (Faded in over the handoff, so on dot 0 it adds nothing to the canvas's own dot.) */
.cdot__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, .5), 0 0 7px 3px rgba(255, 255, 255, .16);
  opacity: 0;
}

/* Arrival: one soft hairline ring, the pulse the claimant gives under the hero's buttons. The SVG's
   own box is 2px; the ring paints outside it. It grows to 17px (13px on phones), short of the
   address 22px (17px) away, and is over within 1.8 s. */
.cdot__ring {
  position: absolute;
  left: -1px;
  top: -1px;
  display: block;
  width: 2px;
  height: 2px;
  overflow: visible;
  pointer-events: none;
}
.cdot__ring circle { fill: none; stroke: #fff; stroke-width: 1; opacity: 0; }
.cdot.is-home .cdot__ring circle { animation: cdot-home 1.7s cubic-bezier(.22, .61, .36, 1) .1s 1 both; }
@keyframes cdot-home {
  from { r: 6px; opacity: .3; }
  to { r: 17px; opacity: 0; }
}
@media (max-width: 759px) {
  .cdot.is-home .cdot__ring circle { animation-name: cdot-home-sm; }
  @keyframes cdot-home-sm {
    from { r: 5px; opacity: .3; }
    to { r: 13px; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdot__ring { display: none; }
}
@media print {
  .cdot { display: none; }
}