/* Split-Flap Display CSS */
/* Importar fonte Oswald para melhor aparência dos números */

/* Container principal dos split-flaps com layout colorido */
.split-flap-wrapper {
  padding: 30px 20px;
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
}

/* Container verde para o contador maior */
.split-flap-wrapper.green-bg {
  background: #00a694;
  color: white;
}

/* Container azul escuro para o contador menor */
.split-flap-wrapper.blue-bg {
  background: #00343f;
  color: white;
}

/* Área dos flaps */
.split-flap-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.split-flap-container {
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  align-items: center;
  font-family: "Oswald", "Courier New", monospace;
  font-weight: 700;
  perspective: 1000px;
  user-select: none;
}

/* Texto de descrição */
.counter-description {
  display: block !important;
  font-family: "SicoobSans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: -0.6px;
  text-align: left;
  color: white;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: fit-content;
  margin-bottom: 0;
}

/* Estilo base dos dígitos */
.split-flap-digit {
  position: relative;
  width: 40px;
  height: 70px;
  background: linear-gradient(
    to bottom,
    #2db5a5 0%,
    #25a796 50%,
    #1e9686 51%,
    #178577 100%
  );
  border: 2px solid #1e9686;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 
        /* Bevel/Bezel interno */
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4),
    inset 2px 0 4px rgba(255, 255, 255, 0.15),
    inset -2px 0 4px rgba(0, 0, 0, 0.25),
    /* Drop shadow externo pequeno */ 0 2px 4px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Flaps do contador maior */
.split-flap-7-digits .split-flap-digit {
  background: linear-gradient(
    to bottom,
    #2db5a5 0%,
    #25a796 50%,
    #1e9686 51%,
    #178577 100%
  );
  border: 2px solid #1e9686;
}

/* Flaps do contador menor */
.split-flap-4-digits .split-flap-digit {
  background: linear-gradient(
    to bottom,
    #2db5a5 0%,
    #25a796 50%,
    #1e9686 51%,
    #178577 100%
  );
  border: 2px solid #1e9686;
}

/* Linha divisória no meio */
.split-flap-digit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  z-index: 10;
  transform: translateY(-50%);
}

/* Brilho realista aprimorado */
.split-flap-digit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 50%,
    transparent 75%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
  z-index: 5;
}

.split-flap-upper,
.split-flap-lower {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: inherit;
  backface-visibility: hidden;
  line-height: 1;
  font-family: "Oswald", monospace;
  font-weight: 700;
  font-stretch: condensed;
  transform: scaleY(1.1);
}

.split-flap-upper {
  top: 0;
  transform-origin: bottom center;
  border-bottom: 1px solid #555;
  align-items: flex-end;
}

.split-flap-lower {
  bottom: 0;
  transform-origin: top center;
  border-top: 1px solid #555;
  align-items: flex-start;
}

.split-flap-upper .digit-content {
  transform: translateY(21px);
  line-height: 1;
  display: block;
}

.split-flap-lower .digit-content {
  transform: translateY(-21px);
  line-height: 1;
  display: block;
}

/* Estados de animação */
.split-flap-lower.preparing {
  z-index: 1;
  transform: rotateX(-90deg);
}

.split-flap-upper.flipping {
  animation: flipUpperOut 0.1s ease-in forwards;
  z-index: 3;
}

.split-flap-lower.flipping {
  animation: flipLowerIn 0.1s ease-out forwards;
  z-index: 2;
}

