/* =====================================================================
   Landsites · biblioteca de animações (ls-anim)  v2 · 2026-11-10 (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%}}

/* ---------- 06b tile-float com entrada (data-enter): peças entram uma a uma e depois flutuam ---------- */
[data-anim="tile-float"] .ls-enter{opacity:0;scale:.94;transition:opacity .5s var(--ls-ease),scale .5s var(--ls-ease)}
[data-anim="tile-float"] .ls-enter.is-in{opacity:1;scale:1}

/* ---------- 14 cta-shine: o botão brilha e dá um pequeno impulso, depois fica parado uns segundos ---------- */
.ls-shine.is-lit::after{animation:lsShine 1.1s .1s var(--ls-ease) both}
.ls-shine.is-lit{animation:lsNudge .7s var(--ls-ease) both}

/* ---------- 15 ls-form: campos com movimento discreto ao focar ---------- */
.ls-form label{transition:color .3s var(--ls-ease),transform .3s var(--ls-ease);transform-origin:left}
.ls-form .f:focus-within label{color:var(--ls-ring);transform:translateX(3px)}
.ls-form input,.ls-form select,.ls-form textarea{transition:border-color .25s,box-shadow .3s var(--ls-ease),transform .3s var(--ls-ease)}
.ls-form input:focus,.ls-form select:focus,.ls-form textarea:focus{transform:translateY(-1px)}

/* ---------- ícone que abana no hover ---------- */
@keyframes lsWiggle{0%,100%{transform:none}25%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}

@media (prefers-reduced-motion:reduce){
  [data-anim="tile-float"] .ls-enter{opacity:1;scale:1;transition:none}
  .ls-shine.is-lit,.ls-shine.is-lit::after{animation:none}
  .ls-form label,.ls-form input,.ls-form select,.ls-form textarea{transform:none!important}
}

/* ---------- 16 rotate: frases empilhadas, uma de cada vez (entra, fica, sai); marcador redesenha-se a cada frase ---------- */
[data-anim="rotate"]{display:grid}
[data-anim="rotate"] > *{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ls-ease),transform .5s var(--ls-ease);pointer-events:none}
[data-anim="rotate"] > .is-on{opacity:1;transform:none;pointer-events:auto;transition-delay:.32s}
[data-anim="rotate"] > .is-out{opacity:0;transform:translateY(-10px);transition-duration:.3s}
@media (prefers-reduced-motion:reduce){[data-anim="rotate"] > *{transition:none}}

