/* Movimento do Luzz
   Uma ideia só: a luz do vagalume. O Luzin pulsa como um vagalume de verdade, vagalumes
   pequenos vagam nos painéis escuros e o devocional "chega" na conversa. O resto do site
   só se move quando a pessoa toca em algo (botão, pergunta, tema).

   `html.motion` é posto por um script inline no <head> quando o aparelho não pede
   "reduzir movimento". Tudo que é ambiente ou coreografia fica atrás dessa classe;
   sem ela, o estado final aparece direto. Tokens: duration-* e easing-standard. */

/* 0 · Base ------------------------------------------------------------------ */
html { interpolate-size: allow-keywords; }
.motion { scroll-behavior: smooth; }

/* 1 · A luz do Luzin --------------------------------------------------------- */
.hero-luzin, .footer-luzin-wrap { position: relative; }
.footer-luzin-wrap { display: inline-block; }
@media (max-width: 1023px) { .hero-luzin { display: inline-block; } } /* no desktop o site.css esconde o Luzin do hero; o da amostra assume */
.hero-luzin, .amostra-luzin, .app-luzin, .footer-luzin-wrap { isolation: isolate; --luz-forca: .55; }
.hero-luzin img, .amostra-luzin img, .app-luzin img, .footer-luzin { position: relative; z-index: 1; }
.amostra-luzin-d, .app-luzin { --luz-forca: 1; }
[data-theme="noite"] .hero-luzin, [data-theme="noite"] .footer-luzin-wrap, [data-theme="noite"] .amostra-luzin-m { --luz-forca: .9; }

.hero-luzin::before, .amostra-luzin::before, .app-luzin::before, .footer-luzin-wrap::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 64%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 138, .95) 0%, rgba(242, 163, 58, .55) 32%, rgba(242, 163, 58, 0) 68%);
  filter: blur(12px);
  opacity: calc(.6 * var(--luz-forca));
  transform: translate(-50%, -50%) scale(1);
}
.amostra-luzin-d::before, .app-luzin::before { mix-blend-mode: screen; }
.footer-luzin-wrap::before { top: 58%; width: 60%; }
.app-luzin::before { top: 60%; }

.motion .hero-luzin::before, .motion .amostra-luzin::before, .motion .app-luzin::before, .motion .footer-luzin-wrap::before {
  animation: pulsar 3.8s var(--easing-standard) infinite;
}
/* Na primeira pintura a luz "acende": apaga → clarão → ritmo normal. */
.motion .hero-luzin::before { animation: acender-primeiro 1.4s var(--easing-standard) .35s both, pulsar 3.8s var(--easing-standard) 1.75s infinite; }
/* Clarão quando o devocional chega na conversa (classe posta pelo motion.js). */
.motion .amostra-luzin.acende::before { animation: acender .9s var(--easing-standard) 1; }

/* Ritmo de vagalume: clareia rápido, apaga devagar. */
@keyframes pulsar {
  0%   { opacity: calc(.45 * var(--luz-forca)); transform: translate(-50%, -50%) scale(.92); }
  28%  { opacity: calc(.95 * var(--luz-forca)); transform: translate(-50%, -50%) scale(1.07); }
  58%  { opacity: calc(.6 * var(--luz-forca));  transform: translate(-50%, -50%) scale(.99); }
  100% { opacity: calc(.45 * var(--luz-forca)); transform: translate(-50%, -50%) scale(.92); }
}
@keyframes acender-primeiro {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  45%  { opacity: calc(1 * var(--luz-forca)); transform: translate(-50%, -50%) scale(1.22); }
  100% { opacity: calc(.45 * var(--luz-forca)); transform: translate(-50%, -50%) scale(.92); }
}
@keyframes acender {
  0%   { opacity: calc(.5 * var(--luz-forca)); transform: translate(-50%, -50%) scale(.95); }
  35%  { opacity: calc(1 * var(--luz-forca)); transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: calc(.5 * var(--luz-forca)); transform: translate(-50%, -50%) scale(.95); }
}

/* 2 · Vagalumes nos painéis escuros (criados pelo motion.js) --------------- */
.hero { position: relative; }
.vagalumes { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.hero > .vagalumes { z-index: -1; }
[data-theme="dia"] .hero > .vagalumes { display: none; }
.vaga {
  position: absolute; left: var(--x); top: var(--y); width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: #ffd98a; opacity: 0;
  box-shadow: 0 0 6px 2px rgba(255, 217, 138, .75), 0 0 16px 6px rgba(242, 163, 58, .3);
  animation: vagar var(--d, 12s) ease-in-out var(--delay, 0s) infinite alternate, piscar var(--p, 5s) ease-in-out var(--delay2, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes vagar { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 40px), var(--dy, -30px)); } }
@keyframes piscar { 0%, 100% { opacity: 0; } 12% { opacity: .95; } 24% { opacity: .2; } 38% { opacity: .75; } 62% { opacity: 0; } }
@media (max-width: 1023px) { .amostra-panel > .vagalumes { display: none; } }

