/* Большие эффекты: акварель и блёстки. ФАЙЛ СОБРАН: node tools/build-effects-big.js из css/wow2/{fluid,glitter}.css. */
/* Живая акварель (модуль fluid): холст с WebGL-симуляцией жидкости под текстом и стикерами первого экрана.
   Всё под html.fx-fluid. Холст вставляет js/wow2/fluid.js последним ребёнком .hero.
   mix-blend-mode:multiply здесь нет намеренно: у .hero isolation:isolate и нет своего фона, умножать было бы не с чем
   (холст стал бы белым прямоугольником). Умножение на цвет бумаги считает шейдер, кадр приходит с прозрачностью —
   это ещё и дешевле для Safari на iPhone, чем режим наложения на большом слое. */
html.fx-fluid .hero > canvas.fx-fluid{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  display:block;width:100%;height:100%;
  z-index:0;               /* над .glow и пятнами света .fx-light (effects.js добавляет их позже — модуль возвращает холст в конец .hero в первом кадре), под стикерами (1) и текстом (2) */
  pointer-events:none;     /* текст и кнопка «Написать» остаются кликабельными */
  opacity:0;transition:opacity .7s ease;
}
html.fx-fluid .hero > canvas.fx-fluid.is-on{opacity:1}

/* мелкий текст поверх краски: мягкий ореол цвета бумаги, на чистом листе он не виден.
   Класс fx-fluid-live на .hero ставит модуль, только когда симуляция действительно запустилась */
html.fx-fluid .hero.fx-fluid-live .hero__sub,
html.fx-fluid .hero.fx-fluid-live .eyebrow,
html.fx-fluid .hero.fx-fluid-live .scroll-hint{
  text-shadow:0 0 .45em rgba(248,233,238,.95),0 0 1.1em rgba(248,233,238,.8);
}

/* просили без движения: модуль не стартует, а если холст всё же есть — прячем */
@media (prefers-reduced-motion:reduce){
  html.fx-fluid .hero > canvas.fx-fluid{display:none}
}


/* Блёстки слетаются в «miwlso». Всё под html.fx-glitter (кроме keyframes).
   Слои создаёт js/wow2/glitter.js: canvas.fx-glitter (блёстки) и div.fx-glitter-stage (сцена интро). */

/* слой блёсток: на весь экран, поверх бумаги и текста (main — z-index 1), под меню .pill (50);
   клики и прокрутка проходят насквозь */
html.fx-glitter canvas.fx-glitter{
  position:fixed;left:0;top:0;width:100%;height:100%;z-index:5;display:block;
  pointer-events:none;background:none;
}
/* интро и разлёт: слой над всей страницей, выше только панель прототипа (1200) */
html.fx-glitter canvas.fx-glitter.is-intro{z-index:1150}
/* первый экран не виден или эффект остановлен: слой не участвует в отрисовке */
html.fx-glitter canvas.fx-glitter.is-off{visibility:hidden}

/* сцена интро: «пустая бумага» закрывает страницу, за словом — мягкое розовое свечение (на нём белые искры
   читаются). Размер свечения (--gw/--gh) ставит скрипт по размеру надписи. При раскрытии сцена тает за .7s */
html.fx-glitter .fx-glitter-stage{
  position:fixed;left:0;top:0;width:100%;height:100%;z-index:1149;pointer-events:none;
  background:#F8E9EE;opacity:0;visibility:hidden;
  transition:opacity .7s ease,visibility 0s linear .7s;
}
html.fx-glitter .fx-glitter-stage.is-on{opacity:1;visibility:visible;transition:none}
html.fx-glitter .fx-glitter-stage::before{
  content:"";position:absolute;left:0;top:0;right:0;bottom:0;
  background:radial-gradient(ellipse var(--gw,80vw) var(--gh,36vh) at 50% 44%,rgba(232,162,187,.62) 0%,rgba(244,201,214,.4) 50%,rgba(248,233,238,0) 100%);
}
html.fx-glitter .fx-glitter-stage.is-on::before{animation:fxGlitterGlow .9s ease both}
@keyframes fxGlitterGlow{from{opacity:0}to{opacity:1}}

/* укрытие до запуска модуля: инлайн-скрипт в начале <body> index-wow2.html (tools/build-wow2-demo.js) повторяет решение
   каркаса «glitter включён и будет интро» и ставит html.fx-glitter-pre ещё до первой отрисовки — иначе на медленной сети
   зритель видит готовый сайт → мигание js-intro → пустую бумагу сцены. Нарочно не под html.fx-glitter: его ещё нет.
   Снимает glitter.js при init (и сам инлайн на DOMContentLoaded, первой прокрутке и по таймеру — страховка).
   z-index 1148: сразу под сценой интро (1149), выше меню .pill (50) */
html.fx-glitter-pre body::before{
  content:"";position:fixed;left:0;top:0;width:100%;height:100%;z-index:1148;pointer-events:none;
  background:#F8E9EE;
}

/* пока играет интро, содержимое первого экрана спрятано; подъём слов и маркер под «reels» ждут раскрытия */
html.fx-glitter.fx-glitter-intro .hero .wrap,
html.fx-glitter.fx-glitter-intro .hero .sticker,
html.fx-glitter.fx-glitter-intro .hero .fx-sheen,
html.fx-glitter.fx-glitter-intro .top,
html.fx-glitter.fx-glitter-intro .pill{visibility:hidden}
html.fx-glitter.fx-glitter-intro .w__i{animation:none}
html.fx-glitter.fx-glitter-intro .hero .display em::before{transform:scaleX(0);transition:none}

@media (prefers-reduced-motion:reduce){
  html.fx-glitter .fx-glitter-stage{transition:none}
  html.fx-glitter .fx-glitter-stage.is-on::before{animation:none}
}