/* =========================================================
   Z-MODAL — Janela de Avisos (Sistema Zeus)
   ---------------------------------------------------------
   Estrutura HTML esperada (gerada em footer.php):

   <div id="z_ads_window" class="z-modal-overlay" style="display:none;">
     <div class="z-modal-content [tamanho] [z-anim-*]">
       <button class="z-modal-close">&times;</button>
       <div class="z-ads-body">...</div>
     </div>
   </div>

   - .z-modal-overlay  -> fundo escurecido em tela cheia
   - .z-modal-content  -> caixa do modal (recebe a classe de animação)
   - [tamanho]         -> modal-sm | modal-lg | modal-xl | modal-fullscreen
   - [z-anim-*]         -> uma das animações abaixo (z-anim-zoom, z-anim-fade...)
   ========================================================= */

/* ---------- ESTRUTURA BASE ---------- */

.z-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  animation: zModalOverlayFadeIn 0.4s ease forwards;
}

@keyframes zModalOverlayFadeIn {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

.z-modal-content {
  position: relative;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  padding: 40px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);

  /* parâmetros comuns das animações de entrada */
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.z-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.z-modal-close:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #000;
}

.z-ads-body {
  text-align: center;
}

.z-ads-body img {
  max-width: 100%;
  height: auto;
}

/* ---------- TAMANHOS ---------- */

.z-modal-content.modal-sm {
  max-width: 360px;
}

.z-modal-content.modal-lg {
  max-width: 800px;
}

.z-modal-content.modal-xl {
  max-width: 1100px;
}

.z-modal-content.modal-fullscreen {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   Cada opção corresponde ao valor salvo em
   'set_ads_window_modal_animation' -> classe "z-anim-{valor}"
   ========================================================= */

/* ---- Zoom ---- */
.z-anim-zoom {
  animation-name: zModalZoomIn;
}

@keyframes zModalZoomIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---- Fade ---- */
.z-anim-fade {
  animation-name: zModalFadeIn;
}

@keyframes zModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Slide (sobe de baixo para cima) ---- */
.z-anim-slide {
  animation-name: zModalSlideUp;
}

@keyframes zModalSlideUp {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- Desdobrar (unfold) ---- */
.z-anim-unfold {
  animation-name: zModalUnfold;
}

@keyframes zModalUnfold {
  0% {
    transform: scaleY(0.01) scaleX(0);
    opacity: 0;
  }
  50% {
    transform: scaleY(0.01) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1) scaleX(1);
    opacity: 1;
  }
}

/* ---- Revelar (sobe com leve aumento de escala) ---- */
.z-anim-reveal {
  animation-name: zModalReveal;
}

@keyframes zModalReveal {
  from {
    transform: scale(0.8) translateY(150px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ---- Descobrir (desliza do topo, tipo cortina) ---- */
.z-anim-uncover {
  animation-name: zModalUncover;
}

@keyframes zModalUncover {
  from {
    transform: translateY(-120%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- Explosão (blow up): caixa estoura + conteúdo aparece depois ---- */
.z-anim-blowup {
  animation-name: zModalBlowUp;
}

@keyframes zModalBlowUp {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.z-anim-blowup .z-ads-body {
  opacity: 0;
  animation: zModalBlowUpContent 0.5s 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes zModalBlowUpContent {
  from {
    transform: scale(1.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---- Meep Meep (entra deslizando da lateral, tipo Papa-Léguas) ---- */
.z-anim-meep {
  animation-name: zModalMeepIn;
}

@keyframes zModalMeepIn {
  0% {
    transform: translateX(-200%) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform: translateX(15px) skewX(0deg) scaleX(0.95);
  }
  100% {
    transform: translateX(0) skewX(0deg) scaleX(1);
  }
}

/* ---- Iris (efeito "Bond": revela em círculo a partir do centro) ---- */
.z-anim-bond {
  animation-name: zModalBondIn;
}

@keyframes zModalBondIn {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  to {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
}

/* ---------- ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion: reduce) {
  .z-modal-overlay,
  .z-modal-content,
  .z-anim-blowup .z-ads-body {
    animation: none !important;
  }
}

/* =========================================================
   ANIMAÇÕES DE SAÍDA (OUT)
   ========================================================= */

.z-overlay-closing {
  animation: zModalOverlayFadeOut 0.4s ease forwards !important;
}
@keyframes zModalOverlayFadeOut {
  from { background-color: rgba(0, 0, 0, 0.7); }
  to { background-color: rgba(0, 0, 0, 0); }
}

.z-anim-zoom-out { animation-name: zModalZoomOut !important; }
@keyframes zModalZoomOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0); opacity: 0; }
}

.z-anim-fade-out { animation-name: zModalFadeOut !important; }
@keyframes zModalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.z-anim-slide-out { animation-name: zModalSlideDown !important; }
@keyframes zModalSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(60px); opacity: 0; }
}

.z-anim-unfold-out { animation-name: zModalUnfoldOut !important; }
@keyframes zModalUnfoldOut {
  0% { transform: scaleY(1) scaleX(1); opacity: 1; }
  50% { transform: scaleY(0.01) scaleX(1); opacity: 1; }
  100% { transform: scaleY(0.01) scaleX(0); opacity: 0; }
}

.z-anim-reveal-out { animation-name: zModalRevealOut !important; }
@keyframes zModalRevealOut {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to { transform: scale(0.8) translateY(150px); opacity: 0; }
}

.z-anim-uncover-out { animation-name: zModalUncoverOut !important; }
@keyframes zModalUncoverOut {
  from { transform: translateY(0); opacity: 1; }
  40% { opacity: 1; }
  to { transform: translateY(-120%); opacity: 0; }
}

.z-anim-blowup-out { animation-name: zModalBlowUpOut !important; }
@keyframes zModalBlowUpOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0); opacity: 0; }
}

.z-anim-meep-out { animation-name: zModalMeepOut !important; }
@keyframes zModalMeepOut {
  0% { transform: translateX(0) skewX(0deg) scaleX(1); }
  30% { transform: translateX(15px) skewX(0deg) scaleX(0.95); }
  100% { transform: translateX(200%) skewX(-30deg) scaleX(1.3); }
}

.z-anim-bond-out { animation-name: zModalBondOut !important; }
@keyframes zModalBondOut {
  from { clip-path: circle(150% at 50% 50%); opacity: 1; }
  to { clip-path: circle(0% at 50% 50%); opacity: 0; }
}