/* Camada de movimento compartilhada pelas versões v1, v2 e v3 da landing.
   Conteúdo fica visível por padrão: só esconde quando fx.js marca <html class="js">. */
:root{--ease:cubic-bezier(.16,1,.3,1);--display:'General Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3{font-family:var(--display)}
::selection{background:var(--accent);color:var(--ink-on-fill)}
html{scrollbar-color:var(--primary-300) var(--surface)}
body{overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num,.big,.price,time,.slot,.t{font-variant-numeric:tabular-nums}

/* Entradas por rolagem */
.js [data-r]{opacity:0;transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms),clip-path 1s var(--ease) var(--d,0ms)}
.js [data-r=up]{transform:translateY(28px)}
.js [data-r=blur]{filter:blur(10px);transform:translateY(14px)}
.js [data-r=scale]{transform:scale(.94) translateY(12px)}
.js [data-r=left]{transform:translateX(-36px)}
.js [data-r=right]{transform:translateX(36px)}
.js [data-r=clip]{opacity:1;clip-path:inset(0 0 99% 0);transform:translateY(18px)}
.js [data-r].in{opacity:1;transform:none;filter:none}
.js [data-r=clip].in{clip-path:inset(-4px -4px -12px -4px)}

/* Título palavra por palavra, saindo de uma máscara */
.js .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em}
.js .split .wi{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease) calc(var(--d0,0ms) + var(--i) * 55ms)}
.js .split.in .wi{transform:none}

/* Demonstração: conversa + agenda */
.panel{display:flex;flex-direction:column}
.chat{position:relative;flex:1;min-height:360px;padding:0;display:block;overflow:hidden}
.chat .day{position:absolute;z-index:1;top:8px;left:50%;transform:translateX(-50%);padding:2px 12px;border-radius:99px;background:#EFF3F7;margin:0}
.chat-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;padding:40px 16px 8px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--primary-300) transparent;-webkit-mask-image:linear-gradient(180deg,transparent 28px,#000 52px);mask-image:linear-gradient(180deg,transparent 28px,#000 52px)}
.chat-in>.mw:first-child{margin-top:auto}
.mw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);flex:none}
.mw.on{grid-template-rows:1fr}
.mwi{min-height:0;overflow:hidden;padding-bottom:8px;display:flex}
.mw:not(.on) .mwi{padding-bottom:0}
.mw.me .mwi{justify-content:flex-end}
.bub{max-width:84%;padding:9px 12px;border-radius:12px;font-size:15px;line-height:1.4;background:#fff;border:1px solid var(--line);color:var(--ink);
  opacity:0;transform:translateY(14px) scale(.94);transform-origin:left bottom;transition:opacity .35s ease-out,transform .6s var(--ease)}
.mw.me .bub{background:var(--primary-100);border-color:var(--primary-300);transform-origin:right bottom}
.mw.on .bub{opacity:1;transform:none}
.bub .who{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);margin-bottom:2px}
.bub time{display:block;font-size:12px;color:var(--ink-muted);text-align:right;margin-top:2px}
.dots3{display:inline-flex;gap:4px;padding:5px 2px}
.dots3 i{width:7px;height:7px;border-radius:99px;background:var(--ink-muted);animation:dot3 1.1s ease-in-out infinite}
.dots3 i:nth-child(2){animation-delay:.15s}.dots3 i:nth-child(3){animation-delay:.3s}
@keyframes dot3{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

.slot{position:relative}
.slot.ok{animation:slotok .7s var(--ease)}
.slot.ok svg{margin-right:6px;flex:none}
.slot.ok svg path{stroke-dasharray:18;stroke-dashoffset:18;animation:draw .5s .15s ease-out forwards}
.slot.pend{animation:pend 1s ease-in-out infinite}
.slot.hint{border-style:solid;border-color:var(--accent);color:var(--ink);animation:hint 1.4s ease-in-out infinite;outline:2px solid transparent;outline-offset:2px}
@keyframes slotok{0%{transform:scale(.9)}55%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes pend{50%{background:#FBE7B0}}
@keyframes hint{50%{outline-color:rgba(245,179,1,.6)}}
@keyframes draw{to{stroke-dashoffset:0}}
.status.swap{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(5px)}}

/* Botão com anel que respira (só a chamada final e o do cabeçalho) */
.ping{position:relative}
.ping::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid currentColor;opacity:0;animation:ping 3.2s ease-out infinite;pointer-events:none}
@keyframes ping{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.18,1.5)}}
.btn{transition:background .15s ease-out,border-color .15s ease-out,transform .25s var(--ease)}
.btn:active{transform:scale(.97)}

/* FAQ: abre e fecha suave onde o navegador suporta */
details{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
summary::after{transition:transform .35s var(--ease)}
details[open] summary::after{content:'+';transform:rotate(45deg)}
summary:hover{color:var(--primary-700)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-r]{transform:none!important;filter:none!important;clip-path:none!important;opacity:0;transition:opacity .4s linear var(--d,0ms)!important}
  .js [data-r].in{opacity:1}
  .js .split .wi{transform:none!important;transition:none!important}
  .mw,.bub,.slot,.btn{transition:none!important}
  .dots3 i,.ping::after,.slot.hint,.slot.pend{animation:none!important}
  .slot.ok{animation:none!important}
  .slot.ok svg path{animation:none!important;stroke-dashoffset:0}
  details::details-content{transition:none}
}