/* Estilos para o Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #006d67; /* Fundo verde escuro */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease-out, visibility 0.6s;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px; /* Reduzido de 80px */
  height: 60px; /* Reduzido de 80px */
}

/* Container do ícone com máscara de recorte */
.icon-container {
  position: relative;
  width: 50px; /* Reduzido de 70px */
  height: 50px; /* Reduzido de 70px */
  margin-bottom: 0;
}

/* Ícone base (estático) */
.icon-base {
  position: absolute;
  top: 100%;
  left: 120%;
  transform: translate(-100%, -100%);
  width: 150%;
  height: 150%;
  background: url("../images/anima_loading_loop.gif") no-repeat center center;
  background-size: contain;
}

/* Ícone que será animado (preenchido) */
.icon-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/icon.png") no-repeat center center;
  background-size: contain;
  clip-path: inset(100% 0 0 0); /* Inicialmente oculto (100% do topo) */
  animation: fillIcon 2.5s ease-in-out infinite;
  filter: sepia(100%) saturate(300%) hue-rotate(350deg) brightness(120%); /* Torna o ícone amarelo */
}

/* Ícone para o brilho*/
.icon-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: shineEffect 2.5s ease-in-out infinite;
  opacity: 0;
}

/* Porcentagem de carregamento */
.loading-percentage {
  position: absolute;
  bottom: -16px; /* Ajustado de -20px */
  font-family: Arial, sans-serif;
  font-size: 12px; /* Reduzido de 14px */
  font-weight: bold;
  color: #fff; /* Branco */
  animation: countUp 2.5s ease-in-out infinite;
}

/* Animação de preenchimento do ícone de baixo para cima */
@keyframes fillIcon {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  50.1% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}

/* Animação do efeito de brilho */
@keyframes shineEffect {
  0% {
    opacity: 0;
    background-position: -100% 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
    background-position: 200% 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    background-position: 200% 0;
  }
}

/* Animação de contagem percentual */
@keyframes countUp {
  0% {
    content: "0%";
  }
  10% {
    content: "10%";
  }
  20% {
    content: "20%";
  }
  30% {
    content: "30%";
  }
  40% {
    content: "40%";
  }
  50% {
    content: "100%";
  }
  60% {
    content: "90%";
  }
  70% {
    content: "80%";
  }
  80% {
    content: "70%";
  }
  90% {
    content: "60%";
  }
  100% {
    content: "0%";
  }
}

/* Animação de piscar */
@keyframes blink {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}