/* ==================================================================
   WEVOLVED — destruction-mode.css
   Estilos do "Destruction Mode" (assets/js/destruction-mode.js).
   Começa desligado; o botão fica no canto inferior direito e, com o
   rato por cima (ou toque), abre as definições.
   Atalhos: C liga/desliga, R repõe, Esc restaura a página.
   Clicar numa palavra (H1–H6/P) solta as letras; clicar numa imagem
   desfá-la em píxeis. Ao abrir um pop-up, a página é reposta.
   ================================================================== */

#wvd-controls {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 2147483646 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  font:
    12px/1.5 Arial,
    sans-serif !important;
  color: #fff !important;
  max-width: calc(100vw - 32px) !important;
}
#wvd-controls *,
#wvd-toast {
  box-sizing: border-box;
}
#wvd-controls [hidden],
#wvd-pixel-canvas[hidden] {
  display: none !important;
}
#wvd-controls button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}
#wvd-controls .wvd-play-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #191a1b;
  color: #fff;
  border: 1px solid #555;
  border-radius: 999px;
  padding: 13px 18px;
  box-shadow: 0 8px 28px #0004;
  min-height: 46px;
}
#wvd-controls .wvd-play-toggle[aria-pressed="true"] {
  background: #e60a48;
  border-color: #e60a48;
}
#wvd-controls .wvd-play-toggle svg {
  width: 19px;
  height: 19px;
  flex: none;
}
#wvd-controls .wvd-dot {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  display: block;
}
#wvd-controls .wvd-play-toggle[aria-pressed="true"] .wvd-dot {
  background: white;
  box-shadow: 0 0 8px #fff6;
}
#wvd-controls .wvd-play-panel {
  width: 284px;
  max-width: 100%;
  padding: 19px;
  background: #191a1bf5;
  border: 1px solid #ffffff24;
  border-radius: 16px;
  box-shadow: 0 12px 40px #0005;
  backdrop-filter: blur(14px);
  color: white;
  text-align: left;
}
#wvd-controls .wvd-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
#wvd-controls .wvd-live {
  color: #ff6c96;
  font-size: 9px;
  letter-spacing: 1.2px;
}
#wvd-controls p {
  font:
    11px/1.65 Arial,
    sans-serif !important;
  color: #ddd !important;
  margin: 12px 0 16px !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#wvd-controls .wvd-play-keys {
  display: inline-block;
  margin-top: 8px;
  color: #999;
  font-size: 10px;
}
#wvd-controls .wvd-strength {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin: 0 0 5px;
  color: #ccc;
}
#wvd-controls input[type="range"] {
  display: block;
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  accent-color: #e60a48;
  cursor: pointer;
}
#wvd-controls output {
  font: inherit;
  color: #ff6c96;
}
#wvd-controls .wvd-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: #aaa;
}
#wvd-controls .wvd-panel-footer button {
  padding: 7px 9px;
  border: 1px solid #555;
  background: transparent;
  border-radius: 7px;
  color: #fff;
  white-space: nowrap;
}
#wvd-controls button:focus-visible,
#wvd-controls input:focus-visible {
  outline: 2px solid #ff8aad;
  outline-offset: 4px;
}
#wvd-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 2147483647;
  transform: translate(-50%, 10px);
  padding: 11px 16px;
  border-radius: 10px;
  background: #191a1bf5;
  color: #fff;
  box-shadow: 0 6px 25px #0004;
  font:
    12px/1.5 Arial,
    sans-serif;
  max-width: calc(100vw - 32px);
  width: max-content;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
