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

   Холст лежит под содержимым раздела на всю его площадь. Под ним — общее
   полотно страницы (tone.js): это и есть картинка без 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 }
.velaris-canvas{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - clamp(120px,18vh,240px)), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - clamp(120px,18vh,240px)), transparent);
}

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

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