/* motion.css — revelação por faixa, digitação do FAQ e brilho do logo.
   Tudo condicionado a html.motion-ready (adicionada por motion.js);
   sem JS ou com prefers-reduced-motion nada é escondido. Só opacity/transform. */

/* 1) revelar ao rolar */
html.motion-ready .mo-rv {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--mo-d, 0ms);
}
html.motion-ready .mo-rv.mo-in { opacity: 1; transform: none; }

/* 2) FAQ digitando: o texto completo fica no DOM (mesmo layout/quebra de linha);
   a parte ainda não digitada fica transparente. */
.mo-rest { color: transparent; -webkit-user-select: none; user-select: none; }
.mo-cur {
  display: inline-block; width: 0; height: 0; position: relative; vertical-align: baseline;
}
.mo-cur::after {
  content: ""; position: absolute; left: 1px; bottom: -.22em; width: 1.5px; height: 1.1em;
  background: currentColor; opacity: .55; animation: mo-blink 1s ease-in-out infinite;
}
@keyframes mo-blink { 0%, 100% { opacity: .55; } 50% { opacity: 0; } }

/* 3) brilho único no logo, restrito ao desenho (mask com o próprio PNG) */
.mo-logo-wrap { position: relative; display: block; line-height: 0; }
.mo-logo-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 196, .55) 42%, rgba(255, 252, 242, 1) 50%, rgba(255, 236, 196, .55) 58%, transparent 70%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url(../img/logo.png) center / 100% 100% no-repeat;
  mask: url(../img/logo.png) center / 100% 100% no-repeat;
}
.mo-logo-wrap.mo-shine::after { animation: mo-shine 3.2s cubic-bezier(.4, 0, .2, 1) 1 forwards; }
.mo-logo-wrap.mo-shine img { animation: mo-glow 3.2s ease-in-out 1; }
@keyframes mo-shine {
  0% { opacity: 1; background-position: 130% 0; }
  100% { opacity: 1; background-position: -30% 0; }
}
@keyframes mo-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 160, 90, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(212, 160, 90, .45)); }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .mo-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mo-cur { display: none !important; }
  .mo-rest { color: inherit !important; }
  .mo-logo-wrap::after { display: none !important; }
  .mo-logo-wrap.mo-shine img { animation: none !important; }
}