/* Serpentina: cai revelando o traço, segura o logo, cai sumindo.
   Sem degradê / opacity — só clip-path + queda. */
.serpentina-loading {
  --serpentina-duration: 3.6s;
  display: block;
  width: 1em;
  height: calc(1em * 694 / 268);
  max-width: 100%;
  max-height: 100%;
  color: inherit;
  transform-origin: 50% 0%;
  animation: serpentina-cair var(--serpentina-duration) infinite;
}

@keyframes serpentina-cair {
  /* Nada visível — acima */
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8%);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }

  /* Traço caindo / revelando de cima pra baixo */
  42% {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    animation-timing-function: linear;
  }

  /* Logo formado — hold curto */
  48% {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.35);
  }

  /* Some caindo — some pelo topo enquanto desce */
  100% {
    clip-path: inset(100% 0 0 0);
    transform: translateY(10%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .serpentina-loading {
    animation: serpentina-soft 2.2s ease-in-out infinite;
    clip-path: none;
    transform: none;
  }
}

@keyframes serpentina-soft {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}