/* =====================================================================
   Landsites · biblioteca de animações (ls-anim)  v1 · 2026-11-05
   Regra de ouro: ANIMAÇÃO → ESTÁTICO → ANIMAÇÃO → ESTÁTICO, ESTÁTICO.
   Cada movimento dura pouco (≈0,6 s) e é seguido de uma pausa longa
   (≈2,4 s) em que nada mexe. Na página, alternar secções animadas
   com secções paradas. Ver design/animations.md.
   Cores via variáveis: --ls-c (cor do item), --ls-ring, --ls-dot.
   ===================================================================== */
:root{
  --ls-move:.6s;
  --ls-ease:cubic-bezier(.2,.8,.2,1);
  --ls-ring:#E63946;
}

/* ---------- 01 spotlight: anel salta entre itens (vídeos 004926 / 010041 / 010723) ---------- */
[data-anim="spotlight"] [data-anim-item]{transition:box-shadow var(--ls-move) var(--ls-ease),border-color var(--ls-move) var(--ls-ease),background-color var(--ls-move) var(--ls-ease),transform var(--ls-move) var(--ls-ease)}
[data-anim="spotlight"] [data-anim-item].is-lit{border-color:var(--ls-c,var(--ls-ring));box-shadow:0 0 0 3px color-mix(in srgb,var(--ls-c,var(--ls-ring)) 22%,transparent),0 18px 40px -24px rgba(29,53,87,.45);transform:translateY(-3px)}

