/* Micro-interações do site: resposta ao passar o mouse, ao focar pelo teclado e ao clicar.
   Regras: hover e foco têm o mesmo efeito; movimento curto (até 8px, até 6°); quem pede menos movimento vê só mudanças de cor. */
:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s;
  --t-med:.32s;
}

/* ---------- Botões principais (cápsula com seta) ---------- */
.cta,.capsule{position:relative;overflow:hidden;isolation:isolate;transition:transform var(--t-med) var(--ease-spring),box-shadow var(--t-med) var(--ease-out),background-color var(--t-fast)}
.cta>span,.capsule>span{transition:transform var(--t-med) var(--ease-spring),background-color var(--t-fast)}
.cta>span .ic,.capsule>span .ic{transition:transform var(--t-med) var(--ease-spring)}
.cta:hover,.cta:focus-visible,.capsule:hover,.capsule:focus-visible{transform:translateY(-3px);box-shadow:0 14px 28px -10px #43305d55}
.cta:hover>span,.cta:focus-visible>span,.capsule:hover>span,.capsule:focus-visible>span{transform:scale(1.08)}
.cta:hover>span .ic,.cta:focus-visible>span .ic,.capsule:hover>span .ic,.capsule:focus-visible>span .ic{transform:translateX(3px)}
.cta:active,.capsule:active{transform:translateY(-1px) scale(.98);transition-duration:.08s}
/* brilho que atravessa o botão uma vez ao entrar com o mouse */
.cta::after,.capsule::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffffff66 48%,transparent 66%);transform:translateX(-120%)}
.cta:hover::after,.capsule:hover::after{transition:transform .7s var(--ease-out);transform:translateX(120%)}

/* ---------- Links de texto com seta ---------- */
.text-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size var(--t-med) var(--ease-out)}
.text-link:hover,.text-link:focus-visible{text-decoration:none;background-size:calc(100% - 30px) 2px}
.text-link .ic{transition:transform var(--t-med) var(--ease-spring)}
.text-link:hover .ic,.text-link:focus-visible .ic{transform:translateX(4px)}

/* ---------- Menu e rodapé: sublinhado que cresce ---------- */
.nav-links>a:not(.nav-enter),.lp-footer nav a,.legal-top nav a,.legal-foot a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size var(--t-med) var(--ease-out)}
.nav-links>a:not(.nav-enter):hover,.nav-links>a:not(.nav-enter):focus-visible,.lp-footer nav a:hover,.lp-footer nav a:focus-visible,.legal-top nav a:hover,.legal-foot a:hover{text-decoration:none;background-size:100% 2px}
.nav-enter{transition:background-color var(--t-fast),transform var(--t-med) var(--ease-spring)}
.nav-enter .ic{transition:transform var(--t-med) var(--ease-spring)}
.nav-enter:hover{transform:translateY(-2px)}
.nav-enter:hover .ic{transform:translateX(3px)}

