/**
 * Aurora — movimento (site público e autenticação).
 * Carregar depois de aurora-site.css / aurora-auth.css. Par de public/assets/js/aurora-motion.js.
 *
 * Regra de ouro: sem a classe .au-motion no <html> (sem JS, JS com erro ou
 * prefers-reduced-motion) NADA aqui esconde ou desloca conteúdo.
 * O script só adiciona .au-motion quando vai de fato animar.
 */

@property --au-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
    --au-k: 1;                 /* fator de amplitude (metade no celular) */
    --au-ease-io: cubic-bezier(.65, 0, .25, 1);
}
@media (max-width: 767.98px), (pointer: coarse) { :root { --au-k: .5; } }

/* ------------------------------------------------------------------ */
/* 1. Parallax em camadas (o script só alimenta --au-p, --au-mx, --au-my) */
/* ------------------------------------------------------------------ */
.au-motion .au-hero { overflow: clip; }
.au-motion .au-hero > .au-aurora { translate: 0 calc(var(--au-p, 0) * 70px * var(--au-k)); }
.au-motion .au-hero > .au-dots { translate: 0 calc(var(--au-p, 0) * 42px * var(--au-k)); }
.au-motion .au-hero .au-hero__aura { translate: 0 calc(var(--au-p, 0) * 48px * var(--au-k)); }
.au-motion .au-stage .au-chat {
    translate: calc(var(--au-mx, 0) * 6px) calc(var(--au-p, 0) * -14px * var(--au-k) + var(--au-my, 0) * 4px);
    transform: perspective(1400px) rotateX(calc(var(--au-my, 0) * -1.6deg)) rotateY(calc(var(--au-mx, 0) * 2.2deg));
}
.au-motion .au-stage .au-src {
    translate: calc(var(--au-mx, 0) * -12px) calc(var(--au-p, 0) * -34px * var(--au-k) + var(--au-my, 0) * -9px);
}
.au-motion .au-stage .au-wire { translate: calc(var(--au-mx, 0) * -3px) 0; }
.au-motion .au-hero.is-inview > .au-aurora,
.au-motion .au-hero.is-inview > .au-dots,
.au-motion .au-hero.is-inview .au-chat,
.au-motion .au-hero.is-inview .au-src { will-change: translate; }

/* Seções com vinheta: a vinheta anda um pouco mais que o texto; etiquetas e selos formam o 3º plano */
.au-motion .au-split > .au-vig,
.au-motion .au-case > .au-vig,
.au-motion .au-duo > article > .au-vig { translate: 0 calc(var(--au-p, 0) * 30px * var(--au-k)); }
.au-motion .au-split > :not(.au-vig),
.au-motion .au-case > .au-case__text { translate: 0 calc(var(--au-p, 0) * -14px * var(--au-k)); }
.au-motion .au-vig .au-cite,
.au-motion .au-vig .au-status,
.au-motion .au-vig .au-launcher,
.au-motion .au-vig .au-chip { translate: 0 calc(var(--au-p, 0) * -7px * var(--au-k)); }
.au-motion .is-inview > .au-vig { will-change: translate; }

/* Chamada final: aurora e malha em sentidos opostos */
.au-motion .au-final { overflow: clip; }
.au-motion .au-final .au-aurora { inset: -60px; translate: 0 calc(var(--au-p, 0) * -46px * var(--au-k)); }
.au-motion .au-final .au-dots { inset: -40px; translate: 0 calc(var(--au-p, 0) * 28px * var(--au-k)); }

/* Autenticação: painel da demonstração */
.au-motion .auth-aside .auth-demo { translate: calc(var(--au-mx, 0) * 8px) calc(var(--au-my, 0) * 6px); }
.au-motion .auth-aside .au-dots { translate: calc(var(--au-mx, 0) * -10px) calc(var(--au-my, 0) * -8px); }

