/* spell-fx.css — efeitos do spell.sh em HTML/CSS puro. Par de spell-fx.js; guia em ../README.md.
   Ajuste fino por CSS var no próprio elemento: style="--fx-delay:.3s; --fx-stagger:.06s; --fx-speed:.8s". */

.fx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Texto que vai ser fatiado fica invisível até o JS fatiar (sem pulo de layout). Sem JS, aparece em 3 s. */
:is([data-fx="words-stagger"], [data-fx="blur-reveal"], [data-fx="slide-up-text"], [data-fx="signature"]):not(.fx-ready) {
  visibility: hidden;
  animation: fx-failsafe 0s 3s forwards;
}
@keyframes fx-failsafe {
  to { visibility: visible; }
}

/* ---------- texto fatiado: palavra (.fx-w) > máscara (.fx-m) > unidade animada (.fx-u) ---------- */
[data-fx] .fx-w { display: inline-block; white-space: nowrap; }
[data-fx] .fx-m,
[data-fx] .fx-u { display: inline-block; }

/* words-stagger: palavra a palavra, sobe 10px, perde o desfoque */
[data-fx="words-stagger"] .fx-u,
[data-fx="blur-reveal"] .fx-u {
  --d: var(--fx-speed, .5s);
  --s: var(--fx-stagger, .1s);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  transition: opacity var(--d) ease-out, transform var(--d) ease-out, filter var(--d) ease-out;
  transition-delay: calc(var(--fx-delay, 0s) + var(--i, 0) * var(--s));
}
/* blur-reveal: mesma ideia, letra a letra e mais rápido entre letras */
[data-fx="blur-reveal"] .fx-u {
  --d: var(--fx-speed, .6s);
  --s: var(--fx-stagger, .02s);
  filter: blur(12px);
}

/* slide-up-text: cada pedaço sobe de dentro de uma máscara. A folga vertical da máscara salva acentos e descendentes. */
[data-fx="slide-up-text"] .fx-m {
  overflow: hidden;
  vertical-align: top;
  padding: .1em 0 .15em;
  margin: -.1em 0 -.15em;
}
[data-fx="slide-up-text"] .fx-u {
  transform: translateY(calc(100% + .3em));
  transition: transform var(--fx-speed, .5s) cubic-bezier(.625, .05, 0, 1) calc(var(--fx-delay, 0s) + var(--i, 0) * var(--fx-stagger, .1s));
}

[data-fx].fx-in .fx-u { opacity: 1; transform: none; filter: none; }

/* ---------- highlighted-text: faixa entra por trás da frase. Sem mix-blend: a faixa é uma cópia recortada por clip-path,
   então funciona dentro de seções com transform/opacity e com cor de marca. ---------- */
[data-fx="highlighted-text"] {
  position: relative;
  display: inline-block;
  padding: 0 .18em .12em .15em; /* folga embaixo: a faixa cobre a perna do g/p/ç */
  margin-bottom: -.12em;
  background: none;
  color: inherit;
}
/* A cor das letras sobre a faixa vem de text-fill-color; assim currentColor da faixa continua sendo a cor do texto. */
[data-fx="highlighted-text"] .fx-hl {
  position: absolute;
  inset: 0;
  padding: inherit;
  background: var(--fx-hl-bg, currentColor);
  -webkit-text-fill-color: var(--fx-hl-fg, #fff);
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--fx-speed, .6s) cubic-bezier(.2, .9, .3, 1) var(--fx-delay, 0s);
}
[data-fx="highlighted-text"][data-fx-from="top"] .fx-hl { clip-path: inset(0 0 100% 0); }
[data-fx="highlighted-text"][data-fx-from="left"] .fx-hl { clip-path: inset(0 100% 0 0); }
[data-fx="highlighted-text"][data-fx-from="right"] .fx-hl { clip-path: inset(0 0 0 100%); }
[data-fx="highlighted-text"].fx-in .fx-hl { clip-path: inset(0); }

