/* 📖 animations.css — Keyframes globais e classes de animação
   ⚠️  Alterar? Não depende de outros CSS, mas respeitar prefers-reduced-motion */

/* ─── Keyframes fundamentais ─── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Float — cards flutuando no caos ─── */

@keyframes float {
  0%, 100% { transform: translate(var(--float-x, 0px), var(--float-y, 0px)) rotate(var(--float-r, 0deg)); }
  33%       { transform: translate(calc(var(--float-x, 0px) + var(--drift-x, 8px)), calc(var(--float-y, 0px) - var(--drift-y, 6px))) rotate(calc(var(--float-r, 0deg) + 1deg)); }
  66%       { transform: translate(calc(var(--float-x, 0px) - var(--drift-x, 5px)), calc(var(--float-y, 0px) + var(--drift-y, 4px))) rotate(calc(var(--float-r, 0deg) - 1deg)); }
}

/* ─── Pulse — notificações pulsando ─── */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.95); }
}

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─── Signal — brilho pulsante de sistema ativo ─── */

@keyframes signalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125, 169, 212, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(125, 169, 212, 0.15); }
}

/* ─── Card travel — pedido se movendo pelas colunas ─── */

@keyframes cardTravel {
  0%   { transform: translateX(0);    opacity: 1; }
  20%  { transform: translateX(210px); opacity: 1; }
  40%  { transform: translateX(420px); opacity: 1; }
  60%  { transform: translateX(630px); opacity: 1; }
  75%  { transform: translateX(840px); opacity: 1; }
  90%  { transform: translateX(840px); opacity: 0; }
  91%  { transform: translateX(0);    opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

/* ─── Draw line — conexão SVG sendo desenhada ─── */

@keyframes drawLine {
  from { stroke-dashoffset: var(--line-length, 200); }
  to   { stroke-dashoffset: 0; }
}

/* ─── Hub emerge — logo aparecendo do centro ─── */

@keyframes hubEmerge {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── Shimmer — efeito de carregamento ─── */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Scroll reveal — aplicadas por scroll.js ─── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  transform: translateX(-30px);
}

.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}

.reveal--right.is-visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.is-visible {
  transform: scale(1);
}

/* Delays para animações em cascata */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Classes de animação standalone ─── */

.anim-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0,0,0.2,1) both;
}

.anim-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0,0,0.2,1) both;
}

.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.anim-float {
  animation: float 6s ease-in-out infinite;
}