/* motion.css — movimento da Central de Ajuda · Univer Vídeo
 * Carregado depois de app.css. Só transform/opacity/filter animam; sem layout.
 * O JS (motion.js) marca <html class="mo"> — sem JS nada fica escondido.
 * Desligar tudo: remover este arquivo e motion.js do index.html. */

:root{
  --mo-ease:cubic-bezier(.2,.7,.2,1);
  --mo-reveal:560ms;
  --mo-step:60ms;
}

/* ---------- herói: malha de gradiente (canvas 2D em 1/3 da resolução) ---------- */
/* o herói é sempre escuro (texto branco + véu): a malha usa a mesma paleta nos dois temas.
 * 18/10: a paleta pastel do sistema claro deixava o topo cinza lavado no Chrome do Windows. */
:root{--mesh-1:#00172b;--mesh-2:#0063ab;--mesh-3:#4db5ff;--mesh-4:#6c3bd1}
/* reserva visível quando o canvas está vazio (sem JS, reduced-motion, GPU fraca) */
.hero__bg{background:
  radial-gradient(60% 70% at 72% 30%,rgba(77,181,255,.55) 0%,rgba(77,181,255,0) 70%),
  radial-gradient(55% 65% at 22% 78%,rgba(108,59,209,.55) 0%,rgba(108,59,209,0) 70%),
  radial-gradient(70% 60% at 48% 55%,rgba(0,99,171,.75) 0%,rgba(0,99,171,0) 70%),
  var(--mesh-1)}
.hero__mesh{
  position:absolute;inset:0;width:100%;height:100%;z-index:-3;display:block;pointer-events:none;
  image-rendering:auto;filter:blur(24px) saturate(1.15);transform:scale(1.12);transform-origin:50% 50%;
}

/* ---------- herói: parallax + ken burns ---------- */
.hero__art{
  /* posição/cobertura ficam no app.css; aqui só o movimento */
  translate:0 var(--mo-py,0px);
  transform-origin:50% 40%;
}
.hero.is-scrolling .hero__art{will-change:transform}
.hero__art.mo-kb{animation:mo-kb 2.4s cubic-bezier(0,0,.2,1) both}
@keyframes mo-kb{from{scale:1.06}to{scale:1}}

/* ---------- revelação ao entrar na viewport ---------- */
.mo [data-reveal]{
  transition:opacity var(--mo-reveal) var(--mo-ease),translate var(--mo-reveal) var(--mo-ease);
  transition-delay:calc(var(--mo-i,0) * var(--mo-step));
}
.mo [data-reveal]:not(.is-in){opacity:0;translate:0 18px}
.mo [data-reveal].is-in{opacity:1;translate:0 0}

/* ---------- busca: brilho que percorre o contorno uma vez ---------- */
@property --mo-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.search__box::before{
  content:'';position:absolute;inset:-2px;border-radius:20px;padding:2px;
  background:conic-gradient(from var(--mo-a),transparent 0 70%,rgba(0,139,239,.95) 86%,#fff 92%,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,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;pointer-events:none;z-index:1;
}
.search__box.is-glow::before{animation:mo-sweep 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes mo-sweep{0%{--mo-a:0deg;opacity:0}12%{opacity:1}80%{opacity:1}100%{--mo-a:360deg;opacity:0}}
/* sem @property (WebKit antigo) o ângulo não interpola: fica só um fade da borda */
.mo:not(.mo-conic) .search__box.is-glow::before{animation:mo-fade-io 1.2s ease-out both}
@keyframes mo-fade-io{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}

/* ---------- folhas e véu ---------- */
.sheet{animation:mo-sheet 280ms var(--mo-ease) both}
.veil{animation:mo-fade 200ms ease-out both}
@keyframes mo-sheet{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}

/* ---------- balões do chat (o shimmer do .msg__skel fica no app.css) ---------- */
.msg{animation:mo-msg 240ms var(--mo-ease) both}
@keyframes mo-msg{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ---------- cards: chevron e borda ---------- */
.quick__a .chev,.cat .chev,.ch .chev{transition:transform var(--dur,.18s) var(--mo-ease),stroke var(--dur,.18s) var(--mo-ease)}
@media (hover:hover){
  .quick__a:hover .chev,.cat:hover .chev,.ch:hover .chev{transform:translateX(3px);stroke:var(--bright)}
  .quick__a:hover,.cat:hover,.ch:hover{border-color:rgba(0,139,239,.45)}
}
@media (pointer:coarse){
  .quick__a:active,.cat:active,.ch:active{transform:scale(.985)}
}

/* ---------- tilt 3D (só mouse: hover fino) ---------- */
@media (hover:hover) and (pointer:fine){
  .mo [data-tilt]{position:relative;transform-style:preserve-3d;transition:transform 420ms var(--mo-ease),border-color var(--dur,.18s) var(--mo-ease),box-shadow var(--dur,.18s) var(--mo-ease)}
  .mo [data-tilt].is-tilt{transition-duration:80ms;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px)}
  .mo [data-tilt]::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 65%);
    opacity:0;transition:opacity 220ms var(--mo-ease);
  }
  .mo [data-tilt].is-tilt::after{opacity:1}
}

/* ---------- troca de rota ---------- */
#view{animation:mo-fade 220ms var(--mo-ease) both}
#view.is-switching{opacity:0;transition:none}
#view.is-switched{transition:opacity 220ms var(--mo-ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms;animation-timing-function:var(--mo-ease)}

/* ---------- status: um pulso ao aparecer ---------- */
.status__dot{position:relative}
.status__dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;animation:mo-ping 900ms ease-out both}
@keyframes mo-ping{from{transform:scale(1);opacity:.55}to{transform:scale(2.2);opacity:0}}

/* ---------- redução de movimento: tudo vira fade ≤150 ms ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__art{translate:none!important;animation:none!important}
  .mo [data-tilt],.mo [data-tilt].is-tilt{transform:none!important;transition:none!important}
  .mo [data-tilt]::after{display:none}
  .mo [data-reveal]{transition:opacity 120ms ease-out!important;transition-delay:0s!important;translate:none!important}
  .mo [data-reveal]:not(.is-in){translate:none}
  .search__box.is-glow::before{animation:mo-fade-io 150ms ease-out both!important}
  .sheet,.veil,.msg,#view{animation:mo-fade 120ms ease-out both!important}
  .status__dot::after{animation:none!important}
  .quick__a .chev,.cat .chev,.ch .chev{transition:none!important;transform:none!important}
  .quick__a:active,.cat:active,.ch:active{transform:none!important}
  #view.is-switched{transition-duration:120ms!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:120ms!important}
}