/* ============================================================
   JB Home Ainor — motion (11/10/2026)
   Vale para todo o site: home, postagens e as páginas do tema
   filho hello-ainor, que usam o mesmo shell.

   Regras que seguram o resto:
   - Quem esconde é o JS: .has-motion e .mo-pre entram no <html> pelo
     script do <head>. Sem JS, nada some. .mo-pre tem prazo de 2,5 s
     (o próprio script tira), então GSAP fora do ar não deixa o hero vazio.
   - Só transform/opacity/clip-path.
   - prefers-reduced-motion: reduce = página inteira e parada.
   ============================================================ */
:root{
  --mo-1:120ms; --mo-2:240ms; --mo-3:480ms; --mo-4:800ms;
  --mo-out:cubic-bezier(.16,1,.3,1);
  --mo-in:cubic-bezier(.7,0,.84,0);
  --mo-inout:cubic-bezier(.65,0,.35,1);
}

/* ---------- reveal da casa: só esconde com .has-motion ---------- */
.has-motion [data-reveal]:not(.in){opacity:0;transform:translateY(28px)}
/* no hero quem anima é o GSAP, peça por peça; a transition do reveal atrasaria o scrub */
.has-motion .hero [data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- abertura do hero, antes do GSAP assumir ---------- */
.mo-pre .hero-badge,.mo-pre .hero h1,.mo-pre .hero-sub,.mo-pre .hero-tagline,
.mo-pre .hero-cta .btn,.mo-pre .he-label,.mo-pre .he-card,.mo-pre .portrait-tag,
.mo-pre .float-leaf,.mo-pre .pl-hero-copy > *,.mo-pre .page-head > *,
.mo-pre .jfb-noticia-subtitulo{opacity:0}

/* ---------- barra de progresso de leitura ---------- */
.mo-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;pointer-events:none;
  background:linear-gradient(90deg,var(--green-500,#10b981),var(--gold,#d4af37));
  transform:scaleX(0);transform-origin:0 50%}

/* ---------- logo: folha que respira e reage ---------- */
.brand-mark{transition:transform var(--mo-3) var(--mo-out)}
.brand-mark i{display:inline-block;transform-origin:50% 90%}
@media (hover:hover){
  .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
  .brand:hover .brand-mark i{animation:mo-folha 900ms var(--mo-out)}
}
@keyframes mo-folha{0%{transform:rotate(0)}30%{transform:rotate(-18deg)}60%{transform:rotate(10deg)}100%{transform:rotate(0)}}

/* ---------- botões: brilho que atravessa ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg) translateX(0);opacity:0}
@media (hover:hover){
  .btn:hover::after{opacity:1;transform:skewX(-20deg) translateX(420%);
    transition:transform 750ms var(--mo-out),opacity 200ms}
}
.btn:active{transform:translateY(0) scale(.97);transition-duration:var(--mo-1)}

/* ---------- cabeçalho some ao descer (o .nav já tem transition) ---------- */
.nav.mo-oculto{transform:translateY(-100%)}

/* ---------- menu ---------- */
.menu a{transition:color var(--mo-2),background var(--mo-2)}

/* ---------- drawer: links entram em sequência ---------- */
.drawer .d-link,.drawer .btn{opacity:0;transform:translateX(24px)}
.drawer.open .d-link,.drawer.open .btn{opacity:1;transform:none;
  transition:opacity var(--mo-3) var(--mo-out),transform var(--mo-3) var(--mo-out);
  transition-delay:calc(120ms + var(--i,0) * 45ms)}

/* ---------- busca: o painel cai e o campo acende ---------- */
.nav-search.open input{animation:mo-acende 600ms var(--mo-out)}
@keyframes mo-acende{from{box-shadow:0 0 0 0 rgba(212,175,55,.55)}to{box-shadow:0 0 0 10px rgba(212,175,55,0)}}

/* ---------- voltar ao topo: anel de progresso ---------- */
.totop{overflow:visible}
.totop .mo-anel{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.totop .mo-anel circle{fill:none;stroke:var(--gold,#d4af37);stroke-width:2.5;stroke-linecap:round}

/* ---------- cartões: luz que segue o mouse ---------- */
@media (hover:hover){
  .he-card,.posts-cta,.sol-card,.cl-card,.talk-item,.pl-card,.jfb-noticia-card{--mx:50%;--my:50%}
  .posts-cta,.pl-card{position:relative}
  .posts-cta::before,.pl-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(420px circle at var(--mx) var(--my),rgba(212,175,55,.16),transparent 60%);
    transition:opacity var(--mo-3)}
  .posts-cta:hover::before,.pl-card:hover::after{opacity:1}
}

/* ---------- linha da lista de postagens ---------- */
.talk-item{position:relative}
.talk-item::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--gold,#d4af37),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mo-3) var(--mo-out)}
@media (hover:hover){.talk-item:hover::before{transform:scaleX(1)}}

/* ---------- livros: prateleira com profundidade ---------- */
.books-shelf{perspective:900px}

/* ---------- imagens de conteúdo: cortina ao entrar ---------- */
.has-motion .mo-img{clip-path:inset(0 0 100% 0)}
.has-motion .mo-img.in{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--mo-inout)}

/* ---------- transição entre páginas (Chrome/Edge/Safari 18.2+) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:mo-vt-sai 260ms var(--mo-in) both}
  ::view-transition-new(root){animation:mo-vt-entra 420ms var(--mo-out) both}
}
@keyframes mo-vt-sai{to{opacity:0;transform:translateY(-12px)}}
@keyframes mo-vt-entra{from{opacity:0;transform:translateY(18px)}}

/* ---------- movimento reduzido: tudo inteiro e parado ---------- */
@media (prefers-reduced-motion:reduce){
  .has-motion [data-reveal],.has-motion .mo-img{opacity:1!important;transform:none!important;clip-path:none!important}
  .drawer .d-link,.drawer .btn{opacity:1;transform:none;transition:none}
  .mo-progress,.totop .mo-anel{display:none}
  .nav.mo-oculto{transform:none}
  .btn::after{display:none}
  .brand:hover .brand-mark,.brand:hover .brand-mark i{transform:none;animation:none}
  .talk-item::before{transition:none}
  .nav-search.open input{animation:none}
}
@media print{.mo-progress{display:none}}