@import url(/templates/UnciastTemplate/css/cores-globais.css);

.banner-cont {
  .titulo-banner {
    color: white;
    h1 {
      font-weight: bolder;
      font-size: 3rem;
    }
    p{
        color: #989FB0;
        font-size: 1.5rem;
    }
  }

  .banner-img {
    padding: 10%;
    img {
      width: 100%;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 10px 8px 22px 4px #000000;

      /* gentle floating animation: up and down */
      animation: floatY 6.5s ease-in-out infinite;
      will-change: transform;
    }
  }
  .buttonswahts {
    display: flex;
    width: 85%;
    margin: auto;
    a{
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: white;
        font-size: 1.5rem;
        justify-content: center;
        width: 100%;
        padding: 8px 12px;
        border-radius: 5px;
        position: relative;
        overflow: hidden;

        /* animated gradient (move right -> left) */
        background: linear-gradient(90deg, #E20000 0%, #FF4600 50%, #FF8A00 100%);
        background-size: 200% 100%;
        animation: gradientShift 6s linear infinite;

        /* keep content above the animated glow */
        z-index: 2;
    }

    /* ensure inner content sits above the pseudo glow */
    .buttonswahts a * {
      position: relative;
      z-index: 3;
    }

    /* glowing 'box-shadow' that follows the gradient by sharing the same animated background */
    .buttonswahts a::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, #E20000 0%, #FF4600 50%, #FF8A00 100%);
      background-size: 200% 100%;
      animation: gradientShift 12s linear infinite;
      filter: blur(14px) saturate(1.2) opacity(.75);
      transform: scale(1.06);
      pointer-events: none;
    }

    img{
        width: 30px;
    }

    p{
        margin: 0px;
    }
  }
}

/* keyframes placed at root so the animation is available to both element and pseudo-element */
@keyframes gradientShift {
  0% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}