/* =========================================================================
   movimento.css — a CAMADA DE MOVIMENTO do site público.

   Isolado de propósito: base.css e sistema.css são meticulosos e medidos;
   isto entra POR CIMA, só adicionando vida, sem renomear nem re-medir nada.
   Carrega DEPOIS dos dois.

   Regra de ouro: conteúdo NUNCA fica escondido por causa de animação. Todo
   estado "inicial invisível" mora dentro de `@media (prefers-reduced-motion:
   no-preference)` — quem pede menos movimento vê tudo pintado, parado, na
   hora. E hover que MOVE fica atrás de `(hover:hover) and (pointer:fine)`,
   senão gruda no dedo depois do toque.

   NÃO animo o herói: ele já tem o canvas vivo e as luzes de palco. Uma
   entrada por cima brigaria com isso e atrasaria o CTA (auditado).

   Curvas: uma mola de saída (entra rápido, assenta devagar) e uma curva
   curta e viva pra toque.
   ========================================================================= */
:root{
  /* `--mola` e `--vivo` moram no sistema.css, que o site E o app carregam.
     Redefinir aqui criava duas verdades pra mesma curva. */
  --reveal-y:16px;
  --reveal-t:.6s;
}

/* -------------------------------------------------------------- REVELAR
   Elemento com [data-reveal] sobe e aparece quando entra na tela. O
   IntersectionObserver do movimento.js põe .vis. Stagger por --i (índice). */
@media (prefers-reduced-motion:no-preference){
  html.movimento [data-reveal]{
    opacity:0;
    transform:translate3d(0,var(--reveal-y),0);
    transition:opacity var(--reveal-t) var(--mola),
               transform var(--reveal-t) var(--mola);
    transition-delay:calc(var(--i,0) * 70ms);
    will-change:opacity,transform;
  }
  html.movimento [data-reveal].vis{opacity:1;transform:none}
  html.movimento [data-reveal="escala"]{transform:translate3d(0,var(--reveal-y),0) scale(.965)}
  html.movimento [data-reveal="escala"].vis{transform:none}
}

/* ---------------------------------------------------------- MICRO-TOQUE
   Botões e cartões ganham resposta física. Mantém o :active de base.css.
   O que MOVE fica atrás de (hover:hover) pra não colar no toque. */
.bt{transition:background .16s ease,transform .2s var(--vivo),box-shadow .2s ease}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bt:hover{transform:translateY(-1.5px)}
  /* brilho que varre o botão primário no hover — só o cheio, não o .sec */
  .bt:not(.sec){position:relative;overflow:hidden;isolation:isolate}
  .bt:not(.sec)::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,transparent 30%,#ffffff40 48%,transparent 66%);
    transform:translateX(-120%);
  }
  .bt:not(.sec):hover::after{transition:transform .7s var(--mola);transform:translateX(120%)}
  /* cartões sobem um fio no hover — alvo largo, gesto sutil.
     Prefixo html.movimento de propósito: sem ele, o `transform:none` da
     revelação (.vis, mais específico) PINAVA o transform e o hover morria
     depois que o cartão aparecia. Com o prefixo, o hover empata em
     especificidade e vence por vir depois. */
  .plano,.fato,.step{transition:transform .28s var(--mola),box-shadow .28s ease,border-color .28s ease}
  html.movimento .plano:hover,
  html.movimento .fato:hover,
  html.movimento .step:hover{transform:translateY(-4px)}
  /* o card Pro tem PRESENÇA no desktop, não só no hover: "recomendado" tem que
     ser MOSTRADO, não só escrito. Sobe um degrau e ganha sombra mais firme. */
  html.movimento .plano.pro{transform:scale(1.02);box-shadow:var(--sombra,0 24px 60px #00000066)}
  html.movimento .plano.pro:hover{transform:scale(1.02) translateY(-6px)}
}
/* o :active vale em qualquer aparelho (é o toque acontecendo) */
.bt:active{transform:translateY(1px) scale(.99)}

/* -------------------------------------------------------- BARRAS QUE ENCHEM
   As barras de "A nota não é decorativa" (57/29/15%) enchem do zero quando a
   seção aparece. O JS guarda o alvo em --alvo. */
@media (prefers-reduced-motion:no-preference){
  html.movimento .barra .l b{width:0!important;transition:width .85s var(--mola)}
  html.movimento .barra.vis .l b{width:var(--alvo)!important}
}

/* ------------------------------------------------ ESCADA 0–10 QUE CRESCE
   A escada "de Uma zuera a Lenda" sobe da base, degrau por degrau, quando
   aparece. Anima transform (compositor), não height. O JS põe .vis e o --i. */
@media (prefers-reduced-motion:no-preference){
  html.movimento .escada span{transform-origin:bottom;transform:scaleY(0);
    transition:transform .5s var(--mola);transition-delay:calc(var(--i,0) * 45ms)}
  html.movimento .escada.vis span{transform:scaleY(1)}
}

/* -------------------------------------------------- ACENDER "AO VIVO" NO CARD
   base.css não anima o pontinho; aqui ele pulsa devagar — sinal de vivo. */
@media (prefers-reduced-motion:no-preference){
  .player .topo s{animation:pulsar 2s ease-in-out infinite}
  @keyframes pulsar{0%,100%{opacity:1}50%{opacity:.5}}
}

/* ------------------------------------------------------------- FAQ SUAVE
   O <details> abre com o conteúdo deslizando, não pulando. */
@media (prefers-reduced-motion:no-preference){
  .faq-item[open] > *:not(summary){animation:abredetalhe .3s var(--mola)}
  @keyframes abredetalhe{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}