/* ==========================================================================
   AnonShield — seção "Como funciona": camada de VÍDEO na caixa da esquerda
   --------------------------------------------------------------------------
   A caixa (.mchiw-viz) já é um contêiner de altura fixa com filhos absolutos em
   z-index 3 (pílula, mockup do e-mail, tag de desconto) e overflow:hidden com
   border-radius 22px — então o vídeo entra como camada absoluta e é recortado
   pelo próprio contêiner, sem precisar repetir o raio.

   REGRA DE OURO DESTE ARQUIVO: se o vídeo não existir, NADA muda.
   O <video> nasce com [hidden]; o JS só o revela depois do evento 'loadeddata'.
   Enquanto isso (ou se o arquivo faltar / der 404) o mockup do e-mail continua
   exatamente como está hoje. Zero regressão visual.

   Camadas (z-index):
     0  blobs decorativos
     2  vídeo
     3  pílula / tag / mockup do e-mail (já existiam)
     4  botão de play
   ========================================================================== */

/* --- o vídeo --------------------------------------------------------------- */
.mc-hiw .mchiw-viz .mchiw-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* preenche a caixa 440px sem distorcer */
  z-index: 2;
  display: block;
  background: #063650;    /* mesmo navy do gradiente: evita flash branco */
}

/* [hidden] tem de vencer o display:block acima — o tema usa !important em
   vários lugares e este arquivo carrega depois, mas a especificidade aqui é
   maior que a do seletor de atributo sozinho. Deixamos explícito. */
.mc-hiw .mchiw-viz .mchiw-vid[hidden] {
  display: none !important;
}

/* Quando o vídeo carregou de verdade, o mockup do e-mail sai de cena.
   O marcador data-as-hiw-ok é posto pelo JS no .mchiw-viz. */
.mc-hiw .mchiw-viz[data-as-hiw-ok] .mchiw-key {
  display: none !important;
}

/* --- botão de play / replay ----------------------------------------------- */
.mc-hiw .mchiw-viz .mchiw-play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .94);
  color: #063650;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  transition: transform .18s ease, background .18s ease;
}

.mc-hiw .mchiw-viz .mchiw-play[hidden] {
  display: none !important;
}

.mc-hiw .mchiw-viz .mchiw-play svg {
  width: 26px;
  height: 26px;
  /* o triângulo de play parece deslocado à esquerda quando centrado
     geometricamente; 2px para a direita corrige a ilusão óptica */
  margin-left: 3px;
}

.mc-hiw .mchiw-viz .mchiw-play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

/* foco visível para teclado (acessibilidade) */
.mc-hiw .mchiw-viz .mchiw-play:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 3px;
}

/* --- quem pediu menos movimento não recebe animação ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .mc-hiw .mchiw-viz .mchiw-play {
    transition: none;
  }
  .mc-hiw .mchiw-viz .mchiw-play:hover {
    transform: translate(-50%, -50%);
  }
}