/* Camada de movimento. Os estados escondidos só existem com html.motion (definido por motion-init.js);
   sem JavaScript ou com "reduzir movimento", todo o conteúdo aparece pronto. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-ui: 320ms;
  --t-reveal: 850ms;
}

/* Transição entre páginas: o cabeçalho fica parado, o conteúdo troca com um deslize curto. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(.55, .055, .675, .19) both; }
::view-transition-new(root) { animation: vt-in 460ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Nada pisca antes do script organizar as entradas; o estado inicial é aplicado sem transição. */
.motion:not(.motion-ready) main { opacity: 0; }
.motion-prep *, .motion-prep *::before, .motion-prep *::after { transition: none !important; }

/* Assinatura: na primeira página da visita, o nome é "escrito" da esquerda para a direita. */
.intro .brand-logo { animation: sign-in 1.25s var(--ease-in-out) .15s both; }
@keyframes sign-in {
  from { clip-path: inset(0 100% 0 0); opacity: .2; }
  to { clip-path: inset(0 0 0 0); opacity: .96; }
}

/* Cabeçalho: barra de progresso na cor da área e recolhimento ao descer. */
.site-header { transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease, translate var(--t-ui) var(--ease-out); }
.site-header.is-tucked { translate: 0 -100%; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Navegação: sublinhado que cresce a partir da esquerda. */
.site-nav a:not(.nav-contact) { position: relative; }
.site-nav a:not(.nav-contact)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-ui) var(--ease-out); }
.site-nav a:not(.nav-contact):hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-contact { transition: color var(--t-hover) ease, background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.nav-contact:hover { background: var(--accent); border-color: var(--accent); color: #0b0d0e; }

/* Botões: seta que avança, preenchimento que entra pela esquerda, resposta ao toque. */
.button { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t-ui) var(--ease-out), border-color var(--t-hover) ease, color var(--t-hover) ease; }
.button::after { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.button:hover::after { transform: translate(3px, -3px); }
.button:active { transform: scale(.97); transition-duration: var(--t-press); }
.button-secondary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--accent) 16%, transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease-out); }
.button-secondary:hover::before { transform: scaleX(1); }
.button-primary:hover { transform: translateY(-2px); }

/* Entradas por seção. Usam a propriedade "translate" para não disputar com "transform" dos efeitos de hover. */
.motion-ready .reveal { opacity: 0; translate: 0 26px; transition: opacity 700ms var(--ease-out) var(--d, 0ms), translate var(--t-reveal) var(--ease-expo) var(--d, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; translate: none; }
.motion-ready .rise { opacity: 0; translate: 0 18px; transition: opacity 650ms var(--ease-out), translate 800ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 75ms + 140ms + var(--d, 0ms)); }
.motion-ready .is-visible .rise, .motion-ready .rise.is-visible { opacity: 1; translate: none; }

/* Títulos: cada palavra sobe de dentro de uma máscara. */
.split .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; color: inherit; }
.split .wi { display: inline-block; color: inherit; }
.motion-ready .split .wi { transform: translateY(108%); transition: transform 950ms var(--ease-expo); transition-delay: calc(var(--wi, 0) * 42ms + var(--split-delay, 0ms)); }
.motion-ready .split.is-visible .wi, .motion-ready .is-visible .split .wi { transform: none; }

/* Capas: a imagem assenta ao carregar e se desloca mais devagar que a página. */
.page-hero:not(.about-hero)::before { transform: translate3d(0, calc(var(--hero-p, 0) * 18%), 0); scale: 1.06; }
.motion .page-hero:not(.about-hero)::before { animation: hero-settle 1.8s var(--ease-soft) both; }
@keyframes hero-settle { from { scale: 1.16; opacity: 0; } to { scale: 1.06; opacity: 1; } }
.page-hero > .container, .minuto-hero-grid > div:first-child { opacity: calc(1 - var(--hero-p, 0) * 1.15); translate: 0 calc(var(--hero-p, 0) * -48px); }