/* ---------- 17 ticker: faixa escura com frases em maiúsculas a deslizar devagar, separadas por losangos (vídeo 2026-11-06 180345) ---------- */
.ls-ticker{position:relative;overflow:hidden;max-width:100%;min-width:0;background:var(--ls-tk-bg,#0F1D31);color:var(--ls-tk-ink,#E8F1F5);padding:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ls-ticker .ls-tk-track{display:flex;width:max-content;animation:lsTicker var(--ls-tk-dur,30s) linear infinite}
.ls-ticker .ls-tk-track span{display:flex;align-items:center;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ls-ticker .ls-tk-track span::after{content:"";width:6px;height:6px;margin:0 22px;transform:rotate(45deg);background:var(--ls-tk-dot,#A8DADC);flex:none}
.ls-ticker:hover .ls-tk-track{animation-play-state:paused}
@keyframes lsTicker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ls-ticker .ls-tk-track{animation:none;flex-wrap:wrap;width:auto;row-gap:8px;padding:0 16px}}

/* =====================================================================
   v2 · 2026-11-10 · padrões 18-36 (vídeos de 06 a 09/11 e WhatsApp 14/10)
   Cores: --ls-c (destaque), --ls-ok (verde), --ls-bad (vermelho), --ls-dim (opacidade esbatida)
   ===================================================================== */
:root{--ls-ok:#2BB673;--ls-bad:#E63946;--ls-dim:.32}

/* 18 stack: cartões empilham ao rolar (1106-162551) */
[data-anim="stack"]{display:grid;gap:var(--ls-stack-gap,24px)}
[data-anim="stack"] > *{position:sticky;top:calc(var(--ls-stack-top,96px) + var(--ls-i,0) * 14px);transform-origin:50% 0;transform:scale(calc(1 - var(--ls-under,0) * .06));filter:brightness(calc(1 - var(--ls-under,0) * .18))}

/* 19 media-cycle: fade lento + aproximação (1106-162414) */
[data-anim="media-cycle"]{display:grid;overflow:hidden}
[data-anim="media-cycle"] > *{grid-area:1/1;opacity:0;transition:opacity 1s ease;width:100%;height:100%;object-fit:cover}
[data-anim="media-cycle"] > .is-on{opacity:1;animation:lsKen 6s ease-out both}
@keyframes lsKen{from{transform:scale(1)}to{transform:scale(1.06)}}

/* 20 board: frentes de trabalho em paralelo (1106-165819) */
[data-anim="board"] .ls-bar{display:block;height:4px;border-radius:4px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden}
[data-anim="board"] .ls-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ls-c,var(--ls-ring))}
[data-anim="board"] [data-anim-item]{transition:background-color .5s,border-color .5s,box-shadow .5s}
[data-anim="board"] .is-rev .ls-stt{color:#E9A23B}
[data-anim="board"] .is-ok .ls-stt{color:var(--ls-ok)}[data-anim="board"] .is-ok .ls-bar i{background:var(--ls-ok)}

/* 21 fill: campos preenchem-se sozinhos (1106-193053) */
[data-anim="fill"] [data-fill].is-typing{box-shadow:0 0 0 2px color-mix(in srgb,var(--ls-c,var(--ls-ring)) 35%,transparent)}
[data-anim="fill"] [data-fill]:not(input):not(textarea).is-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:currentColor;animation:lsCaret 1s steps(1) infinite}
[data-anim="fill"] [data-anim-done]{opacity:.35;transform:scale(.97);transition:opacity .4s var(--ls-ease),transform .4s var(--ls-ease)}
[data-anim="fill"] [data-anim-done].is-on{opacity:1;transform:none}

/* 22 strike-swap: antes riscado, depois aparece (1106-193249) */
/* .ls-was deve ser inline (span): o risco passa em cada linha */
[data-anim="strike-swap"] .ls-was{background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/0% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s var(--ls-ease),opacity .6s}
[data-anim="strike-swap"] .is-in .ls-was{background-size:100% 1.5px;opacity:.55}
[data-anim="strike-swap"] .ls-now{opacity:0;transform:translateX(-6px);transition:opacity .6s var(--ls-ease) .35s,transform .6s var(--ls-ease) .35s}
[data-anim="strike-swap"] .is-in .ls-now{opacity:1;transform:none}

/* 23 orbit: texto circular a rodar (1106-193345) */
[data-anim="orbit"]{position:relative;display:grid;place-items:center;width:var(--ls-orbit,128px);aspect-ratio:1;flex:none}
.ls-orbit-svg{position:absolute;inset:0;width:100%;height:100%;animation:lsSpin var(--ls-orbit-dur,24s) linear infinite;overflow:visible}
.ls-orbit-svg text{font:700 7.4px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;fill:currentColor}
@keyframes lsSpin{to{transform:rotate(360deg)}}

/* 24 ladder: calha vertical que enche, degraus acendem (1107-163030) */
[data-anim="ladder"]{position:relative;display:grid;gap:var(--ls-ladder-gap,22px);padding-left:34px}
[data-anim="ladder"]::before,[data-anim="ladder"]::after{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:3px;border-radius:3px;background:color-mix(in srgb,currentColor 15%,transparent)}
[data-anim="ladder"]::after{background:var(--ls-c,var(--ls-ring));transform-origin:50% 0;transform:scaleY(var(--ls-fill,0));transition:transform .6s var(--ls-ease)}
[data-anim="ladder"] > *{position:relative;opacity:.35;transition:opacity .5s var(--ls-ease)}
[data-anim="ladder"] > *::before{content:"";position:absolute;left:-31px;top:.35em;width:15px;height:15px;border-radius:50%;background:var(--ls-bg,#fff);box-shadow:inset 0 0 0 3px color-mix(in srgb,currentColor 25%,transparent);z-index:1;transition:box-shadow .4s,background .4s}
[data-anim="ladder"] > .is-lit{opacity:1}
[data-anim="ladder"] > .is-lit::before{background:var(--ls-c,var(--ls-ring));box-shadow:0 0 0 4px color-mix(in srgb,var(--ls-c,var(--ls-ring)) 22%,transparent)}

/* 25 checks: pendente, a carregar, ✓ (1107-163218, 1109-155617, 1108-035809) */
[data-anim="checks"] [data-anim-item]{position:relative;padding-left:30px;transition:opacity .4s}
[data-anim="checks"] [data-anim-item]::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;border-radius:50%;box-sizing:border-box;box-shadow:inset 0 0 0 2px color-mix(in srgb,currentColor 30%,transparent);display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff}
[data-anim="checks"] .is-run::before{box-shadow:none;border:2px solid color-mix(in srgb,currentColor 15%,transparent);border-top-color:var(--ls-c,var(--ls-ring));animation:lsSpin .8s linear infinite}
[data-anim="checks"] .is-ok::before{content:"✓";background:var(--ls-ok);box-shadow:none;animation:lsPop .4s var(--ls-ease) both}
[data-anim="checks"] [data-anim-item]:not(.is-run):not(.is-ok){opacity:.5}

/* 26 strike + tag dentro de data-anim="mark" (1107-163218) */
s.ls-strike{text-decoration:none;background:linear-gradient(var(--ls-bad),var(--ls-bad)) no-repeat 0 55%/0% 2px;transition:background-size .6s var(--ls-ease),opacity .6s}
s.ls-strike.is-in{background-size:100% 2px;opacity:.6}
.ls-tag{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 12px;font-weight:700;font-size:.85em;background:var(--ls-bad);color:#fff;transform:rotate(-2deg) scale(.6);opacity:0;transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ls-tag.is-in{opacity:1;transform:rotate(-2deg)}

/* 27 flow: cadeia de nós; ligação avaria e é reparada (1109-155617) */
[data-anim="flow"]{display:flex;align-items:center;flex-wrap:wrap;row-gap:28px}
.ls-link{position:relative;flex:1 1 24px;min-width:24px;max-width:90px;height:2px;background:color-mix(in srgb,currentColor 25%,transparent);transition:background .4s}
.ls-link.is-bad{background:repeating-linear-gradient(90deg,var(--ls-bad) 0 6px,transparent 6px 11px)}
.ls-link.is-fix{background:var(--ls-ok)}
.ls-link[data-label]:not([data-label=""])::after{content:attr(data-label);position:absolute;left:50%;top:14px;transform:translateX(-50%);white-space:nowrap;font:700 11px/1 system-ui,sans-serif;padding:4px 9px;border-radius:99px;color:#fff;background:var(--ls-bad);animation:lsPop .4s var(--ls-ease) both}
.ls-link.is-fix::after{background:var(--ls-ok)!important}

/* 28 focus: um a cores, outros esbatidos (1109-155617) */
[data-anim="focus"] [data-anim-item]{transition:opacity .5s var(--ls-ease),filter .5s var(--ls-ease),transform .5s var(--ls-ease)}
[data-anim="focus"] .is-dim{opacity:var(--ls-dim);filter:grayscale(1)}
[data-anim="focus"] .is-lit{transform:translateY(-3px)}

/* 29 shuffle: espalhados assentam na grelha (1108-035709) */
.ls-shuf{opacity:0;transform:translate(var(--ls-sx),var(--ls-sy)) rotate(var(--ls-sr)) scale(.92);transition:opacity .5s var(--ls-ease),transform .9s cubic-bezier(.3,1.3,.5,1)}
.ls-shuf.is-in{opacity:1;transform:none}

/* 31 count: números alinhados enquanto contam */
[data-anim="count"]{font-variant-numeric:tabular-nums}

/* 33 orbit-hub: satélites em órbita (WhatsApp 1014) */
[data-anim="orbit-hub"]{position:relative;display:grid;place-items:center}
[data-anim="orbit-hub"] .ls-sat{position:absolute;left:50%;top:50%;width:0;height:0;animation:lsSpin var(--ls-orbit-dur,18s) linear infinite;rotate:var(--ls-a,0deg)}
[data-anim="orbit-hub"] .ls-sat > *{position:absolute;transform:translate(-50%,-50%) translateX(var(--ls-r,90px))}

/* 34 cone: feixe de luz desce sobre o conteúdo (WhatsApp 1014) */
[data-anim="cone"]{position:relative;isolation:isolate}
[data-anim="cone"]::before{content:"";position:absolute;left:50%;top:-40%;width:70%;height:140%;transform:translateX(-50%);z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--ls-c,#fff) 40%,transparent),transparent 75%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:0;transition:opacity 1.2s ease .2s;pointer-events:none}
[data-anim="cone"].is-in::before{opacity:1}

/* 35 line-focus: só a linha atual nítida (WhatsApp 1014) */
[data-anim="line-focus"] > *{transition:opacity .5s var(--ls-ease),filter .5s var(--ls-ease)}
[data-anim="line-focus"] .is-dim{opacity:var(--ls-dim);filter:blur(.6px)}

/* 36 ring-draw: arco desenha-se à volta (WhatsApp 1014) */
[data-anim="ring-draw"]{position:relative;display:inline-block}
.ls-ringdraw{position:absolute;inset:-14% -8%;width:116%;height:128%;overflow:visible;pointer-events:none}
.ls-ringdraw ellipse{fill:none;stroke:var(--ls-c,var(--ls-ring));stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ls-ease) .2s}
[data-anim="ring-draw"].is-in .ls-ringdraw ellipse{stroke-dashoffset:.04}

@media (prefers-reduced-motion:reduce){
  [data-anim="stack"] > *{transform:none;filter:none}
  [data-anim="media-cycle"] > .is-on,.ls-orbit-svg,[data-anim="orbit-hub"] .ls-sat,[data-anim="checks"] .is-ok::before,[data-anim="checks"] .is-run::before,.ls-link::after{animation:none}
  [data-anim="strike-swap"] .ls-was,[data-anim="strike-swap"] .ls-now,s.ls-strike,.ls-tag,.ls-shuf,.ls-ringdraw ellipse,[data-anim="ladder"]::after{transition:none}
}