/* ==========================================================================
   Astrodyne — the brand mark
   ==========================================================================

   One implementation of the logo for the entire product. Before this file
   there were eight hand-written copies of the same SVG across the marketing
   shell, the console shell, the admin shell, both auth shells and the error
   pages, and they had drifted: four had lost the cyan satellite entirely, two
   used a different satellite radius and position, the 404 page used a smaller
   ellipse and a smaller core, and three hardcoded colours that the rest read
   from tokens.

   The geometry here is the public navigation bar's, unchanged, because that is
   the mark the site is recognised by:

       ellipse  cx 16 cy 16  rx 12 ry 5.8  stroke-width 1.5  rotate(-28 16 16)
       core     cx 16 cy 16  r 3.4         warm orange
       satellite cx 25 cy 9.6 r 2.1        icy cyan

   ── colour ────────────────────────────────────────────────────────────────
   The mark appears on surfaces that do not share a token namespace: the
   marketing site uses --ad-*, the console and docs use the console's aliases,
   and the error pages have no stylesheet at all. Rather than pick one and
   break the others, each colour resolves through the namespaces in order and
   ends at a literal. The literals are the same values the tokens hold, so a
   page with no design system still renders the correct mark.

   ── motion ────────────────────────────────────────────────────────────────
   Three behaviours, one system, used identically everywhere:

     ambient      the satellite breathes, 6.5s, opacity only
     entry        the ring settles and the satellite arrives on a short arc,
                  once per document load
     interactive  a linked lockup precesses the ring 8 degrees on hover/focus

   Every one is opacity or transform on a composited element. Nothing animates
   a layout property, nothing runs a timer, and the resting state is the exact
   static geometry above — which is also precisely what a reduced-motion reader
   gets, with no animation of any kind.
   ========================================================================== */

.adl {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--ad-font-body, 'Instrument Sans', system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ad-ink, var(--ink, #EDF2F9));
  /* Sizes are set per variant below; declared here so a consumer that forgets
     one still gets the reference treatment rather than a collapsed box. */
  gap: 11px;
  font-size: 21px;
}

/* The mark never shrinks and always declares its box, so a lockup in a flex
   row cannot be squeezed out of aspect ratio and cannot shift layout. */
.adl-mark {
  display: block;
  flex: none;
  overflow: visible;

  --adl-ring: var(--ad-edge-strong, var(--edge-strong, rgba(176, 206, 240, 0.30)));
  --adl-core: var(--ad-warm,        var(--accent-orange, oklch(0.78 0.10 55)));
  --adl-sat:  var(--ad-accent,      var(--accent, oklch(0.86 0.07 218)));
  --adl-ease: cubic-bezier(0.22, 0.61, 0.28, 1);
}

.adl-ring { stroke: var(--adl-ring); fill: none; }
.adl-core { fill: var(--adl-core); }
.adl-sat  { fill: var(--adl-sat); }

.adl-word { white-space: nowrap; }

/* ── sizes ─────────────────────────────────────────────────────────────────
   `lg` is the public navigation bar and is the reference: 32px mark, 11px gap,
   21px wordmark. The others scale the gap and wordmark with the mark so the
   lockup keeps its proportions rather than just its parts. */
.adl-sm { gap: 9px;  font-size: 16px; }
.adl-md { gap: 10px; font-size: 17px; }
.adl-lg { gap: 11px; font-size: 21px; }
.adl-xl { gap: 13px; font-size: 26px; }

/* ── ambient ───────────────────────────────────────────────────────────────
   The satellite is the only thing that moves at rest, and it only changes
   opacity. At 2.1px it reads as a mark that is powered rather than one that is
   animating. */
@keyframes adl-breathe { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }
.adl-sat { animation: adl-breathe 6.5s ease-in-out infinite; }

/* ── entry ─────────────────────────────────────────────────────────────────
   Runs once per document load. The satellite arrives along a short arc — a
   rotation about the mark's centre that ENDS at zero, so the resting geometry
   is exact rather than approximately restored. */
@keyframes adl-ring-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes adl-sat-in {
  from { opacity: 0; transform: rotate(-16deg); }
  to   { opacity: 1; transform: none; }
}

.adl-ring-g,
.adl-sat-g {
  transform-box: view-box;
  transform-origin: 16px 16px;
}
.adl-ring-g {
  animation: adl-ring-in 0.7s var(--adl-ease) backwards;
  transition: transform 0.45s var(--adl-ease);
}
.adl-sat-g {
  animation: adl-sat-in 0.8s var(--adl-ease) backwards;
  animation-delay: 0.12s;
}
.adl-core {
  animation: adl-ring-in 0.6s var(--adl-ease) backwards;
  animation-delay: 0.06s;
}

/* ── interactive ───────────────────────────────────────────────────────────
   Only where the lockup is a link. Eight degrees of precession is enough to
   register as a response and small enough that it never reads as a spin. */
.adl-link:hover .adl-ring-g,
.adl-link:focus-visible .adl-ring-g { transform: rotate(8deg); }

.adl-link:focus-visible {
  outline: 2px solid var(--ad-accent, var(--accent, oklch(0.86 0.07 218)));
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── reduced motion ────────────────────────────────────────────────────────
   Not "animation: none" alone — that would leave the satellite at whatever
   opacity the keyframe happened to declare. The mark is pinned to its finished
   state explicitly, which is the polished static logo. */
@media (prefers-reduced-motion: reduce) {
  .adl-sat,
  .adl-core,
  .adl-ring-g,
  .adl-sat-g {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .adl-ring-g { transition: none; }
  .adl-link:hover .adl-ring-g,
  .adl-link:focus-visible .adl-ring-g { transform: none; }
}