/* ===== liink — animações (não altera layout/estrutura) ===== */

/* header ganha sombra ao rolar */
header {
  transition:
    box-shadow 0.25s ease,
    background 0.25s ease;
}
header.scrolled {
  box-shadow: 0 6px 24px rgba(20, 19, 26, 0.07);
}

/* reveal on scroll — só quando o JS está ativo */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* hover lifts (só movimento, mesmo tamanho de caixa) */
.cell,
.aud .col {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(20, 19, 26, 0.09);
  border-color: #d3d2dd;
}
.band.dark .cell:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.aud .col:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(20, 19, 26, 0.1);
}

/* passos: barra superior cresce ao entrar em cena */
html.js .step {
  position: relative;
}
.step .n {
  transition: transform 0.5s ease 0.1s;
}
.step.in .n {
  animation: pop 0.5s ease 0.05s both;
}
@keyframes pop {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

/* CTA final pulsa de leve no hover (já tinha translate) */
.cta-btn {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* símbolo do header: anel coral gira devagar ao passar o mouse na marca */
.brand svg circle:last-of-type {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s ease;
}
.brand:hover svg circle:last-of-type {
  transform: rotate(90deg);
}

/* botão de envio: leve brilho ao focar */
.btn {
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cell:hover,
  .aud .col:hover {
    transform: none;
  }
  .step.in .n {
    animation: none;
  }
  .brand:hover svg circle:last-of-type {
    transform: none;
  }
}