/* ============================================================================
   CIRCLE SQUARED, LOGO MARK (real "sygnet" asset)
   The supplied concentric bullseye-in-squircle, used as both logo and the
   landing "diagnostic initialising" motion element. Because the mark is built
   from filled paths (not strokes), motion is a calibrate-spin + scale-in on
   load, then a barely-there breathe, the instrument settling and idling.

   Markup: an inline <svg class="csq-mark" viewBox="0 0 492 492" fill="currentColor">
   containing the five logo paths (+ the centre-dot path as .csq-mark__core).
   Colour via the element's `color`. Animate by toggling classes (see below).
   ========================================================================== */

.csq-mark { display: block; transform-origin: center; will-change: transform, opacity; }
.csq-mark path { fill: currentColor; }

/* the centre dot can carry the brand red as an optional accent flourish */
.csq-mark.csq-mark--accent .csq-mark__core { fill: var(--brand-red); }

@keyframes csq-init {
  0%   { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes csq-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes csq-core-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* LOAD: the mark calibrates in (rotates a quarter-turn, the squircle is
   90°-symmetric so it lands identically, and scales up), the core pops last. */
.csq-mark.is-animated { animation: csq-init var(--dur-reveal) var(--ease-out) both; }
.csq-mark.is-animated .csq-mark__core {
  transform-origin: center;
  animation: csq-core-pop var(--dur-fast) var(--ease-spring) 520ms both;
}

/* IDLE: a slow, almost-imperceptible breathe, "the instrument is live". */
.csq-mark.is-idle { animation: csq-breathe 5s var(--ease-in-out) 200ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .csq-mark.is-animated,
  .csq-mark.is-animated .csq-mark__core,
  .csq-mark.is-idle { animation: none; opacity: 1; transform: none; }
}