/* Efeitos de elegância, recriados em CSS puro a partir do acervo "Referencias - Atualizado" (shining-text, blurred-stagger-text, sparkles, background-paths, animated-underline, testimonials marquee). Servem para a captura e para a página de vendas. */

/* fios dourados que se desenham no fundo do topo (background-paths) */
.fios { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fio { fill: none; stroke: url(#ouro-fio); stroke-width: 1; opacity: .34; stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: fio-desenha 9s ease-out forwards; }
.fio.f2 { animation-delay: .8s; opacity: .24; }
.fio.f3 { animation-delay: 1.6s; opacity: .18; }
@keyframes fio-desenha { to { stroke-dashoffset: 0; } }

/* estrelinhas que piscam (sparkles) */
.brilhos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.brilhos i { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; background: #fbe993; opacity: 0; animation: pisca 4.2s ease-in-out infinite var(--d); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px rgba(251, 233, 147, .9)); }
@keyframes pisca { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45% { opacity: .9; transform: scale(1) rotate(45deg); } 60% { opacity: .2; } }

/* luz que passa pelo texto dourado (shining-text). O dourado da marca fica parado; só a faixa de luz anda. */
.brilho-texto { background-image: linear-gradient(100deg, transparent 38%, rgba(255, 252, 232, .95) 50%, transparent 62%), linear-gradient(90deg, #c19440 0%, #ddbc66 22%, #fbe993 50%, #ddbc66 78%, #c19440 100%); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: luz-passa 5.5s ease-in-out infinite 1.5s; }
@keyframes luz-passa { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }

/* título que entra palavra por palavra, saindo do desfoque (blurred-stagger-text) */
.js .entra-palavras .palavra { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px); animation: palavra-entra .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes palavra-entra { to { opacity: 1; filter: blur(0); transform: none; } }
.js .entra-palavras.pronto .palavra { animation: none; opacity: 1; filter: none; transform: none; }

/* sublinhado que se desenha quando aparece (animated-underline) */
.sublinha { text-decoration: none !important; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size 1.1s cubic-bezier(.2, .8, .2, 1) .3s; }
.visivel .sublinha, .sublinha.visivel, .visivel.sublinha { background-size: 100% 2px; }
.no-js .sublinha, html:not(.js) .sublinha { background-size: 100% 2px; }

/* comentários em faixa contínua (testimonials marquee) */
.marquee { overflow: hidden; margin: 0 -20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-trilho { display: flex; gap: 12px; width: max-content; animation: desliza 38s linear infinite; padding: 4px 0; }
.marquee:hover .marquee-trilho { animation-play-state: paused; }
.marquee-trilho .copia { display: flex; gap: 12px; }
.marquee blockquote { flex: none; width: 230px; margin: 0; padding: 14px 16px 12px; border-radius: 14px; text-align: left; background: rgba(232, 222, 203, .08); border: 1px solid rgba(226, 197, 119, .3); font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.05rem; line-height: 1.3; color: #e8decb; }
.marquee blockquote::before { content: "\201C"; display: block; font-size: 1.8rem; line-height: .6; color: #e2c577; margin-bottom: 4px; }
@keyframes desliza { to { transform: translateX(calc(-50% - 6px)); } }

/* cartões que se erguem de leve */
.cartao { transition: transform .35s ease, box-shadow .35s ease; }
@media (hover: hover) { .cartao:hover { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .fio { stroke-dashoffset: 0; animation: none; }
  .brilhos { display: none; }
  .brilho-texto { animation: none; }
  .js .entra-palavras .palavra { animation: none; opacity: 1; filter: none; transform: none; }
  .sublinha { background-size: 100% 2px; transition: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; margin: 0; }
  .marquee-trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-trilho .copia { display: none; }
}