.loading-center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.9);
z-index: 9999;
}
.loader {
  max-width: fit-content;
  color: rgb(255, 102, 0);
  font-size: 50px;
  font-family: Mine;
  position: relative;
  font-style: italic;
  font-weight: 600;
}
.loader span {
  animation: cut 2s infinite;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.loader:hover {
  color: #fcffdf;
}
.loader::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background-color: #6c6c6c;
  top: 0px;
  filter: blur(10px);
  animation: scan 2s infinite;
  left: 0;
  z-index: 0;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.loader::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  border-radius: 4px;
  background-color: #6c6c6c;
  top: 0px;
  animation: scan 2s infinite;
  left: 0;
  z-index: 1;
  filter: opacity(0.9);
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes scan {
  0% {
    top: 0px;
  }
  25% {
    top: 54px;
  }
  50% {
    top: 0px;
  }
  75% {
    top: 54px;
  }
}
@keyframes cut {
  0% {
    clip-path: inset(0 0 0 0);
  }
  25% {
    clip-path: inset(100% 0 0 0);
  }
  50% {
    clip-path: inset(0 0 100% 0);
  }
  75% {
    clip-path: inset(0 0 0 0);
  }
}

/* ===== RESPONSIVIDADE ===== */

/* Tablets e dispositivos médios (768px até 1024px) */
@media screen and (max-width: 1024px) {
  .loader {
    font-size: 40px;
  }

  .loader::after,
  .loader::before {
    height: 5px;
  }

  @keyframes scan {
    0% {
      top: 0px;
    }
    25% {
      top: 44px;
    }
    50% {
      top: 0px;
    }
    75% {
      top: 44px;
    }
  }
}

/* Telefones e dispositivos pequenos (até 768px) */
@media screen and (max-width: 768px) {
  .loading-center {
    height: 100vh;
    width: 100vw;
  }

  .loader {
    font-size: 32px;
    padding: 20px;
  }

  .loader::after,
  .loader::before {
    height: 4px;
  }

  @keyframes scan {
    0% {
      top: 0px;
    }
    25% {
      top: 35px;
    }
    50% {
      top: 0px;
    }
    75% {
      top: 35px;
    }
  }
}

/* Telefones pequenos (até 480px) */
@media screen and (max-width: 480px) {
  .loader {
    font-size: 24px;
    padding: 15px;
  }

  .loader::after,
  .loader::before {
    height: 3px;
  }

  @keyframes scan {
    0% {
      top: 0px;
    }
    25% {
      top: 26px;
    }
    50% {
      top: 0px;
    }
    75% {
      top: 26px;
    }
  }
}

/* Telefones ultra-pequenos (até 320px) */
@media screen and (max-width: 320px) {
  .loader {
    font-size: 18px;
    padding: 10px;
  }

  .loader::after,
  .loader::before {
    height: 2px;
  }

  @keyframes scan {
    0% {
      top: 0px;
    }
    25% {
      top: 20px;
    }
    50% {
      top: 0px;
    }
    75% {
      top: 20px;
    }
  }
}