/* ---------- Cards de jogos: inclinação com o mouse (interactions.js) e brilho ---------- */
.game-card{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .45s var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
.game-card:hover,.game-card:focus-visible{transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 22px 40px -18px #51407155;border-color:#d6cdea}
.game-card.is-tilting{transition:transform .08s linear,box-shadow var(--t-med) var(--ease-out)}
.game-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-med);background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),#ffffff59,transparent 45%)}
.game-card:hover::after{opacity:1}
.game-card .game-label{transition:letter-spacing var(--t-med) var(--ease-out)}
.game-card:hover .game-label,.game-card:focus-visible .game-label{letter-spacing:.14em}
.game-info>span .ic{transition:transform var(--t-med) var(--ease-spring)}
.game-card:hover .game-info>span .ic,.game-card:focus-visible .game-info>span .ic{transform:translateX(5px)}
.game-card:hover .game-info>span,.game-card:focus-visible .game-info>span{color:#db502d}
/* cada ilustração faz o gesto do próprio jogo */
.escape-doors img{transition:translate .5s var(--ease-spring),rotate .5s var(--ease-spring),scale .5s var(--ease-spring)}
.game-card:hover .escape-doors img:nth-child(2),.game-card:focus-visible .escape-doors img:nth-child(2){scale:1.05}
.game-card:hover .escape-doors img:last-child,.game-card:focus-visible .escape-doors img:last-child{rotate:-35deg;translate:-14px 6px}
.sort-token{transition:translate .55s var(--ease-spring),rotate .55s var(--ease-spring),box-shadow var(--t-med)}
.sort-zone:first-child{transition:background-color var(--t-med),border-color var(--t-med)}
.game-card:hover .sort-token,.game-card:focus-visible .sort-token{translate:-4px -12px;rotate:7deg;box-shadow:0 12px 18px #8e503040}
.game-card:hover .sort-zone:first-child,.game-card:focus-visible .sort-zone:first-child{background:#fff0d9;border-style:solid}
.decision-demo .choice,.dialog-bubble{transition:translate var(--t-med) var(--ease-spring),background-color var(--t-med),box-shadow var(--t-med)}
.game-card:hover .dialog-bubble,.game-card:focus-visible .dialog-bubble{translate:0 -3px;box-shadow:0 8px 14px -8px #31513e55}
.game-card:hover .choice.first,.game-card:focus-visible .choice.first{translate:6px 0;background:#fff;box-shadow:0 6px 12px -6px #31513e66}
.game-card:hover .choice:not(.first),.game-card:focus-visible .choice:not(.first){opacity:.7}

/* ---------- Planos ---------- */
.price-card{transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
.price-card:hover,.price-card:focus-within{transform:translateY(-5px);box-shadow:0 22px 40px -22px #51407166;border-color:#cfc3df}
.price-card .price{transition:color var(--t-fast)}
.price-card:not(.company-card):hover .price{color:#5b47b8}
.plan-button{transition:background-color var(--t-fast),transform var(--t-med) var(--ease-spring),box-shadow var(--t-med)}
.plan-button .ic{transition:transform var(--t-med) var(--ease-spring)}
.plan-button:hover .ic,.plan-button:focus-visible .ic{transform:translateX(4px)}
.plan-button:active{transform:scale(.98);transition-duration:.08s}
.plan-try{transition:color var(--t-fast)}
.plan-try:hover{color:#db502d}

/* ---------- Como funciona e entregas ---------- */
.step-no{transition:transform .45s var(--ease-spring),box-shadow var(--t-med)}
.steps article:hover .step-no{transform:rotate(-8deg) scale(1.1);box-shadow:0 8px 16px -8px #43305d66}
.delivery-options article>.ic{transition:transform .45s var(--ease-spring)}
.delivery-options article:hover>.ic{transform:translateY(-4px) scale(1.12)}
.hero-proof>span .ic{transition:transform .45s var(--ease-spring)}
.hero-proof>span:hover .ic{transform:rotate(-10deg) scale(1.15)}

/* ---------- Dúvidas: o "+" vira "×" ao abrir ---------- */
.faq-list summary{transition:color var(--t-fast)}
.faq-list summary:hover{color:#5b47b8}
.faq-list summary:after{transition:transform var(--t-med) var(--ease-spring)}
.faq-list details[open] summary:after{transform:rotate(45deg)}
.faq-list details[open] p{animation:faq-open var(--t-med) var(--ease-out)}
@keyframes faq-open{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* ---------- Formulários ---------- */
.contact-panel input,.contact-panel select,.contact-panel textarea,.access-panel input{transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.contact-panel input:hover,.contact-panel select:hover,.contact-panel textarea:hover,.access-panel input:hover{border-color:#b9acd4}
.contact-panel input:focus,.contact-panel select:focus,.contact-panel textarea:focus,.access-panel input:focus{border-color:#5b47b8;box-shadow:0 0 0 4px #5b47b81f}
.contact-status:not([hidden]){animation:faq-open var(--t-med) var(--ease-out)}

/* ---------- Menos movimento: mantém só as mudanças de cor ---------- */
@media (prefers-reduced-motion:reduce){
  .cta,.capsule,.cta>span,.capsule>span,.game-card,.price-card,.plan-button,.nav-enter,.step-no{transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)!important}
  .cta:hover,.cta:focus-visible,.capsule:hover,.capsule:focus-visible,.cta:active,.capsule:active,.game-card:hover,.game-card:focus-visible,.price-card:hover,.price-card:focus-within,.plan-button:active,.nav-enter:hover{transform:none}
  .cta::after,.capsule::after,.game-card::after{display:none}
  .cta:hover>span,.cta:hover>span .ic,.capsule:hover>span,.capsule:hover>span .ic,.text-link:hover .ic,.nav-enter:hover .ic,.plan-button:hover .ic,.game-card:hover .game-info>span .ic,.steps article:hover .step-no,.delivery-options article:hover>.ic,.hero-proof>span:hover .ic{transform:none}
  .game-card:hover .escape-doors img,.game-card:hover .sort-token,.game-card:hover .dialog-bubble,.game-card:hover .choice{translate:none;rotate:none;scale:none}
  .faq-list summary:after{transition:none}
  .faq-list details[open] p,.contact-status:not([hidden]){animation:none}
}