/* ------------------------------------------------------------------ */
/* 2. A aurora respira (pausa fora da tela e com a aba oculta)          */
/* ------------------------------------------------------------------ */
@keyframes au-breathe {
    0% { transform: translate3d(-1.5%, 1%, 0) scale(1.02) rotate(-.6deg); }
    50% { transform: translate3d(1.5%, -1.5%, 0) scale(1.09) rotate(.8deg); }
    100% { transform: translate3d(-.5%, 2%, 0) scale(1.05) rotate(-.3deg); }
}
.au-motion .au-hero > .au-aurora,
.au-motion .au-hero .au-hero__aura,
.au-motion .au-stage::before,
.au-motion .auth-aside .au-aurora,
.au-motion .au-final .au-aurora {
    animation: au-breathe 22s ease-in-out infinite alternate;
    animation-play-state: paused;
    transform-origin: 70% 30%;
}
.au-motion .auth-aside .au-aurora { animation-duration: 26s; }
.au-motion .au-final .au-aurora { animation-duration: 18s; }
.au-motion .is-inview > .au-aurora,
.au-motion .is-inview .au-hero__aura,
.au-motion .is-inview .au-stage::before,
.au-motion .is-inview.au-aurora { animation-play-state: running; }
.au-motion.au-paused .au-aurora,
.au-motion.au-paused .au-hero__aura,
.au-motion.au-paused .au-stage::before { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ */
/* 3. Demonstração (herói e login): peças que o script anima            */
/* ------------------------------------------------------------------ */
.au-typing { position: absolute; left: 14px; top: 15px; display: inline-flex; gap: 5px; align-items: center; height: 12px; pointer-events: none; }
.au-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8A87A8; animation: au-typing 1s ease-in-out infinite; }
.au-typing i:nth-child(2) { animation-delay: .16s; }
.au-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes au-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.au-motion [data-au-demo] [data-d="a1"], .au-motion [data-au-demo] [data-d="a2"] { position: relative; }
.au-motion [data-au-demo] [data-d="q1"], .au-motion [data-au-demo] [data-d="q2"] { transform-origin: 100% 100%; }
.au-motion [data-au-demo] [data-d="wire"] { transform-origin: 50% 0; }

.au-replay {
    position: absolute; left: 0; bottom: -14px; z-index: 4;
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px 0 6px;
    border: 0; border-radius: 9px; background: transparent; color: var(--au-ink-2);
    font: 500 .8125rem/1 var(--au-font); cursor: pointer;
    transition: color .18s var(--au-ease), background-color .18s var(--au-ease);
}
.au-replay:hover { color: var(--au-indigo); background: rgba(79, 70, 229, .07); }
.au-replay:focus-visible { outline: 2px solid var(--au-indigo); outline-offset: 2px; }
.au-replay svg { transition: transform .5s var(--au-ease); }
.au-replay:hover svg { transform: rotate(-180deg); }
@media (min-width: 768px) { .au-stage .au-replay { left: 246px; } }
.auth-demo { position: relative; }
.auth-demo .au-replay { left: auto; right: 0; bottom: -14px; }

/* ------------------------------------------------------------------ */
/* 4. Vinhetas que mostram o produto trabalhando                        */
/* ------------------------------------------------------------------ */
/* lista de conteúdos: fila → processando → concluído */
.au-rows li.is-run .au-progress > i { transform-origin: 0 50%; }
.au-rows li.is-run-once .au-progress > i { animation: none; transform: scaleX(var(--au-bar, 0)); }
@keyframes au-status-pulse {
    0% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); transform: scale(1); }
    40% { box-shadow: 0 0 0 9px color-mix(in srgb, currentColor 0%, transparent); transform: scale(1.5); }
    100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); transform: scale(1); }
}
.au-status.is-pulse::before { animation: au-status-pulse .9s var(--au-ease) 1; }
.au-rows li.is-done-flash { animation: au-row-flash 1.2s var(--au-ease) 1; }
@keyframes au-row-flash { 0% { background: var(--au-ok-soft); } 100% { background: transparent; } }

/* editor de artigo: cursor de escrita */
.au-caret { display: inline-block; width: 0; height: 1.05em; vertical-align: -.16em; box-shadow: 0 0 0 1px var(--au-indigo); animation: au-caret .9s steps(1) infinite; }
@keyframes au-caret { 50% { opacity: 0; } }
.au-type-rest { visibility: hidden; }

