/* Animação "bounce" */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
        /* Sem deslocamento vertical */
    }

    40% {
        transform: translateY(-20px);
        /* Deslocamento para cima */
    }

    60% {
        transform: translateY(-10px);
        /* Deslocamento para baixo */
    }
}

/* Exemplo de uso em um botão */
.btn-bounce {
    animation: bounce 1s infinite;
    /* Aplica a animação "bounce" infinitamente */
    /* Outros estilos do botão aqui */
}

/* ============================================================= */
/* Animação "pulse" */
@keyframes pulse {

    0%,
    100% {
        transform: scale(0.9);
        /* Tamanho normal */
    }

    50% {
        transform: scale(1.0);
        /* Tamanho aumentado (pulso) */
    }
}

/* Exemplo de uso em um botão */
.btn-pulse {
    animation: pulse 2s infinite;
    /* Aplica a animação "pulse" infinitamente */
    /* Outros estilos do botão aqui */
}

/* ============================================================= */
/* Animação "border-glow" */
@keyframes border-glow {
    0% {
        box-shadow: 0 0 0 0 #e8d5b1;
        /* Sombra inicial (sem brilho) */
    }

    100% {
        box-shadow: 0 0 5px 5px #e8d5b1;
        /* Sombra com brilho */
    }
}

/* Exemplo de uso na borda do conteúdo */
.content-box {
    border: 2px solid #e8d5b1;
    /* Estilo padrão da borda */
    animation: border-glow 1.5s infinite alternate;
    /* Aplica a animação "border-glow" infinitamente */
    /* Outros estilos do box aqui */
}

/* ============================================================= */
/* Animação "border-blink" */
@keyframes border-blink {

    0%,
    100% {
        border-color: #ccc;
        /* Cor normal da borda */
    }

    50% {
        border-color: #ff0000;
        /* Cor alternativa da borda (por exemplo, vermelho) */
    }
}

/* Exemplo de uso na borda do conteúdo */
.border-blink {
    border: 2px solid #ccc;
    /* Estilo padrão da borda */
    animation: border-blink 1s infinite;
    /* Aplica a animação "border-blink" infinitamente */
    /* Outros estilos do box aqui */
}
/* ============================================================= */
.box {
    position: relative;
    max-width: 500px;
    min-height: 800px;
    margin: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e8d5b1;
    overflow: hidden;
    border-radius: 20px;
  }
  
  .box::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 140%;
    background: linear-gradient(#ffc720, #a628ab);
    animation: animateBox 4s linear infinite;
  }
  
  .box::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: #011918;
    border-radius: 16px;
  }
  
  @keyframes animateBox {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .box div {
    position: relative;
    color: #fff;
    font-size: 8em;
    z-index: 10;
  }
  /* ============================================================= */