/* ---------- 02 pulse-tree: ponto viaja pela linha e acende o destino (004926 / 010834) ---------- */
[data-anim="pulse-tree"]{position:relative}
.ls-tree-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.ls-tree-svg path{fill:none;stroke:var(--ls-line,#A8DADC);stroke-width:2;stroke-dasharray:5 6}
.ls-tree-svg circle{r:6px;opacity:0;transition:opacity .2s}
.ls-tree-svg circle.is-on{opacity:1}
[data-anim="pulse-tree"] [data-anim-item]{position:relative;z-index:1;transition:box-shadow var(--ls-move) var(--ls-ease),background-color var(--ls-move) var(--ls-ease),transform var(--ls-move) var(--ls-ease)}
[data-anim="pulse-tree"] [data-anim-item].is-lit{box-shadow:0 0 0 3px var(--ls-c),0 24px 48px -26px color-mix(in srgb,var(--ls-c) 70%,transparent);background-color:color-mix(in srgb,var(--ls-c) 8%,#fff);transform:translateY(-4px)}
[data-anim="pulse-tree"] [data-anim-hub]{position:relative;z-index:1}

/* ---------- 03 line-build: linhas surgem uma a uma e ficam paradas (010129 / 010308) ---------- */
[data-anim="line-build"] > *{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ls-ease),transform .45s var(--ls-ease)}
[data-anim="line-build"] > .is-in{opacity:1;transform:none}

/* ---------- 04 blur-num: número grande entra desfocado e fica nítido (010723) ---------- */
[data-anim="blur-num"]{display:inline-block;filter:blur(10px);opacity:0;transform:scale(.94);transition:filter .7s var(--ls-ease),opacity .7s var(--ls-ease),transform .7s var(--ls-ease)}
[data-anim="blur-num"].is-in{filter:none;opacity:1;transform:none}

/* ---------- 05 toggle-reveal: interruptor passa de cinzento a cor (005929) ---------- */
[data-anim="toggle-reveal"] [data-anim-item]{filter:grayscale(1);opacity:.55;transition:filter var(--ls-move) var(--ls-ease),opacity var(--ls-move) var(--ls-ease),box-shadow var(--ls-move)}
[data-anim="toggle-reveal"].is-on [data-anim-item]{filter:none;opacity:1}
.ls-switch{width:46px;height:26px;border-radius:999px;background:#c9d3da;position:relative;transition:background var(--ls-move);flex:none}
.ls-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--ls-move) var(--ls-ease)}
.is-on .ls-switch{background:#2BB673}
.is-on .ls-switch::after{transform:translateX(20px)}

/* ---------- 06 tile-float: mosaico de peças ligeiramente rodadas a flutuar (010007) ---------- */
[data-anim="tile-float"] [data-anim-item]{transform:rotate(var(--ls-rot,0deg));animation:lsFloat 6s ease-in-out infinite;animation-delay:var(--ls-delay,0s)}
@keyframes lsFloat{0%,40%,100%{translate:0 0}20%{translate:0 -6px}60%,80%{translate:0 0}}

/* ---------- 07 typewriter: texto escrito letra a letra, pausa, apaga (010225) ---------- */
[data-anim="typewriter"]::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:lsCaret 1s steps(1) infinite}
@keyframes lsCaret{50%{opacity:0}}

/* ---------- 08 pop-badge: selo de confirmação aparece com salto (010341) ---------- */
.ls-pop{animation:lsPop .5s var(--ls-ease) both}
@keyframes lsPop{0%{opacity:0;transform:translateY(8px) scale(.9)}60%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{transform:none}}

/* ---------- 09 zoom-focus: aproxima a uma zona, pausa, afasta (010655) ---------- */
[data-anim="zoom-focus"]{overflow:hidden}
[data-anim="zoom-focus"] > *{transform-origin:var(--ls-origin,50% 50%);transition:transform .9s var(--ls-ease)}
[data-anim="zoom-focus"].is-zoom > *{transform:scale(var(--ls-zoom,1.6))}

/* ---------- 10 ring-callout: moldura arredondada destaca um valor (010655 / 010723) ---------- */
.ls-ring{border-radius:8px;box-shadow:0 0 0 2px transparent;transition:box-shadow var(--ls-move) var(--ls-ease)}
.ls-ring.is-lit{box-shadow:0 0 0 2px var(--ls-c,var(--ls-ring))}

/* Movimento reduzido: tudo no estado final, sem loops */
@media (prefers-reduced-motion:reduce){
  [data-anim="line-build"] > *,[data-anim="blur-num"]{opacity:1;transform:none;filter:none;transition:none}
  [data-anim="tile-float"] [data-anim-item]{animation:none}
  [data-anim="toggle-reveal"] [data-anim-item]{filter:none;opacity:1}
  [data-anim="typewriter"]::after{animation:none}
  .ls-pop{animation:none}
}

/* ---------- utilitário: fundo quadriculado (caixas de texto, cartões) ---------- */
.ls-grid{background-color:#fff;background-image:linear-gradient(rgba(29,53,87,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,53,87,.055) 1px,transparent 1px);background-size:26px 26px;background-position:-1px -1px}

/* ---------- 11 cta-shine: brilho que atravessa o botão + leve impulso, só quando o cartão está em destaque (ou hover) ---------- */
.ls-shine{position:relative;overflow:hidden;isolation:isolate}
.ls-shine::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-130%)}
.is-lit .ls-shine::after,.ls-shine:hover::after{animation:lsShine 1.1s .35s var(--ls-ease) both}
.is-lit .ls-shine{animation:lsNudge .7s .3s var(--ls-ease) both}
@keyframes lsShine{to{transform:translateX(130%)}}
@keyframes lsNudge{0%,100%{transform:none}45%{transform:translateY(-2px) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.ls-shine::after,.is-lit .ls-shine{animation:none}}

/* ---------- 13 mark: sublinhado tipo marcador desenha-se sob a frase-chave, uma vez, em sequência ---------- */
mark.ls-mark{background-color:transparent;color:inherit;font-weight:600;padding:0 2px;margin:0 -2px;background-image:linear-gradient(transparent 60%,color-mix(in srgb,var(--ls-mark,#A8DADC) 80%,transparent) 60%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .9s var(--ls-ease);-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.ls-mark.is-in{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){mark.ls-mark{transition:none;background-size:100% 100%}}