/* ==========================================================================
   motion.css
   Animações de entrada e micro-interações.
   Apenas transform / opacity / clip-path. Easings exponenciais.
   ========================================================================== */

:root {
  /* Strong easings (sobreescrevem os já existentes em tokens, mais punchy) */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   1. Entrada genérica via [data-anim] + [data-visible]
   ========================================================================== */

[data-anim] {
  opacity: 0;
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo),
    clip-path 700ms var(--ease-out-expo);
  will-change: transform, opacity;
}
[data-anim="fade-up"]   { transform: translate3d(0, 16px, 0); }
[data-anim="fade-down"] { transform: translate3d(0, -12px, 0); }
[data-anim="fade-x"]    { transform: translate3d(-16px, 0, 0); }
[data-anim="reveal"]    { clip-path: inset(0 100% 0 0); opacity: 1; }
[data-anim="scale-up"]  { transform: scale(0.96); }

[data-anim][data-visible="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-anim="reveal"][data-visible="true"]   { clip-path: inset(0 0 0 0); }
[data-anim="scale-up"][data-visible="true"] { transform: scale(1); }

/* ==========================================================================
   2. Hero — entrada editorial em pilha + motions contínuos
   Curvas custom (Emil): ease-out forte para entradas, ease-in-out forte para
   movimento contínuo. Sem ease-in em UI.
   ========================================================================== */

@keyframes heroLineIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes heroFadeOnly { to { opacity: 1; } }

.hero__meta {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  animation: heroLineIn 500ms cubic-bezier(0.23, 1, 0.32, 1) 80ms both;
}

.hero__eyebrow {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: heroLineIn 500ms cubic-bezier(0.23, 1, 0.32, 1) 160ms both;
}

.hero__heading-line {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: heroLineIn 700ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.hero__heading-line:nth-child(1) { animation-delay: 220ms; }
.hero__heading-line:nth-child(2) { animation-delay: 340ms; }

/* Plate verde: carimba scaleX overshoot + breath contínuo de shadow.
   transform-origin left para o stamp; depois encadeia o breath sem motion. */
.hero__plate {
  transform-origin: left center;
  animation:
    heroPlateIn 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 380ms both,
    heroPlateBreath 4s cubic-bezier(0.77, 0, 0.175, 1) 1300ms infinite;
}
@keyframes heroPlateIn {
  0%   { transform: scaleX(0);    opacity: 0.6; }
  60%  { transform: scaleX(1.05); opacity: 1; }
  100% { transform: scaleX(1);    opacity: 1; }
}
@keyframes heroPlateBreath {
  0%, 100% {
    box-shadow:
      0 14px 32px -16px oklch(72% 0.215 145 / 0.55),
      inset 0 0 0 1.5px oklch(28% 0.06 152 / 0.35);
  }
  50% {
    box-shadow:
      0 22px 48px -16px oklch(72% 0.215 145 / 0.95),
      inset 0 0 0 1.5px oklch(28% 0.06 152 / 0.55);
  }
}

.hero__sub {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: heroLineIn 500ms cubic-bezier(0.23, 1, 0.32, 1) 560ms both;
}
.hero__ctas {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: heroLineIn 500ms cubic-bezier(0.23, 1, 0.32, 1) 640ms both;
}

.hero__stats {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: heroLineIn 600ms cubic-bezier(0.23, 1, 0.32, 1) 760ms both;
}

.hero__doc {
  opacity: 0;
  animation: heroFadeOnly 600ms cubic-bezier(0.23, 1, 0.32, 1) 880ms both;
}

/* Visual: entra com slide+scale, depois recebe o float contínuo do hero.css. */
.hero__visual {
  /* Override momentâneo: state inicial antes da entry. */
  animation:
    heroVisualEntry 900ms cubic-bezier(0.23, 1, 0.32, 1) 200ms both,
    heroVisualFloat 8s cubic-bezier(0.77, 0, 0.175, 1) 1100ms infinite;
}
@keyframes heroVisualEntry {
  0%   { opacity: 0; transform: translate3d(24px, 12px, 0) rotate(-3deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0)       rotate(-1.5deg); }
}

/* Burst vermelho: pop de entrada + spin contínuo lento (28s = beacon, não distração). */
.hero__burst {
  opacity: 0;
  transform: scale(0.7);
  animation:
    heroBurstIn 700ms cubic-bezier(0.23, 1, 0.32, 1) 360ms both,
    heroBurstSpin 28s linear 1100ms infinite;
}
@keyframes heroBurstIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroBurstSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Tigre — entry slide-up + perpetual breath (scale + tilt sutil).
   Anchor em bottom-right, então scale puxa pra origem. */
.hero__tigre {
  opacity: 0;
  transform: translate3d(20px, 18px, 0) scale(0.92);
  animation:
    heroTigreEntry 900ms cubic-bezier(0.23, 1, 0.32, 1) 700ms both,
    heroTigreBreath 6.5s cubic-bezier(0.77, 0, 0.175, 1) 1700ms infinite;
}
@keyframes heroTigreEntry {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes heroTigreBreath {
  0%, 100% { transform: scale(1)    rotate(0deg);   }
  50%      { transform: scale(1.04) rotate(-2deg);  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__tigre { animation: none !important; opacity: 1; transform: none; }
}

/* Asterisco verde de fundo: respiro lento. */
.hero__bg-asterisk {
  animation: bgAsteriskBreath 18s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes bgAsteriskBreath {
  0%, 100% { transform: rotate(-12deg) scale(1);    opacity: 0.18; }
  50%      { transform: rotate(-9deg)  scale(1.04); opacity: 0.26; }
}

/* Reduced motion: zera continuous animations no hero (entries permanecem como fade).  */
@media (prefers-reduced-motion: reduce) {
  .hero__plate,
  .hero__visual,
  .hero__burst,
  .hero__bg-asterisk {
    animation: none !important;
  }
}

/* ==========================================================================
   3. Promessa — bullets stagger + settle nos numerais
   ========================================================================== */

.promessa__list li {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.promessa__list[data-visible="true"] li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.promessa__list li:nth-child(1) { transition-delay: 60ms; }
.promessa__list li:nth-child(2) { transition-delay: 140ms; }
.promessa__list li:nth-child(3) { transition-delay: 220ms; }

.promessa__list[data-visible="true"] .promessa__list-num {
  animation: numSettle 600ms var(--ease-out-expo) both;
}
.promessa__list li:nth-child(1) .promessa__list-num { animation-delay: 100ms; }
.promessa__list li:nth-child(2) .promessa__list-num { animation-delay: 180ms; }
.promessa__list li:nth-child(3) .promessa__list-num { animation-delay: 260ms; }
@keyframes numSettle {
  from { transform: scale(1.2); opacity: 0.0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ==========================================================================
   4. Stats
   ========================================================================== */

.stat--anchor {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms var(--ease-out-expo);
  will-change: clip-path;
}
.stat--anchor[data-visible="true"] { clip-path: inset(0 0 0 0); }

.stat--anchor::after {
  /* "40" gigante por trás, entra com fade muito sutil */
  opacity: 0;
  transition: opacity 800ms var(--ease-out-expo) 400ms;
}
.stat--anchor[data-visible="true"]::after { opacity: 1; }

/* Numbers que contam (lead + 3 row) */
.stats__rest .stat {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.stats__rest[data-visible="true"] .stat {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.stats__rest .stat--lead { transition-delay: 100ms; }
.stats__row .stat:nth-child(1) { transition-delay: 200ms; }
.stats__row .stat:nth-child(2) { transition-delay: 300ms; }
.stats__row .stat:nth-child(3) { transition-delay: 400ms; }

/* ==========================================================================
   5. Soluções
   ========================================================================== */

.solucao-card {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 600ms var(--ease-out-expo),
    transform 600ms var(--ease-out-expo),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}
.solucoes__grid[data-visible="true"] .solucao-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.solucoes__grid .solucao-card:nth-child(1) { transition-delay: 80ms; }
.solucoes__grid .solucao-card:nth-child(3) { transition-delay: 160ms; }
.solucoes__grid .solucao-card:nth-child(2) { transition-delay: 280ms; } /* card alto entra "respondendo" */

/* Hover micro-tilt */
@media (hover: hover) and (pointer: fine) {
  .solucao-card:hover {
    transform: translate3d(0, -2px, 0) rotate(-0.3deg);
  }
  /* Tilt no placeholder do card alto */
  .solucao-card--tall .solucao-card__visual {
    transition: transform 380ms var(--ease-out-expo);
    transform-origin: center;
  }
  .solucao-card--tall:hover .solucao-card__visual {
    transform: rotate(1deg);
  }
}

/* Tags: fundo desliza da esquerda no hover, texto faz cross-fade */
.tag { overflow: hidden; }
.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .tag:hover {
    color: var(--paper);
    border-color: var(--brand);
  }
  .tag:hover::before { transform: scaleX(1); }

  .solucao-card--tall .tag::before { background: var(--paper); }
  .solucao-card--tall .tag:hover {
    color: var(--brand);
    border-color: var(--paper);
  }
}

/* ==========================================================================
   5.5 Clientes — header em fade, carrossel em loop infinito
   ========================================================================== */

.clientes__head > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.clientes[data-visible="true"] .clientes__head > *:nth-child(1) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 60ms; }
.clientes[data-visible="true"] .clientes__head > *:nth-child(2) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 160ms; }

.clientes__rail {
  opacity: 0;
  transition: opacity 600ms var(--ease-out-expo) 240ms;
}
.clientes[data-visible="true"] .clientes__rail { opacity: 1; }

.clientes__foot {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 500ms var(--ease-out-expo) 360ms,
    transform 500ms var(--ease-out-expo) 360ms;
}
.clientes[data-visible="true"] .clientes__foot {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Marquee infinito do carrossel — wrap criado pelo motion.js.
   Gap igual ao da track interna pra evitar seam grudada (último item do
   original + primeiro do clone se beijavam — Coca-Cola e He.Net). */
.clientes__rail-track-wrap {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  animation: clientesMarquee 70s linear infinite;
}
@keyframes clientesMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.clientes__rail:hover .clientes__rail-track-wrap { animation-play-state: paused; }

/* ==========================================================================
   6. Parceiros — entrada do header + benefits stagger
   ========================================================================== */

.parceiros__header > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 600ms var(--ease-out-expo),
    transform 600ms var(--ease-out-expo);
}
.parceiros[data-visible="true"] .parceiros__header > *:nth-child(1) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 60ms; }
.parceiros[data-visible="true"] .parceiros__header > *:nth-child(2) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 140ms; }
.parceiros[data-visible="true"] .parceiros__header > *:nth-child(3) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 220ms; }

.parceiros__benefit {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 600ms var(--ease-out-expo),
    transform 600ms var(--ease-out-expo),
    box-shadow var(--duration) var(--ease-out);
}
.parceiros[data-visible="true"] .parceiros__benefit:nth-child(1) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 320ms; }
.parceiros[data-visible="true"] .parceiros__benefit:nth-child(2) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 420ms; }
.parceiros[data-visible="true"] .parceiros__benefit:nth-child(3) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 520ms; }

.parceiros__cta-row {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.parceiros[data-visible="true"] .parceiros__cta-row {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 660ms;
}

/* "02" watermark com parallax — variável definida pelo IO em motion.js */
.parceiros::before {
  transform: translate3d(0, calc(-50% + var(--parallax-y, 0px)), 0);
  transition: transform 220ms linear;
  will-change: transform;
}

/* ==========================================================================
   7. Processo — slide da esquerda + settle no numeral
   ========================================================================== */

.processo__step {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.processo__steps[data-visible="true"] .processo__step {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.processo__steps .processo__step:nth-child(1) { transition-delay: 80ms; }
.processo__steps .processo__step:nth-child(2) { transition-delay: 200ms; }
.processo__steps .processo__step:nth-child(3) { transition-delay: 320ms; }

/* Ícone do Processo: entra com escala + rotação leve */
.processo__icon {
  opacity: 0;
  transform: scale(0.5) rotate(-30deg);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.processo__steps[data-visible="true"] .processo__icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.processo__steps .processo__step:nth-child(1) .processo__icon { transition-delay: 200ms; }
.processo__steps .processo__step:nth-child(2) .processo__icon { transition-delay: 320ms; }
.processo__steps .processo__step:nth-child(3) .processo__icon { transition-delay: 440ms; }

/* Linha tracejada da timeline: desenha da esquerda pra direita */
.processo__steps::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 800ms var(--ease-out-expo) 600ms;
}
.processo__steps[data-visible="true"]::before {
  clip-path: inset(0 0 0 0);
}

/* Continuous flow: ícones respiram + steps ciclam + tracer dot percorre a
   linha tracejada. Atrasados pra começar depois do entry concluir. */
.processo__steps[data-visible="true"] .processo__icon {
  animation: processoIconBreath 6.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.processo__steps[data-visible="true"] .processo__step:nth-child(1) .processo__icon { animation-delay: 1300ms; }
.processo__steps[data-visible="true"] .processo__step:nth-child(2) .processo__icon { animation-delay: 1500ms; }
.processo__steps[data-visible="true"] .processo__step:nth-child(3) .processo__icon { animation-delay: 1700ms; }

@keyframes processoIconBreath {
  0%, 100% { transform: scale(1)    rotate(0deg);  }
  50%      { transform: scale(1.06) rotate(-4deg); }
}

/* Cycle highlight: cada step recebe um halo vermelho por ~1.5s, em sequência. */
.processo__steps[data-visible="true"] .processo__step::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  border-radius: 12px;
  pointer-events: none;
  background: oklch(56% 0.215 27.5 / 0);
  animation: processoStepHalo 12s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.processo__steps[data-visible="true"] .processo__step:nth-child(1)::before { animation-delay: 1800ms; }
.processo__steps[data-visible="true"] .processo__step:nth-child(2)::before { animation-delay: 5800ms; }
.processo__steps[data-visible="true"] .processo__step:nth-child(3)::before { animation-delay: 9800ms; }

@keyframes processoStepHalo {
  0%, 88%, 100% { background: oklch(56% 0.215 27.5 / 0); }
  10%, 22%      { background: oklch(56% 0.215 27.5 / 0.06); }
}

/* Tracer dot — bolinha verde que percorre a linha tracejada infinitamente. */
.processo__steps::after {
  content: "";
  position: absolute;
  top: clamp(2rem, 1.75rem + 0.5vw, 2.5rem);
  left: 8%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--joy);
  border-radius: 50%;
  box-shadow: 0 0 0 3px oklch(72% 0.215 145 / 0.30);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.processo__steps[data-visible="true"]::after {
  animation: processoTracer 5.5s linear 1500ms infinite;
}
@keyframes processoTracer {
  0%, 100% { left: 8%;  opacity: 0; }
  6%       { opacity: 1; }
  94%      { opacity: 1; }
  99.99%   { left: 92%; opacity: 0; }
}
@media (max-width: 960px) {
  .processo__steps[data-visible="true"]::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .processo__steps[data-visible="true"] .processo__icon,
  .processo__steps[data-visible="true"] .processo__step::before,
  .processo__steps[data-visible="true"]::after {
    animation: none !important;
  }
}

/* Ícone do Parceiros: entra com pop/scale */
.parceiros__icon {
  opacity: 0;
  transform: scale(0.5) rotate(-15deg);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.parceiros[data-visible="true"] .parceiros__benefit:nth-child(1) .parceiros__icon { opacity: 1; transform: scale(1) rotate(0); transition-delay: 400ms; }
.parceiros[data-visible="true"] .parceiros__benefit:nth-child(2) .parceiros__icon { opacity: 1; transform: scale(1) rotate(0); transition-delay: 500ms; }
.parceiros[data-visible="true"] .parceiros__benefit:nth-child(3) .parceiros__icon { opacity: 1; transform: scale(1) rotate(0); transition-delay: 600ms; }

/* ==========================================================================
   8. Depoimentos — fade preservando offset vertical
   ========================================================================== */

.depoimento {
  --rest-y: 0px;
  --hover-y: 0px;
  --entry-y: 8px;
  opacity: 0;
  transform: translate3d(0, calc(var(--rest-y) + var(--hover-y) + var(--entry-y)), 0);
  transition:
    transform 280ms var(--ease-out-expo),
    opacity 500ms var(--ease-out-expo),
    border-color var(--duration) var(--ease-out);
}
.depoimentos__grid > :nth-child(1),
.depoimentos__grid > :nth-child(2),
.depoimentos__grid > :nth-child(3) { --rest-y: 0px; }

.depoimentos__grid[data-visible="true"] .depoimento {
  opacity: 1;
  --entry-y: 0px;
}
.depoimentos__grid .depoimento:nth-child(1) { transition-delay: 80ms; }
.depoimentos__grid .depoimento:nth-child(2) { transition-delay: 160ms; }
.depoimentos__grid .depoimento:nth-child(3) { transition-delay: 240ms; }

@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .depoimento:hover { --hover-y: -4px; border-color: var(--rule-strong); }
}
@media (max-width: 960px) {
  .depoimentos__grid > * { --rest-y: 0px; }
}

/* ==========================================================================
   9. Visita — cards + linha superior animada
   ========================================================================== */

.visita__card {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  border-top-color: transparent;
  position: relative;
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.visita__card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out-expo);
}
.visita__grid[data-visible="true"] .visita__card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.visita__grid[data-visible="true"] .visita__card::before {
  transform: scaleX(1);
}
.visita__grid .visita__card:nth-child(1) { transition-delay: 80ms; }
.visita__grid .visita__card:nth-child(2) { transition-delay: 160ms; }
.visita__grid .visita__card:nth-child(3) { transition-delay: 240ms; }
.visita__grid .visita__card:nth-child(4) { transition-delay: 320ms; }
.visita__grid[data-visible="true"] .visita__card:nth-child(1)::before { transition-delay: 140ms; }
.visita__grid[data-visible="true"] .visita__card:nth-child(2)::before { transition-delay: 220ms; }
.visita__grid[data-visible="true"] .visita__card:nth-child(3)::before { transition-delay: 300ms; }
.visita__grid[data-visible="true"] .visita__card:nth-child(4)::before { transition-delay: 380ms; }

/* ==========================================================================
   10. Form — entrada + perk pulse + dots de loading
   ========================================================================== */

.orcamento .orcamento__head > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.orcamento[data-visible="true"] .orcamento__head > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.orcamento[data-visible="true"] .orcamento__head > *:nth-child(1) { transition-delay: 80ms; }
.orcamento[data-visible="true"] .orcamento__head > *:nth-child(2) { transition-delay: 160ms; }
.orcamento[data-visible="true"] .orcamento__head > *:nth-child(3) { transition-delay: 240ms; }
.orcamento[data-visible="true"] .orcamento__head > *:nth-child(4) { transition-delay: 320ms; }
.orcamento[data-visible="true"] .orcamento__head > *:nth-child(5) { transition-delay: 400ms; }

/* Perk: wobble sutil + shadow breath combinados. Stamp meio "respirando".
   Curva ease-in-out forte (Emil), 7s pra não cansar. */
.orcamento[data-visible="true"] .orcamento__perk {
  animation: orcamentoPerkBreath 7s cubic-bezier(0.77, 0, 0.175, 1) 1200ms infinite;
}
@keyframes orcamentoPerkBreath {
  0%, 100% {
    transform: rotate(-0.5deg);
    box-shadow:
      0 22px 48px -18px oklch(28% 0.06 152 / 0.55),
      inset 0 1px 0 oklch(99% 0.005 27.5 / 0.20);
  }
  50% {
    transform: rotate(0.5deg);
    box-shadow:
      0 30px 56px -18px oklch(28% 0.06 152 / 0.95),
      inset 0 1px 0 oklch(99% 0.005 27.5 / 0.30);
  }
}

/* Tag-ribbon: pulse contraindicador (anti-fase) — quando o perk inclina pra
   esquerda, a tag pulsa, criando "cintilação" do destaque sem ser barulhenta. */
.orcamento[data-visible="true"] .orcamento__perk-tag {
  animation: orcamentoPerkTagPulse 3.5s cubic-bezier(0.77, 0, 0.175, 1) 1500ms infinite;
}
@keyframes orcamentoPerkTagPulse {
  0%, 100% {
    box-shadow:
      0 8px 18px -6px oklch(48% 0.205 27.5 / 0.50),
      inset 0 1px 0 oklch(99% 0.005 27.5 / 0.22);
  }
  50% {
    box-shadow:
      0 12px 24px -6px oklch(48% 0.205 27.5 / 0.85),
      inset 0 1px 0 oklch(99% 0.005 27.5 / 0.32);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orcamento[data-visible="true"] .orcamento__perk,
  .orcamento[data-visible="true"] .orcamento__perk-tag {
    animation: none !important;
  }
}

.orcamento__form {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 600ms var(--ease-out-expo) 200ms,
    transform 600ms var(--ease-out-expo) 200ms;
}
.orcamento[data-visible="true"] .orcamento__form {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Field: label muda de cor ao focar/preencher */
.field:has(input:focus) label,
.field:has(select:focus) label,
.field:has(input:not(:placeholder-shown)) label,
.field:has(textarea:not(:placeholder-shown)) label {
  color: var(--brand);
  transition: color 220ms var(--ease-out-expo);
}

/* Submit: cross-fade do label via blur quando loading */
.orcamento__submit [data-submit-label] {
  display: inline-block;
  transition: filter 200ms ease, opacity 200ms ease;
}
.orcamento__submit[data-loading="true"] [data-submit-label] {
  filter: blur(2px);
  opacity: 0.65;
}

/* Shake no formulário inteiro ao tentar enviar inválido (data-shake). */
.orcamento__form[data-shake="true"] {
  animation: formShake 380ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
@keyframes formShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20%      { transform: translate3d(-4px, 0, 0); }
  40%      { transform: translate3d(4px, 0, 0); }
  60%      { transform: translate3d(-3px, 0, 0); }
  80%      { transform: translate3d(2px, 0, 0); }
}

/* Loader: 3 traços horizontais animando — em vez de pontinhos circulares.
   Casa com a marca de comunicação visual (régua, traço, marcação).         */
.dots {
  display: none;
  gap: 5px;
  margin-left: 10px;
  align-items: center;
}
.orcamento__submit[data-loading="true"] .dots { display: inline-flex; }
.dots span {
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: left;
  opacity: 0.30;
  animation: dotBar 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.dots span:nth-child(2) { animation-delay: 0.16s; }
.dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dotBar {
  0%, 80%, 100% { opacity: 0.30; transform: scaleX(0.50); }
  40%           { opacity: 1;    transform: scaleX(1); }
}

/* ==========================================================================
   11. Footer — tagline + watermark
   ========================================================================== */

/* Reveal escalonado do rodapé padrão. Stagger por .footer__col (todas as
   colunas) + barra inferior. Não usar nth-of-type (o .footer__brand é div e
   desalinha a contagem) — reveal por classe garante que TODAS as colunas
   apareçam, inclusive Redes. */
.footer__brand,
.footer__col,
.footer__bottom {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}
.footer[data-visible="true"] .footer__brand               { opacity: 1; transform: translate3d(0,0,0); transition-delay: 60ms; }
.footer[data-visible="true"] .footer__col:nth-of-type(2)  { opacity: 1; transform: translate3d(0,0,0); transition-delay: 120ms; }
.footer[data-visible="true"] .footer__col:nth-of-type(3)  { opacity: 1; transform: translate3d(0,0,0); transition-delay: 180ms; }
.footer[data-visible="true"] .footer__col:nth-of-type(4)  { opacity: 1; transform: translate3d(0,0,0); transition-delay: 240ms; }
.footer[data-visible="true"] .footer__bottom              { opacity: 1; transform: translate3d(0,0,0); transition-delay: 320ms; }

/* Fallback: se o JS não rodar, nada de rodapé invisível. */
@media (prefers-reduced-motion: reduce) {
  .footer__brand, .footer__col, .footer__bottom { opacity: 1; transform: none; }
}

.footer::before {
  opacity: 0;
  transition: opacity 1200ms var(--ease-out-expo);
}
.footer[data-visible="true"]::before { opacity: 1; }

/* ==========================================================================
   12. CTAs primary/joy/paper — wash sutil no hover (overlay branco)
   ========================================================================== */

.cta--primary,
.cta--joy,
.cta--paper { overflow: hidden; }

.cta--primary::after,
.cta--joy::after,
.cta--paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    oklch(99% 0.005 27.5 / 0.18) 50%,
    transparent 65%
  );
  transform: translate3d(-120%, 0, 0);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.cta--paper::after {
  background: linear-gradient(
    110deg,
    transparent 35%,
    oklch(56% 0.215 27.5 / 0.10) 50%,
    transparent 65%
  );
}
.cta--primary > *,
.cta--joy > *,
.cta--paper > * { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .cta--primary:hover::after,
  .cta--joy:hover::after,
  .cta--paper:hover::after {
    transform: translate3d(120%, 0, 0);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ==========================================================================
   12.5 Watermarks — respiro contínuo (opacity apenas, não conflita com
        transforms ou parallax)
   ========================================================================== */

.parceiros::before,
.orcamento::before,
.stat--anchor::after,
.hero::after,
.footer::before {
  animation: watermarkBreath 14s ease-in-out infinite;
}
@keyframes watermarkBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* O pulse do FAB foi substituído pelo halo sonar declarado em chrome.css.
   Aqui ficam apenas eventuais adicionais quando precisar coordenar com IO. */

/* ==========================================================================
   14. Header — contração suave do padding ao scrollar
   ========================================================================== */

.header__inner {
  transition: padding 220ms var(--ease-out-quart);
}
.header[data-scrolled="true"] .header__inner { padding-block: 0.6rem; }

/* ==========================================================================
   15. Section wash — destaque ao chegar via âncora interna
   ========================================================================== */

section[id] {
  position: relative;
  isolation: isolate;
}
section[id].is-target::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  pointer-events: none;
  z-index: -1;
  animation: sectionWash 750ms var(--ease-out-expo) forwards;
}
@keyframes sectionWash {
  0%   { opacity: 0; }
  18%  { opacity: 0.06; }
  100% { opacity: 0; }
}

/* ==========================================================================
   16. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}