/* widget: a janelinha abre a partir do botão lançador */
.au-ui__foot { position: relative; }
.au-pop {
    position: absolute; right: 18px; bottom: calc(100% - 4px); z-index: 2; width: min(250px, calc(100% - 36px));
    padding: 12px; border-radius: 14px; background: var(--au-surface);
    box-shadow: 0 0 0 1px rgba(15, 14, 42, .08), 0 24px 44px -20px rgba(49, 46, 129, .55);
    font-size: .8125rem; line-height: 1.4; color: var(--au-ink);
    opacity: 0; pointer-events: none; transform: scale(.6); transform-origin: calc(100% - 60px) calc(100% + 28px);
    clip-path: circle(0% at calc(100% - 60px) 100%);
    transition: opacity .25s var(--au-ease), transform .3s var(--au-ease), clip-path .3s var(--au-ease);
}
.au-pop.is-open, .au-motion .au-ui__foot:hover .au-pop {
    opacity: 1; transform: none; clip-path: circle(150% at calc(100% - 60px) 100%);
    transition: opacity .3s var(--au-ease), transform .55s var(--au-ease), clip-path .6s var(--au-ease);
}
.au-pop__bar { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-bottom: 9px; }
.au-pop__bar i { width: 20px; height: 20px; border-radius: 6px; background: var(--au-indigo); display: grid; place-items: center; color: #fff; }
.au-pop__msg { display: inline-block; padding: 8px 11px; border-radius: 11px; border-bottom-left-radius: 4px; background: var(--au-bg-2); }

/* como funciona: linha de progresso que se preenche com a rolagem */
.au-motion .au-steps::before {
    content: ""; position: absolute; left: 20.5px; top: 22px; width: 3px; height: var(--au-steps-len, 0px); border-radius: 3px; z-index: 0;
    background: linear-gradient(180deg, #6366F1, #22D3EE);
    transform: scaleY(var(--au-s, 0)); transform-origin: 50% 0;
}
.au-motion .au-steps > li::before { transition: background-color .45s var(--au-ease), color .45s var(--au-ease), box-shadow .45s var(--au-ease), scale .45s var(--au-ease); }
.au-motion .au-steps > li.is-lit::before { background: var(--au-indigo); color: #fff; box-shadow: 0 0 0 5px rgba(79, 70, 229, .14), 0 10px 20px -8px rgba(79, 70, 229, .7); scale: 1.06; }
.au-motion .au-steps > li h3, .au-motion .au-steps > li p { transition: opacity .5s var(--au-ease); }
.au-motion .au-steps > li:not(.is-lit) h3 { opacity: .55; }
.au-motion .au-steps > li:not(.is-lit) p { opacity: .6; }
@media (min-width: 992px) {
    .au-motion .au-steps::before {
        left: 22px; top: 20.5px; height: 3px; width: calc(66.667% + 37.33px);
        background: var(--au-gradient);
        transform: scaleX(var(--au-s, 0)); transform-origin: 0 50%;
    }
}

/* planos: entram em sequência (é uma lista); o recomendado ganha um brilho que percorre a borda uma vez */
.au-motion .au-plans:not(.is-in) > .au-plan { opacity: 0; translate: 0 28px; }
.au-motion .au-plans.is-in > .au-plan { transition: opacity .6s var(--au-ease), translate .75s var(--au-ease); }
.au-motion .au-plans.is-in > .au-plan:nth-child(2) { transition-delay: .09s; }
.au-motion .au-plans.is-in > .au-plan:nth-child(3) { transition-delay: .18s; }
.au-motion .au-plan--featured::after {
    content: ""; position: absolute; inset: -2px; border-radius: calc(var(--au-r-xl) + 2px); padding: 2.5px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--au-a), transparent 0 68%, #6366F1 78%, #22D3EE 90%, #fff 96%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.au-motion .au-plans.is-in > .au-plan--featured::after { animation: au-sweep 2s var(--au-ease-io) .55s 1 both; }
@keyframes au-sweep { 0% { --au-a: -40deg; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { --au-a: 320deg; opacity: 0; } }

/* abas de casos de uso: a conversa acontece */
@keyframes au-msg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.au-motion .au-chat__body.is-seq > * { animation: au-msg-in .5s var(--au-ease) backwards; }
.au-motion .au-chat__body.is-seq > .au-msg--user { transform-origin: 100% 100%; }
.au-motion .au-chat__body.is-seq > .au-msg--bot { transform-origin: 0 100%; }
.au-motion .au-chat__body.is-seq > :nth-child(1) { animation-delay: .1s; }
.au-motion .au-chat__body.is-seq > :nth-child(2) { animation-delay: .65s; }
.au-motion .au-chat__body.is-seq > :nth-child(3) { animation-delay: 1.35s; }
.au-motion .au-chat__body.is-seq > :nth-child(4) { animation-delay: 1.9s; }
.au-motion .au-chat__body.is-seq > :nth-child(n+5) { animation-delay: 2.4s; }
.au-motion .au-chat__body.is-seq .au-cite { animation: au-msg-in .4s var(--au-ease) backwards; animation-delay: inherit; }
.au-motion .au-chat__body.is-seq > :nth-child(2) .au-cite { animation-delay: 1s; }
.au-motion .au-chat__body.is-seq > :nth-child(4) .au-cite { animation-delay: 2.25s; }

/* títulos: entrada por máscara, uma vez */
.au-reveal__in { display: block; }
.au-motion .au-reveal > .au-reveal__in { clip-path: inset(0 0 100% 0); translate: 0 .42em; }
.au-motion .au-reveal.is-in > .au-reveal__in { clip-path: inset(-.3em -.2em -.35em -.2em); translate: 0 0; transition: clip-path .85s var(--au-ease), translate .85s var(--au-ease); }

/* ------------------------------------------------------------------ */
/* 5. Cabeçalho, progresso de leitura e microinterações                 */
/* ------------------------------------------------------------------ */
.au-nav { transition: background-color .3s var(--au-ease), box-shadow .3s var(--au-ease); }
.au-nav__brand img { transition: transform .35s var(--au-ease); transform-origin: 0 50%; }
.au-nav .navbar > .container { transition: transform .35s var(--au-ease); }
.au-nav.is-stuck { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 var(--au-line), 0 14px 30px -22px rgba(16, 14, 48, .35); }
.au-nav.is-stuck .au-nav__brand img { transform: scale(.92); }
@media (min-width: 992px) {
    .au-nav.is-stuck .au-nav__actions .btn { min-height: 38px; }
}

.au-readbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1040; pointer-events: none; }
.au-readbar i { display: block; height: 100%; background: var(--au-gradient); transform-origin: 0 50%; transform: scaleX(var(--au-read, 0)); }
@supports (animation-timeline: scroll()) {
    .au-readbar i { transform: scaleX(0); animation: au-read linear both; animation-timeline: scroll(root block); }
    @keyframes au-read { to { transform: scaleX(1); } }
}

/* menu: sublinhado que cresce */
@media (min-width: 992px) {
    .au-nav__links .nav-link { position: relative; }
    .au-nav__links .nav-link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--au-gradient); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--au-ease); }
    .au-nav__links .nav-link:hover::after, .au-nav__links .nav-link:focus-visible::after, .au-nav__links .nav-link[aria-current="page"]::after { transform: scaleX(1); }
    .au-nav__links .nav-link:hover { background: transparent; }
}

