/* Movimento da página, e só movimento. O estado parado de cada peça mora em layout.css e components.css.
   Só transform, opacity e filter são animados. A exceção é o FAQ, que abre pela linha da grade.
   Sem JS, nada fica escondido: todo estado de espera depende da classe "js" que main.js põe no <html>.
   Quem pede menos movimento (prefers-reduced-motion) vê o conteúdo inteiro e parado: bloco no fim. */

/* 1. Barra superior: transparente no topo, vidro depois de rolar. Estado, vale com ou sem movimento. */
.js .topbar::before {
  opacity: 0;
}

.js .topbar[data-rolou="true"]::before {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .topbar::before {
    transition: opacity 0.3s ease;
  }

  /* 2. Título do hero: palavra por palavra, 60ms entre elas */
  .hero-titulo .palavra {
    animation: palavra-entra 0.9s var(--suave) backwards;
  }

  .hero-titulo .palavra:nth-child(2) { animation-delay: 60ms; }
  .hero-titulo .palavra:nth-child(3) { animation-delay: 120ms; }
  .hero-titulo .palavra:nth-child(4) { animation-delay: 180ms; }
  .hero-titulo .palavra:nth-child(5) { animation-delay: 240ms; }
  .hero-titulo .palavra:nth-child(6) { animation-delay: 300ms; }
  .hero-titulo .palavra:nth-child(7) { animation-delay: 360ms; }
  .hero-titulo .palavra:nth-child(8) { animation-delay: 420ms; }
  .hero-titulo .palavra:nth-child(9) { animation-delay: 480ms; }

  /* 3. Mancha de luz do hero respira */
  .hero-luz {
    animation: respira 8s ease-in-out infinite;
  }

  /* 4. Botão principal com brilho pulsando e selo com brilho passando */
  .btn-pulso::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: var(--sombra-accent);
    pointer-events: none;
    animation: pulsa 3s ease-in-out infinite;
  }

  /* Luz clara em órbita na borda do botão: um quadrado maior que o botão gira atrás do anel */
  .btn-orbita::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    margin: -75% 0 0 -75%;
    background: conic-gradient(transparent 0 62%, var(--accent-suave) 92%, transparent 100%);
    animation: gira 4s linear infinite;
  }

  .selo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, var(--accent-brilho) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: brilho-passa 4s ease-in-out infinite;
  }

  /* 5. Entrada ao rolar. main.js marca data-vista quando a peça entra na tela. */
  .js [data-reveal]:not([data-vista]) {
    opacity: 0;
  }

  .js [data-reveal][data-vista] {
    animation: entra 0.8s var(--suave) backwards;
  }

  .js .grade > [data-reveal]:nth-child(2),
  .js .lista-dores > [data-reveal]:nth-child(2),
  .js .faq > [data-reveal]:nth-child(2) {
    animation-delay: 80ms;
  }

  .js .grade > [data-reveal]:nth-child(3),
  .js .lista-dores > [data-reveal]:nth-child(3),
  .js .faq > [data-reveal]:nth-child(3) {
    animation-delay: 160ms;
  }

  .js .grade > [data-reveal]:nth-child(4),
  .js .lista-dores > [data-reveal]:nth-child(4),
  .js .faq > [data-reveal]:nth-child(4) {
    animation-delay: 240ms;
  }

  .js .lista-dores > [data-reveal]:nth-child(5) {
    animation-delay: 320ms;
  }

  /* 6. Painel do hero: linhas em sequência, barras enchendo e a barra "analisando" */
  .js [data-painel][data-vista] .painel-linha {
    animation: linha-entra 0.6s var(--suave) backwards;
  }

  .js [data-painel][data-vista] .barra-cheia {
    animation: enche 1.2s var(--suave) backwards;
  }

  .js [data-painel][data-vista] .painel-linha:nth-child(1) { animation-delay: 0.5s; }
  .js [data-painel][data-vista] .painel-linha:nth-child(2) { animation-delay: 0.65s; }
  .js [data-painel][data-vista] .painel-linha:nth-child(3) { animation-delay: 0.8s; }
  .js [data-painel][data-vista] .painel-linha:nth-child(1) .barra-cheia { animation-delay: 0.7s; }
  .js [data-painel][data-vista] .painel-linha:nth-child(2) .barra-cheia { animation-delay: 0.85s; }
  .js [data-painel][data-vista] .painel-linha:nth-child(3) .barra-cheia { animation-delay: 1s; }

  .barra-corre {
    animation: corre 1.8s ease-in-out infinite;
  }

  .painel-status .icon {
    animation: gira 4s linear infinite;
  }

  /* 7. Faixa de áreas rola sem parar. As cópias da lista só aparecem aqui. */
  .faixa {
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }

  .faixa-trilho {
    justify-content: flex-start;
    width: max-content;
    animation: rola 45s linear infinite;
  }

  .faixa-lista {
    flex: none;
    flex-wrap: nowrap;
    padding-inline: 0 var(--sp-3);
  }

  .faixa-copia {
    display: flex;
  }

  .faixa:hover .faixa-trilho {
    animation-play-state: paused;
  }

  /* 8. Cartões da solução grudam ao rolar, cada um 16px abaixo do anterior */
  @media (min-height: 600px) {
    .pilha .entrega {
      position: sticky;
      top: calc(var(--topbar-h) + var(--sp-5));
    }

    .pilha .entrega:nth-child(2) {
      top: calc(var(--topbar-h) + var(--sp-5) + 16px);
    }

    .pilha .entrega:nth-child(3) {
      top: calc(var(--topbar-h) + var(--sp-5) + 32px);
    }
  }

  /* 9. Portfólio: o recuo dos cartões vizinhos (estado em components.css) vai e volta em 0.3s */
  .card.projeto {
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.35s var(--mola);
  }

  /* 10. Trilha de "Como funciona": o trecho dourado desce quando a etapa entra na tela */
  .js .etapa::after {
    transform: scaleY(0);
    transition: transform 0.8s var(--suave);
  }

  .js .etapa[data-vista]::after {
    transform: scaleY(1);
  }

  .js .etapa-numero {
    transition: opacity 0.4s ease, transform 0.5s var(--mola);
  }

  .js .etapa:not([data-vista]) .etapa-numero {
    opacity: 0.35;
    transform: scale(0.85);
  }

  .js .etapa:not([data-vista]) .etapa-corpo {
    opacity: 0;
  }

  .js .etapa[data-vista] .etapa-corpo {
    animation: etapa-entra 0.7s var(--suave) backwards;
  }

  /* 11. FAQ: abre e fecha pelo mesmo caminho, 0.3s. O conteúdo fechado some depois que a linha fecha. */
  .faq-resposta {
    transition: grid-template-rows 0.3s ease;
  }

  .faq-sinal {
    transition: transform 0.3s ease;
  }

  .faq-resposta-miolo {
    transition: visibility 0s linear 0s;
  }

  .js .faq-item:not([data-aberta="true"]) .faq-resposta-miolo {
    transition-delay: 0.3s;
  }

  /* 12. Resposta com mola em botão e cartão. O fundo não muda. */
  .btn,
  .card {
    transition: transform 0.35s var(--mola);
  }

  .btn:active {
    transform: scale(0.97);
  }

  @media (hover: hover) {
    .btn:hover {
      transform: translateY(-2px) scale(1.03);
    }

    .card:hover {
      transform: translateY(-4px);
    }

    .pilha .card:hover {
      transform: none;
    }
  }
}

@keyframes palavra-entra {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.4em);
  }
}

@keyframes respira {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes pulsa {
  0%, 100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@keyframes brilho-passa {
  0%, 55% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes entra {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(24px);
  }
}

@keyframes linha-entra {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@keyframes enche {
  from {
    transform: translateX(-100%);
  }
}

@keyframes corre {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(250%);
  }
}

@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}

/* A faixa tem 4 listas iguais; andar um quarto do trilho devolve ao ponto de partida */
@keyframes rola {
  to {
    transform: translateX(-25%);
  }
}

@keyframes etapa-entra {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

/* 13. Menos movimento: tudo parado e o conteúdo inteiro na tela */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}