/* 3 · Entrada do hero (uma vez, no carregamento) ----------------------------- */
.motion .hero-copy > * { animation: entrar .56s var(--easing-standard) both; }
.motion .hero-copy > :nth-child(1) { animation-delay: 0s; }
.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
.motion .hero-copy > :nth-child(3) { animation-delay: .16s; }
.motion .hero-copy > :nth-child(4) { animation-delay: .24s; }
.motion .hero-copy > :nth-child(5) { animation-delay: .32s; }
.motion .amostra-intro, .motion .amostra-after { animation: entrar .56s var(--easing-standard) .3s both; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 4 · O devocional chegando na conversa -------------------------------------- */
.lz-chat { position: relative; }
.motion .lz-chat-head, .motion .lz-chat-bubble, .motion .lz-chat-reply { opacity: 0; transition: opacity var(--duration-slow) var(--easing-standard), transform var(--duration-slow) var(--easing-standard); }
.motion .lz-chat-bubble { transform: translateY(10px); }
.motion .lz-chat-reply { transform: translateX(14px); }
.motion .lz-chat-bubble > * { opacity: 0; transform: translateY(5px); transition: opacity .42s var(--easing-standard), transform .42s var(--easing-standard); transition-delay: calc(var(--i, 0) * 110ms); }
.motion .lz-chat-head.is-in, .motion .lz-chat-bubble.is-in, .motion .lz-chat-bubble.is-in > *, .motion .lz-chat-reply.is-in { opacity: 1; transform: none; }

.lz-chat-digitando { position: absolute; display: inline-flex; gap: 5px; align-items: center; padding: 11px 13px; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 6px; background: var(--surface-raised); opacity: 0; transform: translateY(6px); transition: opacity var(--duration-base) var(--easing-standard), transform var(--duration-base) var(--easing-standard); }
.lz-chat-digitando.is-in { opacity: 1; transform: none; }
/* No celular a conversa cresce como no WhatsApp: "digitando" fica no fluxo e a mensagem só entra depois. */
.lz-chat-digitando.em-fluxo { position: static; align-self: flex-start; }
.lz-chat-digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); animation: pular 1.1s ease-in-out infinite; }
.lz-chat-digitando i:nth-child(2) { animation-delay: .14s; }
.lz-chat-digitando i:nth-child(3) { animation-delay: .28s; }
@keyframes pular { 0%, 55%, 100% { transform: translateY(0); opacity: .45; } 25% { transform: translateY(-3px); opacity: 1; } }

/* 5 · A semana acendendo no mockup do app ------------------------------------ */
.lz-week .lz-dot { transition: background-color var(--duration-slow) var(--easing-standard), border-color var(--duration-slow) var(--easing-standard); transition-delay: calc(var(--i, 0) * 140ms); }
.motion .lz-week:not(.is-vivo) .lz-dot-done { background: transparent; border-color: var(--line-strong); }
.lz-week .lz-dot-done .lz-icon { transition: opacity var(--duration-slow) var(--easing-standard), transform var(--duration-slow) var(--easing-standard); transition-delay: calc(var(--i, 0) * 140ms + 80ms); }
.motion .lz-week:not(.is-vivo) .lz-dot-done .lz-icon { opacity: 0; transform: scale(.4); }
.lz-week .lz-dot-grace::after { transition: transform var(--duration-slow) var(--easing-standard); transition-delay: calc(var(--i, 0) * 140ms + 80ms); }
.motion .lz-week:not(.is-vivo) .lz-dot-grace::after { transform: scale(0); }
.motion .lz-week:not(.is-vivo) .lz-dot-grace, .motion .lz-week:not(.is-vivo) .lz-dot-today { border-color: var(--line-strong); }
.motion .lz-week.is-vivo .lz-dot-today { animation: anel 1s var(--easing-standard) 1s 1; }
.lz-week-note { transition: opacity var(--duration-slow) var(--easing-standard) 1.1s; }
.motion .lz-week:not(.is-vivo) .lz-week-note { opacity: 0; }
@keyframes anel { 0% { box-shadow: 0 0 0 0 rgba(242, 163, 58, .7); } 100% { box-shadow: 0 0 0 10px rgba(242, 163, 58, 0); } }

/* 6 · Respostas ao toque ------------------------------------------------------ */
/* Pergunta abrindo (navegadores que suportam ::details-content; nos outros abre direto, como hoje). */
.lz-faq::details-content { block-size: 0; overflow: clip; transition: block-size var(--duration-base) var(--easing-standard), content-visibility var(--duration-base) allow-discrete; }
.lz-faq[open]::details-content { block-size: auto; }

.lz-btn { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard); }
@media (hover: hover) {
  .lz-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(242, 163, 58, .85); }
}
.lz-btn-primary:active { transform: translateY(0) scale(.985); box-shadow: none; }
.site-nav a { transition: color var(--duration-fast) var(--easing-standard); }

/* Botão de tema: lua e sol se cruzam girando. */
.tema-toggle { position: relative; }
.tema-toggle .lz-icon { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; transition: opacity var(--duration-base) var(--easing-standard), transform var(--duration-base) var(--easing-standard); }
.tema-toggle .tema-lua { opacity: 1; transform: rotate(0) scale(1); }
.tema-toggle .tema-sol { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="noite"] .tema-toggle .tema-lua { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="noite"] .tema-toggle .tema-sol { opacity: 1; transform: rotate(0) scale(1); }

/* Troca de tema: as cores atravessam em vez de piscar (classe posta pelo tema.js por 450ms). */
.tema-trocando, .tema-trocando *, .tema-trocando *::before, .tema-trocando *::after { transition: background-color .38s ease, color .38s ease, border-color .38s ease, fill .38s ease, stroke .38s ease; }

/* 7 · Reduzir movimento -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html, .motion { scroll-behavior: auto; }
  .lz-faq::details-content { transition: none; }
  .lz-btn-primary:hover, .lz-btn-primary:active { transform: none; }
  .tema-toggle .lz-icon, .lz-week .lz-dot, .lz-week .lz-dot-done .lz-icon, .lz-week .lz-dot-grace::after, .lz-week-note { transition: none; }
}