/* ======================================================================
   Motion e acabamento (09/10 noite): tira a "cara de IA" e dá vida à interface.
   - menos roxo chapado: o neon fica só no que é ação; superfícies com grão de filme
   - vitrine rolando com o que a Nise gerou de verdade (nada de quadro simulado)
   - entradas com máscara, revelação no scroll, troca de aba, números contando
   - foco de luz que segue o mouse nos cartões, brilho no botão principal
   Carregado depois de todos os CSS. Quem pede menos movimento não vê nada disso mexer.
   ====================================================================== */
:root {
  --mv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mv-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- grão de filme por cima de tudo (tira o "liso de render") ---------- */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: mv-grao 0.9s steps(4) infinite;
}
:root[data-theme="light"] body::after { opacity: 0.035; }
@keyframes mv-grao {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); }
}

/* ---------- abas: pílula que desliza até a aba ativa ---------- */
#abas { position: relative; }
.mv-pilula {
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; border-radius: 2px; background: var(--neon);
  transition: transform 0.45s var(--mv-ease), width 0.45s var(--mv-ease), opacity 0.2s; pointer-events: none; opacity: 0;
}
.mv-pilula.on { opacity: 1; }

/* troca de aba: a tela nova sobe de leve */
.aba.mv-entra { animation: mv-aba 0.55s var(--mv-ease) both; }
@keyframes mv-aba { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- herói ---------- */
.heroi h1 .mv-p { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.02em 0.06em; margin: -0.14em -0.02em -0.06em; }
.heroi h1 .mv-p > span { display: inline-block; transform: translateY(105%); animation: mv-sobe 0.9s var(--mv-ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes mv-sobe { to { transform: none; } }
.heroi-marca { color: var(--texto) !important; position: relative; display: inline-block; margin-right: 0.3em; }
/* Câmara Escura ao lado do NISE: play na cor do texto (::before) e a imagem roxa invertida (::after) */
.heroi-marca .mv-flor { position: absolute; right: -0.36em; top: 0.04em; width: 0.3em; height: 0.225em; }
.heroi-marca .mv-flor::before, .heroi-marca .mv-flor::after { content: ""; position: absolute; top: 0; height: 100%; width: 50%; }
.heroi-marca .mv-flor::before { left: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.heroi-marca .mv-flor::after { right: 0; top: 18.3%; height: 63.4%; background: #8A5CFF; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
@keyframes mv-gira { to { transform: rotate(360deg); } }
.heroi-sub, .heroi-busca, .heroi-modelos, .heroi .link-pilula { opacity: 0; animation: mv-aparece 0.8s var(--mv-ease) forwards; }
.heroi-sub { animation-delay: 0.55s; }
.heroi-busca { animation-delay: 0.7s; }
.heroi-modelos { animation-delay: 0.85s; }
.heroi .link-pilula { animation-delay: 0.95s; }
@keyframes mv-aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* busca: sem halo roxo; uma borda que acende quando você digita */
.heroi-busca { box-shadow: none !important; transition: border-color 0.3s, background 0.3s; }
.heroi-busca:focus-within { border-color: color-mix(in srgb, var(--neon) 55%, var(--linha)); }
.heroi-busca input::placeholder { transition: opacity 0.25s; }
.heroi-busca.mv-troca input::placeholder { opacity: 0; }

/* modelos do herói viram uma esteira contínua */
.heroi-modelos.mv-esteira {
  display: block; width: min(860px, 100%); overflow: hidden; background: none; padding: 4px 0; border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mv-trilho { display: flex; width: max-content; gap: 6px; animation: mv-rola var(--dur, 40s) linear infinite; }
.mv-esteira:hover .mv-trilho { animation-play-state: paused; }
.mv-trilho > button { flex: none; background: var(--fundo-2); border-radius: 999px; padding: 7px 14px; }
@keyframes mv-rola { to { transform: translateX(-50%); } }

/* ---------- vitrine: o que saiu da Nise, rolando ---------- */
.mv-vitrine { position: relative; margin: 6px -20px 34px; overflow: hidden; padding: 10px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  opacity: 0; animation: mv-aparece 1s var(--mv-ease) 1.05s forwards; }
.mv-vitrine .mv-trilho { gap: 12px; --dur: 70s; }
.mv-vitrine:hover .mv-trilho { animation-play-state: paused; }
.mv-peca { position: relative; flex: none; width: 190px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--fundo-2); cursor: zoom-in;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); transition: transform 0.5s var(--mv-ease); }
.mv-peca:nth-child(3n + 1) { --r: -1.4deg; --y: 6px; }
.mv-peca:nth-child(3n + 2) { --r: 1deg; --y: -4px; }
.mv-peca:nth-child(3n) { --r: -0.4deg; --y: 10px; }
.mv-peca.largo { width: 330px; aspect-ratio: 16 / 9; align-self: center; }
.mv-peca.quadrado { width: 250px; aspect-ratio: 1; align-self: center; }
.mv-peca:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 2; }
.mv-peca img, .mv-peca video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-peca span { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 600; color: #fff; background: rgb(0 0 0 / 50%); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: 0.3s var(--mv-ease); }
.mv-peca:hover span { opacity: 1; transform: none; }
.mv-vitrine-rotulo { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; font-weight: 600; color: var(--texto-2); margin: 0 0 10px; letter-spacing: 0.02em; }
.mv-vitrine-rotulo i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: mv-pisca 1.6s ease-in-out infinite; }
@keyframes mv-pisca { 50% { opacity: 0.25; } }

/* ---------- revelação no scroll ---------- */
.mv { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--mv-ease), transform 0.8s var(--mv-ease); transition-delay: calc(var(--d, 0) * 60ms); }
.mv.dentro { opacity: 1; transform: none; }
.titulo-caixa.mv, .destaque-texto h2.mv, .faq-titulo h2.mv { transform: translateY(45%) skewY(3deg); filter: blur(6px); transform-origin: left; transition-property: opacity, transform, filter; transition-duration: 1s; }
.titulo-caixa.mv.dentro, .destaque-texto h2.mv.dentro, .faq-titulo h2.mv.dentro { filter: none; transform: none; }

/* ---------- cartões: luz que segue o mouse, sem contorno roxo ---------- */
.ferramenta-arte, .cartao-modelo, .quadro-destaque, .mural-item { --mx: 50%; --my: 50%; }
.ferramenta-arte::after, .cartao-modelo::after, .quadro-destaque::after, .mural-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / 13%), transparent 45%);
  z-index: 3;
}
.cartao-modelo, .quadro-destaque { position: relative; }
.ferramenta:hover .ferramenta-arte::after, .cartao-modelo:hover::after, .quadro-destaque:hover::after, .mural-item:hover::after { opacity: 1; }
.ferramenta:hover .ferramenta-arte, .cartao-modelo:hover, .mural-item:hover { outline: 0 !important; }
.ferramenta-arte { transition: transform 0.6s var(--mv-ease) !important; }
.ferramenta:hover .ferramenta-arte { transform: translateY(-4px) !important; }
.ferramenta-arte video, .ferramenta-arte img, .mural-item video, .mural-item img, .quadro-destaque video, .quadro-destaque img { transition: transform 1.2s var(--mv-ease); }
.ferramenta:hover .ferramenta-arte .capa-cheia, .mural-item:hover > video, .mural-item:hover > img, .quadro-destaque:hover video, .quadro-destaque:hover img { transform: scale(1.05); }
.cartao-modelo { transition: transform 0.5s var(--mv-ease), background 0.3s !important; }
.cartao-modelo:hover { transform: translateY(-4px) !important; background: var(--fundo-3); }