/* Animações keyframes */
@keyframes flipUpperOut {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes flipLowerIn {
  0% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* Efeitos durante animação */
.split-flap-digit.animating {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Estilos específicos para contador maior (7 dígitos) */
.split-flap-7-digits .split-flap-digit {
  padding-left: 4px;
  padding-right: 4px;
  height: 75px;
}

.split-flap-7-digits .split-flap-upper,
.split-flap-7-digits .split-flap-lower {
  font-size: 64px;
  line-height: 1;
  font-family: "Oswald", monospace;
  font-weight: 700;
  font-stretch: condensed;
  transform: scaleY(1.15);
}

.split-flap-7-digits .split-flap-upper .digit-content {
  transform: translateY(32px);
}

.split-flap-7-digits .split-flap-lower .digit-content {
  transform: translateY(-32px);
}

/* Primeiro flap do contador maior com opacidade reduzida */
.not-reached .split-flap-upper,
.not-reached .split-flap-lower {
  color: #83edde !important;
}

/* Estilos específicos para contador menor (4 dígitos) - METADE DO TAMANHO */
.split-flap-4-digits .split-flap-digit {
  width: 28px; /* Metade de 55px */
  height: 38px; /* Metade de 75px */
}

.split-flap-4-digits .split-flap-upper,
.split-flap-4-digits .split-flap-lower {
  font-size: 32px; /* Metade de 36px */
  line-height: 1;
  font-family: "Oswald", monospace;
  font-weight: 700;
  font-stretch: condensed;
  transform: scaleY(1.15);
}

.split-flap-4-digits .split-flap-upper .digit-content {
  transform: translateY(16px); /* Metade de 18px */
}

.split-flap-4-digits .split-flap-lower .digit-content {
  transform: translateY(-16px); /* Metade de 18px */
}

/* Estilos específicos para contador de 5 dígitos */
.split-flap-5-digits .split-flap-digit {
  width: 24px; /* Mesmo tamanho do 4 dígitos */
  height: 38px; /* Mesmo tamanho do 4 dígitos */
}

.split-flap-5-digits .split-flap-upper,
.split-flap-5-digits .split-flap-lower {
  font-size: 32px; /* Mesmo tamanho do 4 dígitos */
  line-height: 1;
  font-family: "Oswald", monospace;
  font-weight: 700;
  font-stretch: condensed;
  transform: scaleY(1.15);
}

.split-flap-5-digits .split-flap-upper .digit-content {
  transform: translateY(16px); /* Mesmo do 4 dígitos */
}

.split-flap-5-digits .split-flap-lower .digit-content {
  transform: translateY(-16px); /* Mesmo do 4 dígitos */
}

/* Efeito de clique */
.split-flap-digit.clicked {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* CSS de fallback para quando JavaScript não está carregado */
.split-flap-digit:empty::before {
  content: "0";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px;
  color: #fff;
  font-family: "Oswald", "Courier New", monospace;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 1;
  line-height: 1;
}

.split-flap-7-digits .split-flap-digit:empty::before {
  font-size: 64px;
}

.split-flap-4-digits .split-flap-digit:empty::before {
  font-size: 32px;
}

.split-flap-5-digits .split-flap-digit:empty::before {
  font-size: 32px;
}

/* Remover fallback quando estrutura correta está presente */
.split-flap-digit:not(:empty)::before {
  content: none;
}

/* Responsividade */
@media (max-width: 1199px) {
  /* Centralizar contadores e textos em telas menores que XL */
  .split-flap-area {
    justify-content: center;
  }

  .split-flap-container {
    justify-content: center;
  }

  .counter-description {
    text-align: center;
    margin-left: 0;
  }

  .split-flap-wrapper {
    height: fit-content;
  }
}

.meta-atingida-card,
.comemore-card {
  display: flex;
  border-radius: 4px;
  height: 135px;
  width: 100%;
  background-color: #eee;
  background-position: center;
  background-size: cover;
}

.meta-atingida-card {
  position: relative;
  overflow: hidden;
}

/* Imagens da meta atingida */
#estrelas_grupo {
  scale: 1.15;
  height: 140px;
}

#numero_1kk {
  height: 70px;
}

#associados {
  height: 65px;
}

#estrela_solo {
  position: absolute;
  height: 25px;
  right: 30px;
  top: 30px;
}

/* Container central para todas as imagens principais */
.meta-atingida-card > div {
  display: flex;
  gap: 8px;
  padding-left: 0px;
  margin-left: -15px;
  align-items: center;
}

/* Cartão de comemoração */
.comemore-card {
  gap: 4px;
  align-items: center;
  justify-content: center;
  display: flex;
}

#hi5 {
  height: 75px;
}

#comemore {
  height: 60px;
}