/* Defectoscope — знак, надпись и заставка. Общие стили для входа и приложения. */

:root {
  --brand-ring: #0b3c5d;   /* кольцо-шестерня и точка */
  --brand-disc: #ffffff;   /* диск внутри кольца   */
  --brand-word: #0b3c5d;   /* надпись              */
  --brand-sub: #4a7c99;    /* пояснительная строка */
}
html[data-theme="dark"] {
  --brand-ring: #ffffff;
  --brand-disc: #0b3c5d;
  --brand-word: #eaf3f9;
  --brand-sub: #8fb6cc;
}

/* --- знак и надпись --- */
.brand { display: inline-flex; align-items: center; gap: 9px; margin: 0 14px 0 0; }
.brand-mark { display: block; flex: none; }
.brand-word {
  font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .2px;
  color: var(--brand-word);
  line-height: 1;
}
header .brand-word { font-size: 20px; }
@media (max-width: 760px) {
  header .brand-word { font-size: 17px; }
  header .brand { gap: 7px; margin-right: 8px; }
}

/* --- заставка при запуске --- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #fff);
  transition: opacity .38s ease;
}
.splash-out { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; }
.splash-mark { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.splash-gear {
  /* Крутим вокруг центра самой фигуры: в SVG с viewBox origin в px уводит знак
     за пределы области отрисовки, и шестерня пропадает. */
  transform-box: fill-box;
  transform-origin: center;
  animation: ds-gear-spin 1.05s cubic-bezier(.62, .02, .31, 1) both;
}
.splash-word {
  margin-top: 14px;
  font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: .4px;
  color: var(--brand-word);
  opacity: 0;
  animation: ds-word-in .55s ease-out .3s both;
}
.splash-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--brand-sub);
  opacity: 0;
  animation: ds-word-in .55s ease-out .45s both;
}
@keyframes ds-gear-spin {
  /* Прозрачность не трогаем: чистый поворот и масштаб считаются надёжнее
     (и не дают «мерцания», если браузер сбрасывает кадр анимации). */
  from { transform: rotate(-135deg) scale(.62); }
  to   { transform: rotate(0deg) scale(1); }
}
@keyframes ds-word-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-gear, .splash-word, .splash-sub { animation: none; opacity: 1; }
}