/* botões: brilho que atravessa + pressão */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0s; pointer-events: none; }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .75s var(--au-ease); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-ghost:hover { transform: translateY(-1px); }

/* etiqueta de fonte: realce */
.au-cite { transition: background-color .2s var(--au-ease), box-shadow .2s var(--au-ease), color .2s var(--au-ease); }
.au-cite:hover { background: var(--au-indigo-soft); box-shadow: 0 0 0 1px #CFCBFF, 0 6px 14px -8px rgba(79, 70, 229, .6); }

/* cartões e vinhetas: elevação e inclinação (só com ponteiro fino; o script marca .au-tilt) */
.au-motion .au-tilt { transform: perspective(1100px) rotateX(var(--au-rx, 0deg)) rotateY(var(--au-ry, 0deg)) translateY(var(--au-lift, 0px)); transition: transform .45s var(--au-ease), box-shadow .35s var(--au-ease); }
.au-motion .au-tilt.is-tilting { transition: transform .12s linear, box-shadow .35s var(--au-ease); }
.au-motion .au-ui.au-tilt:hover, .au-motion .au-chat.au-tilt:hover { box-shadow: 0 0 0 1px rgba(15, 14, 42, .07), 0 2px 4px rgba(15, 14, 42, .04), 0 50px 90px -40px rgba(49, 46, 129, .7); }

/* abas de casos de uso no celular: faixa rolável, sem barra, com esmaecimento na borda */
@media (max-width: 767.98px) {
    .au-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 28px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
    .au-tabs::-webkit-scrollbar { display: none; }
    .au-tabs > li { flex: none; scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ */
/* 6. Transições entre seções (o script entrega --au-b, --au-out, --au-d) */
/*    --au-b: 0 quando o topo da seção entra pela base da tela; 1 quando assenta */
/* ------------------------------------------------------------------ */
.au-motion main > section { position: relative; isolation: isolate; }
.au-motion main > section.au-section:not(.au-section--tint) { background-color: var(--au-surface); }
.au-motion main > section.au-section--tint { box-shadow: none; }

/* fundo que muda aos poucos: a seção chega com a cor da anterior e assume a própria */
.au-motion main > section.au-seamed::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: var(--au-prev-bg, #fff); opacity: calc(1 - var(--au-b, 1));
}

/* folhas empilhadas: a seção seguinte sobe por cima, a anterior recua */
.au-motion main > section.au-sheet {
    margin-top: -36px; border-radius: 36px 36px 0 0;
    box-shadow: 0 -1px 0 rgba(15, 14, 42, .06), 0 -36px 70px -44px rgba(49, 46, 129, .45);
    translate: 0 calc((1 - var(--au-b, 1)) * 64px * var(--au-k));
}
.au-motion main > section.au-recede { padding-bottom: calc(var(--as-section) + 36px); }
.au-motion main > section.au-hero.au-recede { padding-bottom: 84px; }
.au-motion main > section.au-recede > .container {
    scale: calc(1 - var(--au-out, 0) * .015); opacity: calc(1 - var(--au-out, 0) * .08); transform-origin: 50% 100%;
}
/* faixa de aurora muito tênue que atravessa a fronteira, mais lenta que o conteúdo */
.au-motion main > section.au-sheet::after {
    content: ""; position: absolute; left: 0; right: 0; top: -110px; height: 260px; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 60% at 20% 50%, rgba(99, 102, 241, .11), transparent 70%),
        radial-gradient(34% 60% at 80% 50%, rgba(34, 211, 238, .09), transparent 70%);
    translate: 0 calc((var(--au-b, 1) - .5) * 80px * var(--au-k));
}
.au-motion main > section.au-sheet--flip::after { transform: scaleX(-1); }
@media (max-width: 767.98px) {
    .au-motion main > section.au-sheet { margin-top: -24px; border-radius: 24px 24px 0 0; }
    .au-motion main > section.au-recede { padding-bottom: calc(var(--as-section) + 24px); }
    .au-motion main > section.au-hero.au-recede { padding-bottom: 72px; }
}
/* a chamada final chega como um painel que assenta */
.au-motion #cta-final .au-final {
    scale: calc(.955 + var(--au-b, 1) * .045); translate: 0 calc((1 - var(--au-b, 1)) * 44px * var(--au-k)); transform-origin: 50% 0;
}

/* costura: a linha pontilhada em degradê atravessa a fronteira e termina num ponto junto ao título */
.au-seam { position: absolute; left: 0; top: -72px; width: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.au-seam__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--au-ease); }
.au-seam__ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.au-seam.is-lit .au-seam__dot { transform: scale(1); }
.au-seam.is-lit .au-seam__ring { animation: au-seam-ring 1.1s var(--au-ease) 1; }
@keyframes au-seam-ring { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }

