/**
 * Jooy Canvas Scroll — estilos do bloco injetado
 * .jooy-canvas-host__wrap = canvas + overlay; largura min(100vw,100% do host)
 * para não esticar o canvas à largura de um flex-row inteiro (saltos ao pin). Fundos transparentes.
 * O teu HTML permanece como filhos diretos do .jooy-canvas-host, por cima do wrap (painting order).
 *
 * Wrap em z-index 0 + filhos diretos (exceto wrap) em z-index 1: o canvas fica atrás do
 * conteúdo Elementor sem usar z-index negativo (que o escondia por trás do fundo do host ou de stacking contexts dos ascendentes). Ver JOOY-CANVAS.md (checklist).
 */

.jooy-canvas-host {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: transparent;
  overflow: visible;
}

.jooy-canvas-host > :not(.jooy-canvas-host__wrap) {
  position: relative;
  z-index: 1;
}

.jooy-canvas-host__wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: 100%;
  transform: translateX(-50%);
  z-index: 0;
  background: transparent;
  overflow: hidden;
}

.jooy-canvas-host canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

.jooy-canvas-host__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: transparent;
}

.jooy-canvas-host__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  font-size: 16px;
  transition: opacity 0.35s ease;
}

.jooy-canvas-host__loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}