/* ==========================================================================
   ZAVYN — Efeitos portados do Spell UI (https://spell.sh · MIT · © 2025 Spell UI)
   --------------------------------------------------------------------------
   Os componentes originais são React + Tailwind + motion. Aqui eles foram
   reescritos em CSS/JS puros (ver /js/spell-ui.js) para o site continuar
   estático, sem build e sem dependência externa.

   1. Rich Button       → botões primários (inclui "Acessar a plataforma")
   2. Flow Button       → borda tracejada que corre nos botões secundários
   3. Words Stagger     → títulos em serifa entram palavra por palavra
   4. Shimmer Text      → faixa holográfica no número de série do hero
   5. Tilt Card         → comprovante e cédulas com inclinação 3D + brilho holográfico
   6. Marquee           → microtexto de segurança e faixa de integrações
   7. Special Text      → valores com efeito de embaralhar
   8. Copy Button       → copiar o exemplo de código
   9. Fallback Avatar   → avatares em gradiente gerados a partir do nome
   10. Highlighted Text → marca-texto que sobe por trás de frases-chave
   11. Signature        → assinatura desenhada no termo de compromisso
   ========================================================================== */

/* ---------- 1. Rich Button ---------- */
.btn-primary {
  background: linear-gradient(180deg, rgba(1, 52, 238, 0.86) 0%, #0134EE 100%);
  border-color: rgba(9, 9, 11, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 6px -1px rgba(1, 9, 87, 0.2),
    0 2px 4px -2px rgba(1, 9, 87, 0.2);
  text-shadow: 0 1px 0 rgba(1, 9, 87, 0.55);
  transition: filter 200ms ease, transform var(--t-base) var(--ease);
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { filter: brightness(0.95); }
html.dark .btn-primary { background: linear-gradient(0deg, rgba(1, 52, 238, 0.78) 0%, #0134EE 100%); border-color: transparent; }
.btn-primary svg { transition: transform var(--t-base) var(--ease); }
.btn-primary:hover svg { transform: translateX(2px); }

/* ---------- 2. Flow Button ---------- */
.btn-flow .flow-border {
  position: absolute; top: -1px; left: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px); max-width: none;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 200ms ease-out;
  color: var(--blue-ink);
}
.btn-outline-light .flow-border { color: var(--cyan); }
.flow-border rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 6 4; }
.btn-flow:hover, .btn-flow:focus-visible { border-color: transparent; }
.btn-flow:hover .flow-border, .btn-flow:focus-visible .flow-border { opacity: 1; }
.btn-flow:hover .flow-border rect, .btn-flow:focus-visible .flow-border rect { animation: spell-dash-flow 1s linear infinite; }
@keyframes spell-dash-flow { to { stroke-dashoffset: -10; } }

/* ---------- 3. Words Stagger ---------- */
.sw {
  display: inline-block;
  opacity: 0; filter: blur(10px); transform: translateY(10px);
  transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--sw-delay, 0.1s) + var(--i, 0) * var(--sw-stagger, 0.05s));
}
.sw-in .sw, [data-reveal].in .sw { opacity: 1; filter: blur(0); transform: none; }
.hero-copy > h1.sw-ready { animation: none; }
html.hero-settled .hero .sw { opacity: 1; filter: none; transform: none; }

/* ---------- 4. Shimmer Text (faixa holográfica) ---------- */
.shimmer {
  --shimmer-contrast: rgba(8, 220, 253, 0.95);
  -webkit-text-fill-color: transparent;
  background: currentColor linear-gradient(to right, currentColor 0%, var(--shimmer-contrast) 40%, var(--shimmer-contrast) 60%, currentColor 100%);
  -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat; background-size: 50% 200%;
  background-position: -100% 0;
  animation: spell-shimmer 3.2s linear 1.2s infinite;
}
@keyframes spell-shimmer { 0% { background-position: -100% 0; } 50%, 100% { background-position: 250% 0; } }

/* ---------- 5. Tilt Card + brilho ---------- */
.tilt-spot {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), var(--spot-color, rgba(1, 52, 238, 0.06)), transparent 42%);
}
html.dark .tilt-spot { --spot-color: rgba(124, 152, 255, 0.08); }
.vault .tilt-spot { --spot-color: rgba(8, 220, 253, 0.08); }
/* nas cédulas e no comprovante o brilho vira película holográfica (Holo Card, Inspora) */
.bill .tilt-spot, .receipt .tilt-spot {
  mix-blend-mode: soft-light;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 40%, rgba(8, 220, 253, 0.45) 48%, rgba(255, 120, 220, 0.35) 56%, transparent 72%)
    calc(var(--mx, 50%) * 1.2) 0 / 260% 100% no-repeat;
}
.is-hovering > .tilt-spot { opacity: 1; }
/* Depois do reveal, os elementos voltam a responder ao hover sem o atraso escalonado da entrada */
html.js [data-reveal].revealed {
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) ease,
              box-shadow var(--t-base) ease, background-color var(--t-base) ease;
  transition-delay: 0s;
}
html.tilt-on [data-tilt].is-tilting {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(var(--ts, 1), var(--ts, 1), 1);
  transition: transform 0.2s ease-out, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
  transition-delay: 0s;
}

