/*
 * As peças vivas da home: as cinco cenas de "IA na prática" e o diagrama de
 * "A Linte é a base".
 *
 * Cada cena é uma sequência: as peças entram na ordem em que o trabalho
 * acontece (o caso chega, a IA lê, alguém decide), não todas de uma vez. O
 * ritmo inteiro vive aqui, e o HTML não muda uma linha: as cenas já têm nome de
 * classe para cada peça, então dá para ordená-las por seletor.
 *
 * Quem liga é home-animacao.js, que põe `cenas-vivas` (ou `base-viva`, no
 * diagrama) na seção quando ela entra na tela. Ao trocar de aba o `sc-if` recria o nó da cena, e uma animação de CSS
 * recomeça sozinha em elemento recém-inserido: não há nada a reiniciar em JS.
 *
 * Os gestos animam `translate` e `scale`, nunca `transform`. `transform` é uma
 * propriedade só: animá-la sobrescreve o `transform` que o layout já usa, e foi
 * assim que a inclinação de 2° da minuta e a centralização da conversa do
 * assistente sumiram assim que a cena entrava na tela. `translate` e `scale`
 * compõem com o `transform` existente em vez de disputar com ele.
 *
 * Nada aqui roda em laço, com uma exceção: o pulso dos filetes do diagrama, que
 * existe porque a frase daquela seção é literalmente "o contexto da empresa
 * acompanha o trabalho" e um filete parado diria o contrário.
 */

.home-features {
  /* O passo entre uma peça e a seguinte. É o único número a mexer para as cinco
     cenas acelerarem ou desacelerarem: tudo abaixo é múltiplo dele. */
  --passo: 300ms;
}

/* O diagrama da base tem muitas peças pequenas, não cinco grandes: no passo das
   cenas a última chegaria depois de a pessoa já ter lido tudo. */
.ai-foundation {
  --passo: 150ms;
}

/* ---------------------------------------------------------------- base --- */

.cenas-vivas .product-scene [data-entra],
.base-viva .foundation-diagram [data-entra],
.cenas-vivas .product-scene [data-surge],
.base-viva .foundation-diagram [data-surge] {
  opacity: 0;
}

.cenas-vivas .product-scene [data-entra],
.base-viva .foundation-diagram [data-entra] {
  animation: cena-entra 950ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * var(--passo));
}

.cenas-vivas .product-scene [data-surge],
.base-viva .foundation-diagram [data-surge] {
  animation: cena-surge 780ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * var(--passo));
}

@keyframes cena-entra {
  from { opacity: 0; translate: 0 8px }
  to   { opacity: 1; translate: none }
}

@keyframes cena-surge {
  0%   { opacity: 0; scale: .62 }
  62%  { opacity: 1; scale: 1.08 }
  100% { opacity: 1; scale: 1 }
}

/* O filete do fluxo é desenhado de cima para baixo, no tempo da etapa seguinte. */
.cenas-vivas .product-scene [data-filete],
.base-viva .foundation-diagram [data-filete] {
  scale: 1 0;
  transform-origin: top;
  animation: cena-filete 820ms ease-out both;
  animation-delay: calc(var(--i, 0) * var(--passo));
}

@keyframes cena-filete {
  to { scale: 1 1 }
}

/* A varredura: a passada de leitura da IA sobre um trecho. Acontece uma vez. */
.cenas-vivas .product-scene [data-varre],
.base-viva .foundation-diagram [data-varre] {
  position: relative;
  overflow: hidden;
}

.cenas-vivas .product-scene [data-varre]::after,
.base-viva .foundation-diagram [data-varre]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(108, 43, 234, .16), transparent);
  animation: cena-varre 2100ms cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: calc(var(--i, 0) * var(--passo));
}

@keyframes cena-varre {
  from { transform: translateX(-100%) }
  to   { transform: translateX(100%) }
}


/*
 * O pulso do filete: um ponto desce a ligação depois que o diagrama terminou de
 * se montar, e repete devagar. Existe porque a frase daquela seção é "o contexto
 * da empresa acompanha o trabalho": o filete parado diria o contrário.
 */
.base-viva .foundation-diagram [data-pulso] {
  position: relative;
}

.base-viva .foundation-diagram [data-pulso]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: #6c2bea;
  opacity: 0;
  animation: base-pulso 2800ms cubic-bezier(.4, 0, .6, 1) infinite;
  animation-delay: calc(var(--i, 0) * var(--passo) + 1100ms);
}

@keyframes base-pulso {
  0%   { transform: translateY(0); opacity: 0 }
  18%  { opacity: 1 }
  72%  { opacity: 1 }
  100% { transform: translateY(100%); opacity: 0 }
}

/*
 * Quem pediu menos movimento recebe a cena pronta: todas as peças visíveis, o
 * filete inteiro, nenhuma varredura e nenhum pulso. Nada de
 * informação se perde, só o gesto.
 */
@media (prefers-reduced-motion: reduce) {
  .cenas-vivas .product-scene [data-entra],
.base-viva .foundation-diagram [data-entra],
  .cenas-vivas .product-scene [data-surge],
.base-viva .foundation-diagram [data-surge] {
    opacity: 1;
    translate: none;
    scale: none;
    animation: none;
  }
  .cenas-vivas .product-scene [data-filete],
.base-viva .foundation-diagram [data-filete] {
    scale: none;
    animation: none;
  }
  .cenas-vivas .product-scene [data-varre]::after,
.base-viva .foundation-diagram [data-varre]::after,
  .base-viva .foundation-diagram [data-pulso]::after {
    display: none;
  }
}