/* ============================================================================
   site/velaris.css — место «Велариса» (velaris.js) в разделе.

   Холст лежит под содержимым раздела на всю его площадь. Раздел сам остаётся
   плитой со своей заливкой (--slab-mix): это и есть картинка без WebGL, и
   она же видна те доли секунды, пока собирается шейдер. Холст проявляется
   после ПЕРВОГО нарисованного кадра (класс velaris-on ставит velaris-mount),
   иначе поверх плиты моргнул бы чёрный прямоугольник.

   overflow:hidden на раздел НЕ вешаем: в нём живёт липкая колонка формы
   заявки, а sticky внутри overflow-контейнера перестаёт прилипать.
   Холст и так не выходит за раздел — inset:0.
   ========================================================================== */

.has-velaris{ position:relative; isolation:isolate }

/* Класс сильнее правила `main > section > *` (оно поднимает всех детей
   раздела над замесом стыка): холсту нужен нулевой слой. */
.velaris-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.1s cubic-bezier(.22,1,.36,1);
}
.velaris-on .velaris-canvas{ opacity:1 }

/* Первому разделу страницы плита радиуса не даёт, а у прочих холст обязан
   повторять скруглённый верх — иначе прямые углы холста торчат из-под дуги. */
main > section + section.has-velaris .velaris-canvas{
  border-start-start-radius:var(--tab-r);
  border-start-end-radius:var(--tab-r);
}

.has-velaris > *:not(.velaris-canvas){ position:relative; z-index:1 }

@media (prefers-reduced-motion: reduce){
  .velaris-canvas{ transition:none }
}