/* =========================================================================
   DILINO STUDIO — MOVIMENTO (home, 51 produtos, 5 institucionais)
   Par com assets/motion.js. Regras:
   - Nada nasce escondido sem JS: o estado oculto só existe em [data-mo], que o
     motion.js põe APENAS em elementos abaixo da dobra (sem piscar).
   - Chegada na página (acima da dobra) = @keyframes puro, só no PC.
   - Celular: fade curto e só. PC (≥1025 + mouse): máscara, cascata, parallax.
   - Revelado, o motion.js tira o [data-mo] e o elemento volta ao estilo original.
   - prefers-reduced-motion: nada disto roda.
   ========================================================================= */

/* ---------- revelar ao rolar (estado controlado pelo motion.js) ---------- */
/* PC: o .reveal antigo da home (fade da seção inteira) dá lugar ao movimento por elemento */
.mo-pc .reveal{ opacity:1; transform:none; transition:none; }

[data-mo]{
  opacity:0; transform:translate3d(0, 16px, 0);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.24,1);
}
[data-mo].is-in{ opacity:1; transform:none; }

/* PC: curso maior, curva longa (expo-out) */
.mo-pc [data-mo]{
  transform:translate3d(0, 34px, 0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.mo-pc [data-mo].is-in{ transform:none; }

/* card: sobe e "assenta" (escala quase imperceptível) */
.mo-pc [data-mo="card"]{ transform:translate3d(0, 42px, 0) scale(.985); }

/* título: sobe de dentro de uma máscara; a linha de baixo se desenha */
.mo-pc [data-mo="title"]{
  transform:translate3d(0, .55em, 0); clip-path:inset(100% 0 0 0);
  transition:opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1), clip-path 1s cubic-bezier(.16,1,.3,1);
}
.mo-pc [data-mo="title"].is-in{ clip-path:inset(0 0 0 0); }
.mo-pc [data-mo="title"]::after{ transform:scaleX(0); transition:transform 1s cubic-bezier(.16,1,.3,1) .35s; }
.mo-pc [data-mo="title"].is-in::after{ transform:scaleX(1); }

/* imagem: a janela abre (recorte que expande), sem deslocar */
.mo-pc [data-mo="img"]{
  opacity:1; transform:none;
  clip-path:inset(7% 7% 7% 7% round 28px);
  transition:clip-path 1.3s cubic-bezier(.16,1,.3,1);
}
.mo-pc [data-mo="img"].is-in{ clip-path:inset(0 0 0 0 round 28px); }

/* ---------- parallax (PC): só o deslocamento; o hover do site segue no transform ---------- */
.mo-pc [data-mo-px]{ scale:1.06; translate:0 var(--mo-py, 0px); will-change:translate; }

/* ---------- barra de progresso de leitura (PC) ---------- */
.mo-prog{
  position:fixed; left:0; top:0; z-index:70; width:100%; height:2px;
  background:var(--brass, #B8874A); transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- cabeçalho da home: sombra ao rolar (celular e PC) ---------- */
.hd{ transition:box-shadow .35s ease, background .35s ease; }
.hd.mo-scrolled{ box-shadow:0 10px 28px -18px rgba(28,25,23,.45); }

/* ---------- chegada na página: só PC, só acima da dobra, CSS puro ---------- */
@keyframes moRise{ from{ opacity:0; transform:translate3d(0, 22px, 0); } to{ opacity:1; transform:none; } }
@keyframes moFade{ from{ opacity:0; } to{ opacity:1; } }
@media (min-width:1025px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* produto: coluna de identidade entra em escada */
  .back-desk{ animation:moFade .8s ease both; }
  .col-a > *{ animation:moRise 1s cubic-bezier(.16,1,.3,1) both; }
  .col-a > :nth-child(1){ animation-delay:.05s; }
  .col-a > :nth-child(2){ animation-delay:.13s; }
  .col-a > :nth-child(3){ animation-delay:.21s; }
  .col-a > :nth-child(4){ animation-delay:.29s; }
  .col-a > :nth-child(5){ animation-delay:.37s; }
  .col-b > .sec:first-child{ animation:moRise 1s cubic-bezier(.16,1,.3,1) .45s both; }
  /* home: faixa de confiança logo abaixo do banner */
  .trust-i{ animation:moRise .9s cubic-bezier(.16,1,.3,1) both; }
  .trust-i:nth-child(1){ animation-delay:.25s; }
  .trust-i:nth-child(2){ animation-delay:.33s; }
  .trust-i:nth-child(3){ animation-delay:.41s; }
  .trust-i:nth-child(4){ animation-delay:.49s; }
  /* institucionais: topo da página */
  .doc-kicker{ animation:moFade .9s ease .05s both; }
  .doc-title{ animation:moRise 1.1s cubic-bezier(.16,1,.3,1) .12s both; }
  .doc-lead{ animation:moRise 1.1s cubic-bezier(.16,1,.3,1) .24s both; }

  /* rodapé (home e produto): sublinhado que corre da esquerda */
  .foot-links a{
    background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition:color .25s ease, background-size .45s cubic-bezier(.16,1,.3,1);
  }
  .foot-links a:hover{ background-size:100% 1px; }
}

@media (prefers-reduced-motion:reduce){
  [data-mo]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  [data-mo-px]{ scale:none; translate:none; }
  .mo-prog{ display:none; }
}