/* ---------- 6. Marquee ---------- */
.is-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.is-marquee .marquee-track {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  animation: spell-marquee var(--marquee-duration, 50s) linear infinite;
}
.is-marquee .marquee-track > li { flex: none; }
.is-marquee:hover .marquee-track, .is-marquee:focus-within .marquee-track { animation-play-state: paused; }
.microstrip.is-marquee { --marquee-duration: 70s; }
@keyframes spell-marquee { to { transform: translateX(-50%); } }

/* ---------- 7. Special Text ---------- */
.scramble { display: inline-block; white-space: pre; font: inherit; color: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }

/* ---------- 8. Copy Button ---------- */
.copy-btn {
  position: relative; margin-left: auto;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-md);
  color: var(--night-ink-2);
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease-out;
}
.copy-btn:hover { color: var(--night-ink); background: rgba(255, 255, 255, 0.06); }
.copy-btn:active { transform: scale(0.97); }
.copy-btn svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease; }
.copy-btn .copy-ico-check { opacity: 0; transform: scale(0.7); filter: blur(2px); color: #B5E3A0; }
.copy-btn.copied .copy-ico-check { opacity: 1; transform: none; filter: none; }
.copy-btn.copied .copy-ico-copy { opacity: 0; transform: scale(0); filter: blur(2px); }

/* ---------- 9. Fallback Avatar ---------- */
.avatar[data-avatar] { position: relative; overflow: hidden; }
.avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar.has-canvas span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(1, 9, 87, 0.35); }

/* ---------- 10. Highlighted Text ---------- */
.hl {
  padding: 0 0.15em; margin: 0 -0.05em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0%;
  transition: background-size 0.55s cubic-bezier(0.3, 1.3, 0.5, 1), color 0.3s ease;
  transition-delay: 0.45s;
}
[data-reveal].in .hl { background-size: 100% 100%; color: #fff; }

/* ---------- 11. Signature ---------- */
/* paths com pathLength="1": o traço é desenhado letra a letra e a tinta preenche no fim */
.signature path {
  fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 0.9;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s ease-in-out, fill-opacity 0.6s ease;
  transition-delay: calc(0.4s + var(--i, 0) * 0.22s), calc(1.5s + var(--i, 0) * 0.22s);
}
[data-reveal].in .signature path { stroke-dashoffset: 0; fill-opacity: 1; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .sw { opacity: 1; filter: none; transform: none; }
  .shimmer { -webkit-text-fill-color: currentColor; background: none; }
  .hl { background-size: 100% 100%; color: #fff; }
  .signature path { stroke-dashoffset: 0; fill-opacity: 1; }
}