/* Movimento do site (página inicial, /comecar, /planos, /obrigado, páginas legais).
   Mesma curva e tempos que a página inicial já usava; tudo some com prefers-reduced-motion. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); }

/* ─── Transição entre páginas (View Transitions entre documentos; navegador sem suporte troca na hora) ─── */
@view-transition { navigation: auto; }
/* A barra do topo fica parada; só o conteúdo troca */
.nav, .bar { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
/* Saída mais discreta que a entrada */
::view-transition-old(root) { animation: vt-out 160ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }

/* ─── Entradas ao rolar: as partes de cada seção sobem em sequência (motion.js marca .pre → .in) ─── */
.pre { opacity: 0; transform: translateY(20px); filter: blur(4px); }
.in { opacity: 1; transform: none; filter: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); }

/* ─── Barra do topo ─── */
.nav, .bar { transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
/* Ao rolar: vidro mais opaco e uma sombra leve separam a barra do conteúdo */
.nav[data-scrolled] { background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 rgba(17, 24, 20, 0.06), 0 8px 24px -12px rgba(17, 24, 20, 0.12); }
.bar[data-scrolled] {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(17, 24, 20, 0.06), 0 8px 24px -12px rgba(17, 24, 20, 0.12);
}

/* Links: sublinhado que cresce da esquerda; o da seção atual fica marcado */
.nav-links a:not(.btn), .bar-links a { position: relative; text-decoration: none; transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.nav-links a:not(.btn)::after, .bar-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out);
}
.nav-links a[aria-current]::after, .bar-links a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-links a:not(.btn):hover::after, .bar-links a:hover::after { transform: scaleX(1); } }
.bar-links a:hover { text-decoration: none; }
.nav-links a[aria-current], .bar-links a[aria-current] { opacity: 1; color: inherit; }
.nav-links a[aria-current] { color: var(--text); }

/* Botão do topo: sobe 1px no hover, afunda ao clicar */
.nav .btn, .bar .btn { transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 160ms var(--ease-out); }
@media (hover: hover) { .nav .btn:hover, .bar .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(21, 128, 61, 0.45); } }
.nav .btn:active, .bar .btn:active { transform: scale(0.97); box-shadow: none; }

/* Logo: o marcador dá um pulinho no hover (raro, pode ter graça) */
.brand-mark svg, .wordmark svg { transition: transform 420ms linear(0, 0.36 14%, 0.86 31%, 1.05 44%, 1.06 52%, 1.01 68%, 0.99 80%, 1); }
@media (hover: hover) { .brand:hover .brand-mark svg, .wordmark:hover svg { transform: translateY(-2px) scale(1.06); } }

/* ─── Menu no celular (motion.js cria o botão e o painel a partir dos links da barra) ─── */
.menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: 4px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; }
.menu-toggle:active { transform: scale(0.94); }
.menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out), opacity 160ms var(--ease-out); }
.menu-toggle span + span { margin-top: 5px; }
[data-menu-open] .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
[data-menu-open] .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-panel {
  position: absolute; top: calc(100% + 8px); right: 16px; z-index: 20; min-width: 220px;
  display: grid; gap: 2px; padding: 8px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(17, 24, 20, 0.08); box-shadow: 0 16px 40px -12px rgba(17, 24, 20, 0.25);
  transform-origin: top right; opacity: 0; transform: scale(0.96) translateY(-4px); visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--ease-in), transform 160ms var(--ease-in), visibility 0s 160ms;
}
[data-menu-open] .menu-panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; }
.menu-panel a { display: block; padding: 12px 14px; border-radius: 10px; color: #111814; text-decoration: none; font-size: 16px; font-weight: 500; }
.menu-panel a:hover, .menu-panel a[aria-current] { background: #eef2ef; }
@media (max-width: 720px) { .nav .menu-toggle { display: flex; } }
@media (max-width: 1080px) { .bar .menu-toggle { display: flex; } }
.nav .btn, .bar .btn { white-space: nowrap; }
@media (max-width: 680px) { .bar { gap: 8px; } }
.nav .wrap { position: relative; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .pre { opacity: 1; transform: none; filter: none; }
  .nav, .bar, .nav .btn, .bar .btn, .menu-panel, .menu-toggle span,
  .nav-links a::after, .bar-links a::after, .brand-mark svg, .wordmark svg { transition: none !important; }
  .nav .btn:hover, .bar .btn:hover, .brand:hover .brand-mark svg, .wordmark:hover svg { transform: none; }
}