/* ---------- shimmer-text: brilho atravessa o texto em loop (só CSS) ---------- */
[data-fx="shimmer-text"] {
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background: currentColor linear-gradient(to right, currentColor 0%, var(--fx-shine, rgba(255, 255, 255, .6)) 40%, var(--fx-shine, rgba(255, 255, 255, .6)) 60%, currentColor 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 50% 200%;
  background-position-x: 250%;
  animation: fx-shimmer calc(var(--fx-speed, 1.5s) * 2) linear var(--fx-delay, 1.5s) infinite;
}
@keyframes fx-shimmer {
  0% { background-position-x: -100%; }
  50%, 100% { background-position-x: 250%; }
}

/* ---------- gradient-wave-text: onda de cor sobe de baixo e devolve o texto à cor base (estilo Apple) ---------- */
@property --fx-gi {
  syntax: "<number>";
  inherits: false;
  initial-value: -25;
}
[data-fx="gradient-wave-text"] {
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at 50% bottom,
    var(--fx-base, rgb(29, 29, 31)) calc(var(--fx-gi) * 1%),
    var(--fx-c1, #8d6869) calc((var(--fx-gi) + 8) * 1%),
    var(--fx-c2, #5a8ea6) calc((var(--fx-gi) + 12) * 1%),
    var(--fx-c3, #b9c96e) calc((var(--fx-gi) + 16) * 1%),
    var(--fx-c4, #c7c571) calc((var(--fx-gi) + 20) * 1%),
    var(--fx-c5, #cb706f) calc((var(--fx-gi) + 24) * 1%),
    var(--fx-c6, #7e5e5f) calc((var(--fx-gi) + 28) * 1%),
    var(--fx-c1, #8d6869) calc((var(--fx-gi) + 32) * 1%),
    var(--fx-c2, #5a8ea6) calc((var(--fx-gi) + 36) * 1%),
    var(--fx-base, rgb(29, 29, 31)) calc((var(--fx-gi) + 40) * 1%));
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 2px 20%;
  margin-bottom: -20%;
}
[data-fx="gradient-wave-text"].fx-in {
  animation: fx-wave calc(3.75s / var(--fx-speed, 1)) linear var(--fx-delay, 0s) both;
}
[data-fx="gradient-wave-text"][data-fx-repeat].fx-in { animation-iteration-count: infinite; }
@keyframes fx-wave {
  from { --fx-gi: -25; }
  to { --fx-gi: 200; }
}

/* ---------- text-marquee: lista vertical que rola sem parar, com fade em cima e embaixo ---------- */
[data-fx="text-marquee"] {
  position: relative;
  overflow: hidden;
  height: var(--fx-h, 200px);
  -webkit-mask-image: linear-gradient(transparent, #000 43.7%, transparent);
  mask-image: linear-gradient(transparent, #000 43.7%, transparent);
}
[data-fx="text-marquee"] > * {
  --t: calc(var(--fx-speed, 1s) * var(--n, 1));
  display: flex;
  align-items: center;
  height: var(--fx-item, 40px);
  margin: 0;
  translate: 0 calc((var(--n) - var(--k)) * 100%);
  animation: fx-tmarquee var(--t) linear calc(var(--t) / var(--n) * var(--k) - var(--t)) infinite;
}
@keyframes fx-tmarquee {
  to { translate: 0 calc((var(--k) + 1) * -100%); }
}

/* ---------- signature: igual ao spell.sh. Cada letra: contorno desenhado + máscara revelando o preenchimento,
   1,5 s por letra, 0,2 s entre letras. font-size do elemento = altura das letras. ---------- */
[data-fx="signature"] svg { display: block; width: auto; overflow: visible; }
[data-fx="signature"] path { fill: currentColor; }
[data-fx="signature"] .fx-d {
  fill: none;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset var(--fx-speed, 1.5s) ease-in-out calc(var(--fx-delay, 0s) + var(--i) * var(--fx-stagger, .2s)),
    opacity 0s calc(var(--fx-delay, 0s) + var(--i) * var(--fx-stagger, .2s) + .01s);
}
[data-fx="signature"] .fx-sig-line { stroke: currentColor; stroke-linejoin: round; }
[data-fx="signature"] .fx-sig-mask { stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
[data-fx="signature"].fx-in .fx-d { stroke-dashoffset: 0; opacity: 1; }
[data-fx="signature"].fx-done g { mask: none; }

/* ---------- tilt-card: cartão inclina com o mouse + luz que segue o cursor. Use num wrapper (figure/a/div), não direto no <img>. ---------- */
[data-fx="tilt-card"] {
  --fx-dir: -1;
  position: relative;
  overflow: hidden;
  transform:
    perspective(var(--fx-perspective, 1200px))
    rotateX(calc(var(--py, 0) * 2 * var(--fx-tilt, 15deg) * var(--fx-dir)))
    rotateY(calc(var(--px, 0) * -2 * var(--fx-tilt, 15deg) * var(--fx-dir)))
    scale(var(--fx-s, 1));
  /* ao tirar o mouse: volta devagar, partindo da inclinação em que estava (não pula para o zero) */
  transition: transform var(--fx-return, 1s) cubic-bezier(.33, 1, .68, 1);
}
[data-fx="tilt-card"][data-fx-effect="gravitate"] { --fx-dir: 1; }
/* com o mouse em cima: segue o cursor rápido */
[data-fx="tilt-card"].fx-hover { --fx-s: var(--fx-scale, 1.05); transition-duration: .2s; transition-timing-function: ease-out; }
[data-fx="tilt-card"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(circle var(--fx-r, 200px) at calc((var(--px, 0) + .5) * 100%) calc((var(--py, 0) + .5) * 100%), var(--fx-spot, rgba(255, 255, 255, .15)), transparent);
}
[data-fx="tilt-card"].fx-hover::after { opacity: 1; }
[data-fx="tilt-card"][data-fx-spotlight="off"]::after { display: none; }

/* ---------- marquee: faixa infinita (logos, depoimentos, palavras). Espace itens com margin/padding, não com gap. ---------- */
[data-fx="marquee"] {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fx-fade, 10%), #000 calc(100% - var(--fx-fade, 10%)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fx-fade, 10%), #000 calc(100% - var(--fx-fade, 10%)), transparent);
}
[data-fx="marquee"] .fx-track {
  display: flex;
  flex-shrink: 0;
  animation: fx-marquee var(--fx-speed, 20s) linear infinite;
}
[data-fx="marquee"] .fx-track > * { flex-shrink: 0; }
[data-fx="marquee"][data-fx-dir="right"] .fx-track,
[data-fx="marquee"][data-fx-dir="down"] .fx-track { animation-direction: reverse; }
[data-fx="marquee"]:is([data-fx-dir="up"], [data-fx-dir="down"]) {
  flex-direction: column;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--fx-fade, 10%), #000 calc(100% - var(--fx-fade, 10%)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--fx-fade, 10%), #000 calc(100% - var(--fx-fade, 10%)), transparent);
}
[data-fx="marquee"]:is([data-fx-dir="up"], [data-fx-dir="down"]) .fx-track { flex-direction: column; animation-name: fx-marquee-y; }
[data-fx="marquee"][data-fx-fade="off"] { -webkit-mask-image: none; mask-image: none; }
[data-fx="marquee"][data-fx-pause]:hover .fx-track { animation-play-state: paused; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }
@keyframes fx-marquee-y { to { transform: translateY(-50%); } }

/* ---------- logos-carousel: grupos de logos trocam no mesmo lugar, um logo de cada vez ---------- */
[data-fx="logos-carousel"] { display: grid; place-items: center; }
[data-fx="logos-carousel"] .fx-lg {
  grid-area: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--fx-gap, 40px);
  width: 100%;
  pointer-events: none;
}
[data-fx="logos-carousel"] .fx-lg > * {
  opacity: 0;
  animation: none var(--fx-speed, .6s) ease calc(var(--k, 0) * var(--fx-stagger, .14s)) both;
}
[data-fx="logos-carousel"] .fx-on { pointer-events: auto; }
[data-fx="logos-carousel"] .fx-on > * { opacity: 1; }
[data-fx="logos-carousel"] .fx-enter > * { animation-name: fx-logos-in; }
[data-fx="logos-carousel"] .fx-exit > * { animation-name: fx-logos-out; }
@keyframes fx-logos-in {
  from { transform: translateY(40px); filter: blur(4px); opacity: 0; }
  to { transform: none; filter: blur(0); opacity: 1; }
}
@keyframes fx-logos-out {
  from { transform: none; filter: blur(0); opacity: 1; }
  to { transform: translateY(-40px); filter: blur(4px); opacity: 0; }
}

/* ---------- fundos WebGL (spell-gl.js). O pai precisa de position:relative; isolation:isolate ---------- */
:is([data-fx="animated-gradient"], [data-fx="light-rays"]) {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}
[data-fx="light-rays"] { background: #000; }
:is([data-fx="animated-gradient"], [data-fx="light-rays"]) canvas { display: block; width: 100%; height: 100%; }

/* ---------- movimento reduzido: tudo no estado final, nada em loop ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-fx] .fx-u,
  [data-fx] .fx-hl,
  [data-fx="signature"] .fx-d,
  [data-fx="tilt-card"] { transition: none !important; }
  [data-fx] .fx-u { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-fx="highlighted-text"] .fx-hl { clip-path: inset(0) !important; }
  [data-fx="signature"] .fx-d { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  [data-fx="signature"] g { mask: none !important; }
  [data-fx="tilt-card"] { transform: none !important; }
  [data-fx="shimmer-text"],
  [data-fx="gradient-wave-text"],
  [data-fx="text-marquee"] > *,
  [data-fx="marquee"] .fx-track,
  [data-fx="logos-carousel"] .fx-lg > * { animation: none !important; }
  [data-fx="text-marquee"] > * { translate: none !important; }
}