/* Estilos e animações da modal "Unfolding" */

.modal-container-wrapper {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 3000;
}

/* Animação de Entrada (Unfolding) */
.modal-container-wrapper.unfolding-in {
  transform: scaleY(0.01) scaleX(0);
  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-container-wrapper.unfolding-in .modal-background .modal-content-box {
  transform: scale(0);
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Animação de Saída (Unfolding) */
.modal-container-wrapper.unfolding-out {
  transform: scale(1);
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-container-wrapper.unfolding-out .modal-background .modal-content-box {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}

.modal-content-box {
  background: white;
  padding: 40px 50px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 300;
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
}

.modal-content-box h2 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 20px;
  /* border-bottom: 2px solid #eee; */
  padding-bottom: 15px;
  color: var(--cor-primaria);
}

.modal-content-box p {
  font-size: 18px;
  line-height: 1.8;
  color: #555;
}

.modal-content-box .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  pointer-events: none; /* Garante que o SVG não interfira com cliques */
}

.modal-content-box .modal-svg rect {
  /*stroke: var(--cor-primaria);  Usando a cor do seu site */
  stroke-width: 3px;
  stroke-dasharray: 1200; /* Um valor alto para cobrir o perímetro */
  stroke-dashoffset: 1200;
}

/* Animação do SVG (desenho da borda) */
.modal-container-wrapper.unfolding-in .modal-content-box .modal-svg rect {
    animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-content-box .modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}

/* Keyframes - As animações em si */
@keyframes unfoldIn {
  0% { transform: scaleY(0.005) scaleX(0); }
  50% { transform: scaleY(0.005) scaleX(1); }
  100% { transform: scaleY(1) scaleX(1); }
}

@keyframes unfoldOut {
  0% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(0.005) scaleX(1); }
  100% { transform: scaleY(0.005) scaleX(0); }
}

@keyframes zoomIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes zoomOut {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes sketchIn {
  0% { stroke-dashoffset: 1200; }
  100% { stroke-dashoffset: 0; }
}