/* ============================================================================
   ЗНАК SKR В ГЕРОЕ: СОБИРАЕТСЯ ИЗ ТОЧЕК. 18.09.2026
   Просьба владельца дословно: «по центру типа логотип и чтобы он появлялся из
   точек, а заставку саму изначальную убрать». Полноэкранная заставка .intro
   снята из index.html, класс html.intro-lock больше НИКОГДА не ставится,
   ключ sessionStorage ae_intro не нужен. Правила «ИНТРО» в styles.css
   остались мёртвыми намеренно: тот файл правят соседи.

   Устройство: контейнер фиксированной высоты (без CLS) первым в потоке
   героя, над плашкой и заголовком. В нём холст на всю ширину героя и поверх
   него svg-знак #i-skr. Точки рисует app.js (particleIntro): слетаются к
   пикселям знака, 300 мс держатся, затем знак проявляется (opacity 500 мс),
   холст гаснет и кадры останавливаются навсегда - телефон не греется.

   Порог 1199px взят из mobile.css и bottom-nav-strip.css (там же переключается
   нижняя панель), а не придуман. Высота 200 на десктопе / 130 на телефоне и
   планшете задана заранее: контейнер не зависит ни от шрифта, ни от JS, и
   ничего под ним не прыгает. Пропорция знака 194.13 x 82.01 = 2.37:1 - из
   viewBox символа. viewBox на внешний <svg> НЕ ставить: у символа свой,
   иначе знак съезжает (поймано 11.09.2026).

   Запреты соблюдены: без библиотек, без backdrop-filter, анимируются только
   opacity, всё гасится по prefers-reduced-motion (знак сразу статичный).
   ========================================================================== */
.hero-mark-wrap{
  position:relative; z-index:1;           /* выше холста-созвездия и луча (оба z-index:0) */
  height:200px;
  margin:-16px 0 8px;                     /* верхнее поле героя 76px, знаку хватает 60: иначе калькулятор уезжал бы лишние 16px */
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;                    /* кликов не ловит, курсор идёт сквозь */
  overflow:visible;
}
.hero-mark{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; display:block;
  opacity:1; transition:opacity 500ms ease;
}
.hero-mark.is-off{ opacity:0; }
.hero-mark__logo{
  position:relative; z-index:1;
  display:block; width:400px; max-width:72vw;
  aspect-ratio:194.13 / 82.01; height:auto;
  color:#fff; fill:currentColor; overflow:visible;
  opacity:0; transition:opacity 500ms ease;
  /* Свечение акцента - пометка важного, не заливка: та же дозировка, что
     была у знака на заставке. */
  filter:drop-shadow(0 0 22px rgba(79,196,233,.18));
}
.hero-mark__logo.is-on{ opacity:1; }

/* Телефон и планшет: тот же порог, что у нижней панели. Знак ~280px шириной
   (118px высотой) в контейнере 130px. На 320px max-width режет до 230px. */
@media (max-width:1199px){
  .hero-mark-wrap{ height:130px; margin:-10px 0 10px; }  /* низ знака -> плашка 16px, замер 390: при 4px было 10px, тесно */
  .hero-mark__logo{ width:280px; }
}

/* Печать: точки только жрут тонер, знак пусть стоит. */
@media print{
  .hero-mark{ display:none !important; }
  .hero-mark__logo{ opacity:1 !important; filter:none; }
}

/* Меньше движения: холста нет, знак стоит сразу. Дублируем и в CSS, чтобы
   при любом сбое JS знак всё равно был виден. */
@media (prefers-reduced-motion: reduce){
  .hero-mark{ display:none !important; }
  .hero-mark__logo{ opacity:1; transition:none; }
}