/* ============================================================
   wow.css — low-wow шар для VERON (окремий файл, вимикається
   видаленням підключення або зміною data-wow на <html>).

   Нічого з базової верстки/логіки не чіпає: сайт уже мав власну
   .reveal-систему (script.js: initReveal/IntersectionObserver) —
   цей файл її НЕ дублює, лише додає:
     1) тонку фактуру «зерна» на весь сайт (дуже дешево, суто CSS);
     2) сигнатурний перехід «відчинені двері» — одна тонка лінія під
        hero на головній, що розходиться навпіл при скролі (.wow-doors,
        додається через wow.js, тільки на index.html).

   Каталог/картка товару/адмінка/калькулятор цей файл НЕ підключають
   (лишаються максимально швидкими — так і задумано).
   ============================================================ */

html[data-wow] {
  --wow-grain-opacity: .035;
}

html[data-wow]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--wow-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html[data-wow]::before { display: none; }
}

.wow-doors {
  position: relative;
  height: 1px;
  margin: 0 auto;
  max-width: var(--container);
  padding: 0 20px;
  overflow: visible;
}
.wow-doors__line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--line);
  transition: width 1.1s var(--ease-out), left 1.1s var(--ease-out), background-color .6s var(--ease-out);
}
.wow-doors__line--l { transform: translateX(-100%); }
.wow-doors.is-open .wow-doors__line {
  width: calc(50% - 20px);
  background: var(--tan);
}
.wow-doors.is-open .wow-doors__line--l { left: 20px; transform: none; }
.wow-doors.is-open .wow-doors__line--r { left: auto; right: 20px; width: calc(50% - 20px); }
.wow-doors__line--r { left: auto; right: 50%; width: 0; }

@media (prefers-reduced-motion: reduce) {
  .wow-doors__line { transition: none; }
}