/*
  Quant Compose logo system — lockup and live-mark styles.

  Class names match the website's Logo.astro and Scene.astro so markup from
  lockupHTML() and the Astro components style identically.
*/
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--logo-ink);
  text-decoration: none;
}
.logo-mark { display: block; flex: none; }
.logo-mark .logo-badge, .logo-mark .logo-triangle { transition: fill var(--logo-duration); }

.logo-word {
  font-family: var(--logo-font);
  font-size: 1.18rem;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
  font-variation-settings: "opsz" 96;
}
.logo-word-a { font-weight: 700; }
.logo-word-b { font-weight: 250; color: var(--logo-ink-mid); margin-inline-start: 0.06em; }

/* Live mark: the canvas is layered over the static SVG, which stays as the fallback and fades once the scene is live. */
.logo-live { display: block; flex: none; width: var(--logo-size); height: var(--logo-size); }
.logo-live .scene { position: relative; overflow: clip; display: block; width: 100%; height: 100%; }
.logo-live .scene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 900ms var(--logo-ease); }
.logo-live .scene[data-scene="live"] canvas { opacity: 1; }
.logo-live .scene-fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 900ms var(--logo-ease); }
.logo-live .scene[data-scene="live"] .scene-fallback { opacity: 0; }
.logo-live .scene-fallback svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .logo-mark .logo-badge, .logo-mark .logo-triangle, .logo-live .scene canvas, .logo-live .scene-fallback { transition: none; }
}