:root {
  --bg-dark: white;
  --frame-bg: linear-gradient(180deg,rgba(0, 49, 188, 1) 50%, rgba(1, 36, 132, 1) 50%);
  --frame-top: #0031BC;
  --frame-bottom: #012484;
  --counter-top: #FFFFFFF;
  --counter-bottom: #FFFFFFF;
  --label: hsl(237, 18%, 59%);
}

#main-coutdown {
  min-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 25vh  ;
  background-color: var(--bg-dark);
  font-family: 'Roboto', sans-serif;
  color: white;
}

#coutdown-container {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3em;
}

h1 {
  font-size: clamp(20px, 3vw, 1vw);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-align: center;
}

.countdown {
  width: clamp(200px, 100%, 700px);
  aspect-ratio: 1 / 0.50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2fr 1fr;
  gap: 1em;
}

.frame {
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--frame-bg);
  box-shadow: 0 3px 0 0 hsl(235, 25%, 29%), 0 6px 0 0 var(--frame-bg);
  font-size: 5em;
  font-weight: 700;
  perspective: 800px;
}

.frame,
.top,
.bottom {
  border-radius: 1vw;
}

.top,
.bottom,
.wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.wrapper {
  transform-style: preserve-3d;
}

.wrapper.flip {
 animation: flipTop 0.350s ease-out forwards;
}

.bottom.flip-bottom {
  animation: flipBottom 0.350s ease-in forwards; /* Animação que desdobra a base */
}

.top {
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  z-index: 2;
  background-color: var(--frame-top);
  color: var(--counter-top);
}

.top.drop {
  background-color: var(--frame-bg);
}

.dot {
  position: absolute;
  height: 10%;
  width: 10%;
  border-radius: 100vw;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  background-color: var(--bg-dark);
  z-index: 1000;
  top: calc(50% - 5%);
  left: -5.1%;
}

.dot.right {
  transform: rotate(180deg);
  left: 95.9%;
}

.bottom {
  width: 100%;
  height: 100%;
  background-color: var(--frame-bottom);
  color: var(--counter-bottom);
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.bottom.darker {
  background-color: var(--frame-top);
}

.unit-label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--label);
}

footer {
  background-size: cover;
  color: var(--label);
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
}

@media only screen and (max-width: 769px) {
  .frame {
    font-size: 8vw;
  }
}

@media only screen and (max-width: 600px) {
  .unit-label {
    font-size: 0.5rem;
  }
}

@media only screen and (max-width: 300px) {
  .unit-label {
    font-size: 0.325rem;
  }
}
@keyframes flipTop {
  0% { 
    transform: rotateX(0deg); 
    /* Luz normal no início */
    background-color: var(--frame-top);
    /* filter: brightness(1);  */
  }
  100% { 
    transform: rotateX(-90deg); 
    background-color: var(--frame-top);
    /* Vai escurecendo enquanto cai, simulando a sombra da carta deitando */
    /* filter: brightness(0.6);  */
  }
}

@keyframes flipBottom {
  0% { 
    transform: rotateX(90deg); 
    /* Começa com a cor mais clara (fundo da carta do topo) */
    background-color: var(--frame-bottom); 
  }

  100% { 
    transform: rotateX(0deg); 
    /* Transição suave para a cor mais escura da base no final do movimento */
    background-color: var(--frame-bottom); 
  }
}