/* ==========================================================================
   Keyframes — biblioteca central de movimento
   ========================================================================== */

/* Revelacao de linha: o texto sobe de dentro da propria mascara. */
@keyframes line-rise {
  from {
    transform: translate3d(0, 110%, 0) rotate(2.5deg);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

/* Entrada padrao: sobe e materializa. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Entrada das pilulas do header, vindas de cima. */
@keyframes drop-in {
  from {
    opacity: 0;
    transform: translate3d(0, -0.875rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Painel do hero: desfoca e aproxima. */
@keyframes panel-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 2.5rem, 0) scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* O badge flutua 45px a frente do painel, para que a inclinacao 3D
   produza paralaxe real entre os dois planos. */
@keyframes badge-in {
  from {
    opacity: 0;
    transform: translate3d(-0.75rem, 0.75rem, 45px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 45px) scale(1);
  }
}

/* Traco que cresce a partir da esquerda. */
@keyframes rule-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Anel do ponto de status. */
@keyframes pulse-ring {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* Painel do menu mobile. */
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translate3d(0, -1.5rem, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Dica de scroll no rodape do hero. */
@keyframes scroll-hint {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(0.375rem);
    opacity: 1;
  }
}