/* mural: entra em cascata */
.mural-item.mv { transform: translateY(30px) scale(0.97); }
.mural-item.mv.dentro { transform: none; }

/* ---------- botão principal: brilho que passa e aperto ao clicar ---------- */
.pri { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.18s var(--mv-ease), filter 0.2s; }
.pri::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 30%) 50%, transparent 65%); transform: translateX(-120%); }
.pri:hover::before { transition: transform 0.75s var(--mv-ease); transform: translateX(120%); }
.pri:active, .sec:active, .cartao-modelo:active, .ferramenta:active { transform: scale(0.97) !important; }

/* ---------- números: sem caixinha de template, régua fina e contagem ---------- */
.numeros { gap: 0 !important; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 0 !important; margin-bottom: 70px; }
.numeros div { background: none !important; border-radius: 0 !important; padding: 28px 22px !important; border-left: 1px solid var(--linha); }
.numeros div:first-child { border-left: 0; }
.numeros b { color: var(--texto) !important; font-variant-numeric: tabular-nums; }
.numeros div:nth-child(3) b { color: var(--neon) !important; }
@media (max-width: 760px) {
  .numeros div:nth-child(3) { border-left: 0; }
  .numeros div:nth-child(n + 3) { border-top: 1px solid var(--linha); }
}

/* ---------- perguntas: abre e fecha deslizando ---------- */
.faq details > p { animation: mv-abre 0.45s var(--mv-ease); }
@keyframes mv-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: var(--neon-forte); }

/* ---------- rodapé: escuro, com a frase grande; o roxo só na ênfase ---------- */
.rodape { background: var(--fundo-2) !important; color: var(--texto) !important; position: relative; overflow: hidden; }
.rodape-frase span { color: var(--neon) !important; }
.rodape a, .rodape span, .rodape b { color: inherit; }
.rodape-colunas a, .rodape-colunas span, .rodape-base { color: var(--texto-2) !important; }
.rodape-colunas b { color: var(--texto) !important; }
.rodape-colunas a { transition: color 0.2s, transform 0.3s var(--mv-ease); display: inline-block; }
.rodape-colunas a:hover { color: var(--texto) !important; transform: translateX(3px); }
.mv-marca-gigante { font: 900 clamp(90px, 17vw, 250px)/0.8 var(--cond); font-stretch: 68%; letter-spacing: -0.03em; text-transform: lowercase;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--texto) 16%, transparent); margin: 30px 0 -0.12em; user-select: none; white-space: nowrap; }

/* ---------- quem pede menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  body::after { animation: none; }
  .mv { opacity: 1; transform: none; clip-path: none; }
  .heroi h1 .mv-p > span { transform: none; }
}