.z-button {
  pointer-events: auto;
}
.z-pointer-none {
  pointer-events: none;
}

/* Animation Passando para Baixo*/
.z-appeared {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Overlay – Estado base
   ========================= */
.z-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

/* --------- FADE --------- */
.z-overlay-fade { opacity: 0; transition: opacity .5s ease; }

/* --------- ZOOM --------- */
.z-overlay-zoom { transform: scale(0); opacity: 0; transition: transform .4s ease, opacity .4s ease; }

/* ----- SLIDE TOP/BOTTOM ----- */
.z-overlay-slide-top    { height: 0; overflow: hidden; transition: height .5s ease, opacity .5s ease; opacity: 0; }
.z-overlay-slide-bottom { height: 0; overflow: hidden; transition: height .5s ease, opacity .5s ease; opacity: 0; bottom: 0; position: absolute; }

/* ----- SLIDE LEFT/RIGHT ----- */
.z-overlay-slide-left  { width: 0; overflow: hidden; transition: width .5s ease, opacity .5s ease; opacity: 0; }
.z-overlay-slide-right { width: 0; overflow: hidden; transition: width .5s ease, opacity .5s ease; opacity: 0; right: 0; position: absolute; }

/* ----- INSIDE-OUT (zoom do centro) ----- */
.z-overlay-inside-out { transform: scale(.2); opacity: 0; transition: transform .4s ease, opacity .4s ease; transform-origin: center; }

/* --------- ROTATE --------- */
.z-overlay-rotate { transform: rotate(-90deg) scale(0); opacity: 0; transition: transform .5s ease, opacity .5s ease; }

/* ---- FLIP HORIZONTAL ---- */
.z-overlay-flip-horizontal { transform: rotateY(90deg); opacity: 0; transition: transform .5s ease, opacity .5s ease; transform-origin: center; }

/* ---------- PULSE ---------- */
.z-overlay-pulse { transform: scale(.5); opacity: 0; transition: transform .4s cubic-bezier(0.68,-0.55,0.265,1.55), opacity .4s ease; }

/* ---------- BLUR ---------- */
.z-overlay-blur { filter: blur(10px); opacity: 0; transition: filter .5s ease, opacity .5s ease; }

/* ---- SLIDE DIAGONAL ---- */
.z-overlay-slide-diagonal { transform: translate(-100%, -100%); opacity: 0; transition: transform .4s ease, opacity .4s ease; }

/* =========================================================
   Gatilhos genéricos de “abrir” overlay
   Funcionam para: .z-button, .z-imgs, .z-box
   ========================================================= */

/* 1) Via :hover no contêiner */
.z-button:hover .z-overlay-fade,
.z-imgs:hover   .z-overlay-fade,
.z-box:hover    .z-overlay-fade { opacity: 1; }

.z-button:hover .z-overlay-zoom,
.z-imgs:hover   .z-overlay-zoom,
.z-box:hover    .z-overlay-zoom { transform: scale(1); opacity: 1; }

.z-button:hover .z-overlay-slide-top,
.z-imgs:hover   .z-overlay-slide-top,
.z-box:hover    .z-overlay-slide-top { height: 100%; opacity: 1; }

.z-button:hover .z-overlay-slide-bottom,
.z-imgs:hover   .z-overlay-slide-bottom,
.z-box:hover    .z-overlay-slide-bottom { height: 100%; opacity: 1; }

.z-button:hover .z-overlay-slide-left,
.z-imgs:hover   .z-overlay-slide-left,
.z-box:hover    .z-overlay-slide-left { width: 100%; opacity: 1; }

.z-button:hover .z-overlay-slide-right,
.z-imgs:hover   .z-overlay-slide-right,
.z-box:hover    .z-overlay-slide-right { width: 100%; opacity: 1; left: 0; right: auto; }

.z-button:hover .z-overlay-inside-out,
.z-imgs:hover   .z-overlay-inside-out,
.z-box:hover    .z-overlay-inside-out { transform: scale(1); opacity: 1; }

.z-button:hover .z-overlay-rotate,
.z-imgs:hover   .z-overlay-rotate,
.z-box:hover    .z-overlay-rotate { transform: rotate(0deg) scale(1); opacity: 1; }

.z-button:hover .z-overlay-flip-horizontal,
.z-imgs:hover   .z-overlay-flip-horizontal,
.z-box:hover    .z-overlay-flip-horizontal { transform: rotateY(0deg); opacity: 1; }

.z-button:hover .z-overlay-pulse,
.z-imgs:hover   .z-overlay-pulse,
.z-box:hover    .z-overlay-pulse { transform: scale(1); opacity: 1; }

.z-button:hover .z-overlay-blur,
.z-imgs:hover   .z-overlay-blur,
.z-box:hover    .z-overlay-blur { filter: blur(0); opacity: 1; }

.z-button:hover .z-overlay-slide-diagonal,
.z-imgs:hover   .z-overlay-slide-diagonal,
.z-box:hover    .z-overlay-slide-diagonal { transform: translate(0,0); opacity: 1; }

/* 2) Via classe .is-open no contêiner (sem hover, sem JS extra) */
.z-button.is-open .z-overlay-fade,
.z-imgs.is-open   .z-overlay-fade,
.z-box.is-open    .z-overlay-fade { opacity: 1; }

.z-button.is-open .z-overlay-zoom,
.z-imgs.is-open   .z-overlay-zoom,
.z-box.is-open    .z-overlay-zoom { transform: scale(1); opacity: 1; }

.z-button.is-open .z-overlay-slide-top,
.z-imgs.is-open   .z-overlay-slide-top,
.z-box.is-open    .z-overlay-slide-top { height: 100%; opacity: 1; }

.z-button.is-open .z-overlay-slide-bottom,
.z-imgs.is-open   .z-overlay-slide-bottom,
.z-box.is-open    .z-overlay-slide-bottom { height: 100%; opacity: 1; }

.z-button.is-open .z-overlay-slide-left,
.z-imgs.is-open   .z-overlay-slide-left,
.z-box.is-open    .z-overlay-slide-left { width: 100%; opacity: 1; }

.z-button.is-open .z-overlay-slide-right,
.z-imgs.is-open   .z-overlay-slide-right,
.z-box.is-open    .z-overlay-slide-right { width: 100%; opacity: 1; left: 0; right: auto; }

.z-button.is-open .z-overlay-inside-out,
.z-imgs.is-open   .z-overlay-inside-out,
.z-box.is-open    .z-overlay-inside-out { transform: scale(1); opacity: 1; }

.z-button.is-open .z-overlay-rotate,
.z-imgs.is-open   .z-overlay-rotate,
.z-box.is-open    .z-overlay-rotate { transform: rotate(0deg) scale(1); opacity: 1; }

.z-button.is-open .z-overlay-flip-horizontal,
.z-imgs.is-open   .z-overlay-flip-horizontal,
.z-box.is-open    .z-overlay-flip-horizontal { transform: rotateY(0deg); opacity: 1; }

.z-button.is-open .z-overlay-pulse,
.z-imgs.is-open   .z-overlay-pulse,
.z-box.is-open    .z-overlay-pulse { transform: scale(1); opacity: 1; }

.z-button.is-open .z-overlay-blur,
.z-imgs.is-open   .z-overlay-blur,
.z-box.is-open    .z-overlay-blur { filter: blur(0); opacity: 1; }

.z-button.is-open .z-overlay-slide-diagonal,
.z-imgs.is-open   .z-overlay-slide-diagonal,
.z-box.is-open    .z-overlay-slide-diagonal { transform: translate(0,0); opacity: 1; }

/* 3) Via classe no próprio overlay (forçar aberto) */
.z-overlay.z-trigger.z-overlay-fade               { opacity: 1; }
.z-overlay.z-trigger.z-overlay-zoom               { transform: scale(1); opacity: 1; }
.z-overlay.z-trigger.z-overlay-slide-top          { height: 100%; opacity: 1; }
.z-overlay.z-trigger.z-overlay-slide-bottom       { height: 100%; opacity: 1; }
.z-overlay.z-trigger.z-overlay-slide-left         { width: 100%; opacity: 1; }
.z-overlay.z-trigger.z-overlay-slide-right        { width: 100%; opacity: 1; left: 0; right: auto; }
.z-overlay.z-trigger.z-overlay-inside-out         { transform: scale(1); opacity: 1; }
.z-overlay.z-trigger.z-overlay-rotate             { transform: rotate(0deg) scale(1); opacity: 1; }
.z-overlay.z-trigger.z-overlay-flip-horizontal    { transform: rotateY(0deg); opacity: 1; }
.z-overlay.z-trigger.z-overlay-pulse              { transform: scale(1); opacity: 1; }
.z-overlay.z-trigger.z-overlay-blur               { filter: blur(0); opacity: 1; }
.z-overlay.z-trigger.z-overlay-slide-diagonal     { transform: translate(0,0); opacity: 1; }


/* ============================
   ANIMAÇÕES GENÉRICAS
   ============================ */

/* FADE IN */
@keyframes z-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.z-anim-fade { animation: z-fade-in .5s ease both; }

/* ZOOM IN */
@keyframes z-zoom-in {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.z-anim-zoom { animation: z-zoom-in .5s ease both; }

/* ZOOM OUT */
@keyframes z-zoom-out {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.z-anim-zoom-out { animation: z-zoom-out .5s ease both; }

/* SLIDE LEFT (entra da direita → esquerda) */
@keyframes z-slide-left-in {
  from { transform: translateX(20%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.z-anim-slide-left { animation: z-slide-left-in .45s ease both; }

/* SLIDE RIGHT (entra da esquerda → direita) */
@keyframes z-slide-right-in {
  from { transform: translateX(-20%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.z-anim-slide-right { animation: z-slide-right-in .45s ease both; }

/* SLIDE TOP (entra de cima) */
@keyframes z-slide-top-in {
  from { transform: translateY(-20%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.z-anim-slide-top { animation: z-slide-top-in .45s ease both; }

/* SLIDE BOTTOM (entra de baixo) */
@keyframes z-slide-bottom-in {
  from { transform: translateY(20%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.z-anim-slide-bottom { animation: z-slide-bottom-in .45s ease both; }

/* ROTATE IN */
@keyframes z-rotate-in {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg);   opacity: 1; }
}
.z-anim-rotate { animation: z-rotate-in .5s ease both; }

/* FLIP HORIZONTAL */
@keyframes z-flip-horizontal-in {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0);     opacity: 1; }
}
.z-anim-flip-horizontal { animation: z-flip-horizontal-in .5s ease both; }

/* FLIP VERTICAL */
@keyframes z-flip-vertical-in {
  from { transform: rotateX(90deg); opacity: 0; }
  to   { transform: rotateX(0);     opacity: 1; }
}
.z-anim-flip-vertical { animation: z-flip-vertical-in .5s ease both; }

/* PULSE (elástico) */
@keyframes z-pulse-in {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.z-anim-pulse { animation: z-pulse-in .6s cubic-bezier(0.68,-0.55,0.265,1.55) both; }

/* BLUR IN */
@keyframes z-blur-in {
  from { filter: blur(10px); opacity: 0; }
  to   { filter: blur(0);    opacity: 1; }
}
.z-anim-blur { animation: z-blur-in .5s ease both; }

/* SLIDE DIAGONAL */
@keyframes z-slide-diagonal-in {
  from { transform: translate(-20%, -20%); opacity: 0; }
  to   { transform: translate(0,0);        opacity: 1; }
}
.z-anim-slide-diagonal { animation: z-slide-diagonal-in .5s ease both; }

/* INSIDE OUT (cresce do centro) */
@keyframes z-inside-out-in {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.z-anim-inside-out { animation: z-inside-out-in .5s ease both; }