/* Живой знак Qubitrino (ADR-0044). Геометрия — brandbook/SPEC.md, тайминги — motion/SPEC_motion.md.
   Вне сборки Tailwind: классы qs-* ставят шаблон components/brand_sign.html и static/brand/sign.js.
   Всё движение — только внутри @media (prefers-reduced-motion: no-preference). */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

.qs-manrope { font-family: "Manrope", system-ui, sans-serif; }

.qs-sign { --qs-start: .4s; }
.qs-sign svg { overflow: visible; }
.qs-now { --qs-start: 0s; }

/* Свет в центре (think): светлая и тёмная тема. */
.qs-g0 { stop-color: #5A46C4; }
.qs-g1 { stop-color: #7A66F0; }
.dark .qs-g0 { stop-color: #FFFFFF; }
.dark .qs-g1 { stop-color: #B5A8FF; }
.qs-bgl { opacity: 0; transition: opacity .4s; }

/* Заплатка уголка: в покое знак — реплика, на старте уголок уходит к окружности. */
.qs-patch {
  transform-box: fill-box;
  transform-origin: 31.6% 31.6%;
  transition: transform .35s cubic-bezier(.5, 0, .3, 1), opacity .35s;
}
.qs-run .qs-patch { transform: scale(0); opacity: 0; }
.qs-now .qs-patch { transition: none; }

/* Определённый прогресс (П2): залиты сделанные шаги. */
.qs-off { fill-opacity: 0; }
.qs-on { fill-opacity: 1; }

/* Подпись на хвостике: линия из уголка и текст над ней. */
.qs-ln {
  fill: #8470FF;
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform .45s cubic-bezier(.3, 0, .2, 1);
}
.qs-say .qs-ln { transform: scaleX(1); }
.qs-tx {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  fill: #282632;
  opacity: 0;
  transition: opacity .35s;
}
.dark .qs-tx { fill: #EEECF7; }
.qs-cap .qs-tx { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .qs-run .qs-bgl {
    transform-box: fill-box;
    transform-origin: center;
    animation: qs-bgl 4s ease-in-out var(--qs-start) infinite;
  }
  .qs-run .qs-ga { animation: qs-ga 6s ease-in-out var(--qs-start) infinite; }
  .qs-run .qs-gb { animation: qs-ga 6s ease-in-out calc(var(--qs-start) - 3s) infinite; }
  .qs-run .qs-fp {
    transform-box: fill-box;
    transform-origin: center;
    animation: qs-fp 4s ease-in-out calc(var(--qs-start) + var(--qs-d)) infinite;
  }
  .qs-run .qs-cf {
    fill-opacity: 0;
    animation: qs-cf 2.8s ease-in-out calc(var(--qs-start) + var(--qs-d)) infinite;
  }
  @keyframes qs-bgl { 0%, 100% { opacity: .15; transform: scale(.55); } 50% { opacity: 1; transform: scale(1); } }
  @keyframes qs-ga { 0%, 100% { fill: #8470FF; } 50% { fill: #C4BAFF; } }
  @keyframes qs-fp {
    0% { transform: rotate3d(1, 1, 0, 0deg); fill: #8470FF; }
    11% { fill: #C4BAFF; }
    22%, 100% { transform: rotate3d(1, 1, 0, 180deg); fill: #8470FF; }
  }
  @keyframes qs-cf { 0%, 40%, 100% { fill-opacity: 0; } 18% { fill-opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  .qs-run .qs-patch { transform: none; opacity: 1; }
  .qs-patch, .qs-ln, .qs-tx, .qs-bgl { transition: none; }
}