/* entrada do conteúdo em sequência curta: título (máscara) → parágrafo → bloco principal */
.au-motion main > section.au-seq:not(.is-in) .au-head > p,
.au-motion main > section.au-seq:not(.is-in) .au-head ~ *,
.au-motion main > section.au-seq:not(.is-in) > .container > .au-split > .au-vig,
.au-motion main > section.au-seq:not(.is-in) .au-faq > div:last-child,
.au-motion main > section.au-seq:not(.is-in) .au-final > :not(h2):not(.au-aurora):not(.au-dots) { opacity: 0; transform: translateY(18px); }
.au-motion main > section.au-seq.is-in .au-head > p { transition: opacity .6s var(--au-ease) .07s, transform .7s var(--au-ease) .07s; }
.au-motion main > section.au-seq.is-in .au-head ~ *,
.au-motion main > section.au-seq.is-in > .container > .au-split > .au-vig,
.au-motion main > section.au-seq.is-in .au-faq > div:last-child,
.au-motion main > section.au-seq.is-in .au-final > :not(h2):not(.au-aurora):not(.au-dots) { transition: opacity .65s var(--au-ease) .15s, transform .75s var(--au-ease) .15s; }
.au-motion main > section.au-seq.is-in .au-head ~ * ~ * { transition-delay: .23s; }

@media (prefers-reduced-motion: reduce) {
    .btn-primary::after { display: none; }
    .au-typing i, .au-caret { animation: none; }
}