#wvd-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#wvd-pixel-canvas,
#wvd-pixel-slots {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
}
#wvd-pixel-slots {
  z-index: 2147482999;
}
[data-wvd-pixel-hidden] {
  visibility: hidden !important;
}
.wvd-pixel-slot {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px dashed #e60a4880;
  border-radius: 3px;
  color: #e60a48;
  font:
    9px/1.3 Arial,
    sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px #fff8;
  pointer-events: none;
}
@media (max-width: 600px) {
  #wvd-controls {
    right: 16px !important;
    bottom: 16px !important;
  }
  #wvd-controls .wvd-play-panel {
    width: 260px;
  }
  #wvd-toast {
    bottom: 78px;
  }
}
.wvd-disconnect-run {
  display: contents !important;
}
.wvd-disconnect-word {
  display: inline !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  white-space: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  cursor: crosshair !important;
}
.wvd-disconnect-word[data-wvd-disconnected] {
  visibility: hidden !important;
}
#wvd-disconnect-layer,
#wvd-disconnect-slots {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  pointer-events: none;
  overflow: hidden;
  contain: layout style;
}
#wvd-disconnect-slots {
  z-index: 2147482999;
}
.wvd-disconnect-letter {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.wvd-disconnect-slot {
  position: absolute;
  border-bottom: 1px dashed #e60a4870;
  box-sizing: border-box;
  pointer-events: none;
}
/* O efeito nao deve bloquear o scroll nativo nem o pinch-to-zoom no mobile.
   Os toques continuam a ativar a destruicao atraves do evento click. */
html.wvd-disconnect,
html.wvd-disconnect body {
  touch-action: auto;
}
html.wvd-disconnect h1,
html.wvd-disconnect h2,
html.wvd-disconnect h3,
html.wvd-disconnect h4,
html.wvd-disconnect h5,
html.wvd-disconnect h6,
html.wvd-disconnect p,
html.wvd-disconnect img {
  animation-play-state: paused !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html.wvd-disconnect .text-loop .text,
html.wvd-disconnect .wpb_start_animation {
  animation-play-state: paused !important;
}
html.wvd-disconnect .container-iframe iframe {
  pointer-events: none !important;
}
html.wvd-disconnect #wvd-controls *,
html.wvd-disconnect #wvd-toast * {
  user-select: auto !important;
  cursor: auto !important;
}
html.wvd-disconnect #wvd-controls button,
html.wvd-disconnect #wvd-controls input {
  cursor: pointer !important;
}
@media (max-width: 600px) {
  #wvd-disconnect-count {
    font-size: 9px;
  }
}

#wvd-image-tiles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2147483001;
  contain: layout style;
}
.wvd-image-tile {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  box-sizing: border-box;
  background-repeat: no-repeat;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}
[data-wvd-bg-before]::before {
  background-image: var(--wvd-before-background, none) !important;
}
[data-wvd-bg-after]::after {
  background-image: var(--wvd-after-background, none) !important;
}

#wvd-controls .wvd-play-toggle {
  transition:
    background-color 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
#wvd-controls .wvd-play-toggle:hover,
#wvd-controls .wvd-play-toggle:focus-visible {
  background: #2c2c2d;
  border-color: #fff;
}
#wvd-controls .wvd-play-toggle[aria-pressed="true"]:hover {
  background: #c9093e;
  border-color: #ff8aad;
}
#wvd-controls .wvd-play-panel {
  position: relative;
}
#wvd-controls .wvd-play-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  #wvd-controls .wvd-play-toggle {
    transition: none;
  }
}

/* A native bomb cursor follows the pointer only while Destruction Mode is active. */
html.wvd-disconnect,
html.wvd-disconnect body,
html.wvd-disconnect body * {
  cursor:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M21%2011C23%208%2021%203%2026%205%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M26%201v2m4%201-2%201m1%205-2-2%22%20stroke%3D%22%23e60a48%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22m17%2012%204-3%204%204-4%204%22%20fill%3D%22%23303238%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2221%22%20r%3D%229%22%20fill%3D%22%23191a1b%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M8%2020c0-3%202-5%205-5%22%20fill%3D%22none%22%20stroke%3D%22%23bfc2cb%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%225%22%20r%3D%221.5%22%20fill%3D%22%23ff8aad%22%2F%3E%3C%2Fsvg%3E")
      14 21,
    crosshair !important;
}
html.wvd-disconnect a,
html.wvd-disconnect a :is(h1, h2, h3, h4, h5, h6, p) {
  cursor: pointer !important;
}
/* The site's decorative cursor returns automatically when the mode is disabled. */
html.wvd-disconnect #cursor {
  display: none !important;
}