/* Página inicial: cartões com inclinação leve e ponto de luz na cor da área. */
.choice-card { --rx: 0deg; --ry: 0deg; --lift: 0px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); transition: transform 500ms var(--ease-out), border-color .25s ease, box-shadow .25s ease; }
.choice-card:hover { --lift: -6px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); }
.choice-card::before { transition: transform 1.1s var(--ease-soft), filter .4s ease; }
.choice-card:hover::before { transform: scale(1.07); }
.motion-ready .choice-card::before { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-in-out) calc(var(--d, 0ms) + 120ms), transform 1.1s var(--ease-soft), filter .4s ease; }
.motion-ready .choice-card.is-visible::before { clip-path: inset(0 0 0 0); }
.card-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--glow, var(--accent)) 22%, transparent), transparent 60%); transition: opacity 400ms ease; }
.choice-card .card-glow { --glow: var(--choice-accent); }
.choice-card:hover .card-glow, .minuto-spotlight:hover .card-glow, .topic-card:hover .card-glow { opacity: 1; }
.choice-arrow { transition: transform var(--t-ui) var(--ease-out); }
.choice-card:hover .choice-arrow { transform: translateX(6px); }

/* Minuto em destaque e cartões de tópicos. */
.minuto-spotlight { position: relative; overflow: hidden; isolation: isolate; --glow: #bdd49c; }
.minuto-spotlight > :not(.card-glow) { position: relative; z-index: 1; }
.minuto-brand-tile { transition: transform 500ms var(--ease-out); }
.minuto-spotlight:hover .minuto-brand-tile { transform: rotate(-2deg) scale(1.04); }
.minuto-spotlight-action span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.minuto-spotlight:hover .minuto-spotlight-action span { transform: translate(3px, -3px); }
.topic-card { transition: transform 500ms var(--ease-out), border-color .25s ease; }
.topic-card > :not(.card-glow) { position: relative; z-index: 1; }
.topic-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Etapas em sequência: uma linha de "corrente" percorre o topo quando a seção aparece. */
.process, .learning-path { position: relative; }
.process::before, .learning-path::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: var(--accent); transform: scaleX(1); transform-origin: 0 50%; }
.motion-ready .process::before, .motion-ready .learning-path::before { transform: scaleX(0); transition: transform 1.6s var(--ease-in-out) .2s; }
.motion-ready .process.is-visible::before, .motion-ready .learning-path.is-visible::before { transform: scaleX(1); }
.motion-ready .learning-path.is-visible::before { transition-delay: .5s; }
.step-number, .learning-step > span { transition: color .4s ease; }
.process-step, .learning-step { transition: background-color .3s ease; }
.process-step:hover, .learning-step:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* Portfólio: a imagem assenta de uma escala maior ao entrar. */
.motion-ready .portfolio-item.rise img { scale: 1.08; transition: scale 1.3s var(--ease-soft) calc(var(--i, 0) * 75ms + 140ms), transform .35s ease, filter .35s ease; }
.motion-ready .is-visible .portfolio-item.rise img { scale: 1; }

/* Imagem da página de investimentos: deriva lenta e contínua. */
.investment-visual { position: relative; overflow: hidden; isolation: isolate; }
.investment-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/area-investimentos.jpg") 72% center / cover; transform-origin: 70% 50%; }
.motion .investment-visual::before { animation: slow-drift 22s ease-in-out infinite alternate; }
@keyframes slow-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }

/* Minuto: os momentos aparecem um a um e reagem ao ponteiro. */
.minuto-moments span { transition: background-color .25s ease, color .25s ease; }
.minuto-moments span:hover { background: #dfe6cd; color: #1f281a; }

@media (max-width: 1100px) {
  .site-nav a:not(.nav-contact)::after { display: none; }
}

@media (hover: none) {
  .choice-card, .choice-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .site-header.is-tucked { translate: none; }
  .page-hero > .container, .minuto-hero-grid > div:first-child { opacity: 1; translate: none; }
  .page-hero:not(.about-hero)::before { transform: none; }
  .choice-card, .choice-card:hover, .topic-card:hover { transform: none; }
  .investment-visual::before { animation: none; }
}