/**
 * Fundo vivo: a arte abstrata da marca com os seis blobs em órbita e o véu
 * branco por cima. Nasceu no hero da página Empresa e foi extraído para cá
 * quando o masthead das páginas legais passou a usar o mesmo fundo, para as
 * duas lerem o mesmo arquivo em vez de duas cópias que envelhecem separadas.
 *
 * Depende só de tokens (`--color-primary`) e da arte em /company-v4.
 *
 * A órbita é 1.6x mais larga e roda em 12-20s (era 4-8s): amplitude maior com
 * ciclo mais longo lê como deriva perceptível em vez de tremor, e o véu ficou
 * um pouco menos opaco para o movimento chegar à superfície.
 */

.fundo-vivo { position: absolute; inset: 0; overflow: hidden; }

.fundo-vivo__art {
  position: absolute;
  inset: -6%;
  background-image: image-set(url('/company-v4/hero-abstrato.webp') type('image/webp'), url('/company-v4/hero-abstrato.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.fundo-vivo__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(clamp(26px, 2.6vw, 46px));
  will-change: transform;
}

.fundo-vivo__blob--1 {
  left: 14%;
  top: 18%;
  width: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 62%, transparent) 0%, transparent 70%);
  animation: orbita-1 12s linear infinite;
}
.fundo-vivo__blob--2 {
  left: 82%;
  top: 24%;
  width: 54%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 54%, transparent) 0%, transparent 70%);
  animation: orbita-2 16s linear infinite;
}
.fundo-vivo__blob--3 {
  left: 46%;
  top: 82%;
  width: 52%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 50%, transparent) 0%, transparent 70%);
  animation: orbita-3 13s linear infinite;
}
.fundo-vivo__blob--4 {
  left: 92%;
  top: 74%;
  width: 46%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 46%, transparent) 0%, transparent 70%);
  animation: orbita-4 18s linear infinite;
}
.fundo-vivo__blob--5 {
  left: 8%;
  top: 78%;
  width: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 48%, transparent) 0%, transparent 70%);
  animation: orbita-5 14s linear infinite;
}
.fundo-vivo__blob--6 {
  left: 56%;
  top: 42%;
  width: 42%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 40%, transparent) 0%, transparent 70%);
  animation: orbita-6 20s linear infinite;
}

.fundo-vivo__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.76) 42%, rgba(255, 255, 255, 0.92) 100%);
}

@keyframes orbita-1 {
  0% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1); }
  13% { transform: translate(-50%, -50%) translate(11.2%, 8%) scale(1.116); }
  25% { transform: translate(-50%, -50%) translate(17.6%, 0%) scale(1.203); }
  38% { transform: translate(-50%, -50%) translate(12.8%, -9.6%) scale(1.087); }
  50% { transform: translate(-50%, -50%) translate(0%, -14.4%) scale(0.942); }
  63% { transform: translate(-50%, -50%) translate(-12.8%, -9.6%) scale(0.855); }
  75% { transform: translate(-50%, -50%) translate(-17.6%, 0%) scale(0.913); }
  88% { transform: translate(-50%, -50%) translate(-11.2%, 9.6%) scale(1.029); }
  100% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1); }
}

@keyframes orbita-2 {
  0% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1.145); }
  13% { transform: translate(-50%, -50%) translate(-12.8%, 6.4%) scale(1.029); }
  25% { transform: translate(-50%, -50%) translate(-19.2%, 14.4%) scale(0.884); }
  38% { transform: translate(-50%, -50%) translate(-11.2%, 20.8%) scale(0.971); }
  50% { transform: translate(-50%, -50%) translate(3.2%, 19.2%) scale(1.116); }
  63% { transform: translate(-50%, -50%) translate(14.4%, 12.8%) scale(1.232); }
  75% { transform: translate(-50%, -50%) translate(16%, 3.2%) scale(1.174); }
  88% { transform: translate(-50%, -50%) translate(9.6%, -3.2%) scale(1.087); }
  100% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1.145); }
}

@keyframes orbita-3 {
  0% { transform: translate(-50%, -50%) translate(0%, 0%) scale(0.913); }
  13% { transform: translate(-50%, -50%) translate(14.4%, -9.6%) scale(1.029); }
  25% { transform: translate(-50%, -50%) translate(22.4%, -3.2%) scale(1.174); }
  38% { transform: translate(-50%, -50%) translate(16%, 8%) scale(1.087); }
  50% { transform: translate(-50%, -50%) translate(1.6%, 12.8%) scale(0.971); }
  63% { transform: translate(-50%, -50%) translate(-12.8%, 8%) scale(0.855); }
  75% { transform: translate(-50%, -50%) translate(-19.2%, -3.2%) scale(0.884); }
  88% { transform: translate(-50%, -50%) translate(-11.2%, -9.6%) scale(0.971); }
  100% { transform: translate(-50%, -50%) translate(0%, 0%) scale(0.913); }
}

@keyframes orbita-4 {
  0% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1.087); }
  13% { transform: translate(-50%, -50%) translate(-9.6%, -11.2%) scale(0.942); }
  25% { transform: translate(-50%, -50%) translate(-17.6%, -4.8%) scale(0.855); }
  38% { transform: translate(-50%, -50%) translate(-14.4%, 8%) scale(0.971); }
  50% { transform: translate(-50%, -50%) translate(-3.2%, 14.4%) scale(1.116); }
  63% { transform: translate(-50%, -50%) translate(9.6%, 9.6%) scale(1.203); }
  75% { transform: translate(-50%, -50%) translate(14.4%, -1.6%) scale(1.145); }
  88% { transform: translate(-50%, -50%) translate(8%, -9.6%) scale(1.058); }
  100% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1.087); }
}

@keyframes orbita-5 {
  0% { transform: translate(-50%, -50%) translate(0%, 0%) scale(0.971); }
  13% { transform: translate(-50%, -50%) translate(12.8%, -8%) scale(1.087); }
  25% { transform: translate(-50%, -50%) translate(20.8%, 3.2%) scale(1.203); }
  38% { transform: translate(-50%, -50%) translate(14.4%, 12.8%) scale(1.116); }
  50% { transform: translate(-50%, -50%) translate(0%, 16%) scale(1); }
  63% { transform: translate(-50%, -50%) translate(-12.8%, 11.2%) scale(0.884); }
  75% { transform: translate(-50%, -50%) translate(-19.2%, 0%) scale(0.855); }
  88% { transform: translate(-50%, -50%) translate(-11.2%, -8%) scale(0.913); }
  100% { transform: translate(-50%, -50%) translate(0%, 0%) scale(0.971); }
}

@keyframes orbita-6 {
  0% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1.174); }
  13% { transform: translate(-50%, -50%) translate(-16%, 9.6%) scale(1.058); }
  25% { transform: translate(-50%, -50%) translate(-24%, -1.6%) scale(0.913); }
  38% { transform: translate(-50%, -50%) translate(-14.4%, -12.8%) scale(0.826); }
  50% { transform: translate(-50%, -50%) translate(1.6%, -17.6%) scale(0.942); }
  63% { transform: translate(-50%, -50%) translate(17.6%, -11.2%) scale(1.087); }
  75% { transform: translate(-50%, -50%) translate(24%, 1.6%) scale(1.203); }
  88% { transform: translate(-50%, -50%) translate(14.4%, 9.6%) scale(1.232); }
  100% { transform: translate(-50%, -50%) translate(0%, 0%) scale(1.174); }
}

@media (prefers-reduced-motion: reduce) {
  .fundo-vivo__blob { animation: none; }
}