/* Movimento das páginas: brilho passando nos botões e nas palavras em destaque,
   borda de luz girando nos cartões principais, faixa de frases rolando,
   brilho que segue o dedo/mouse nos cartões e luz de fundo respirando.
   Usa as cores da página (--accent, --line, --muted). */

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* 1. Brilho passando nos botões */
.btn, .wa, .pill { position: relative; overflow: hidden; isolation: isolate; }
.btn::after, .wa::after, .pill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, var(--shine, rgba(255,255,255,.5)), transparent);
  transform: translateX(-130%) skewX(-20deg);
  animation: shine-sweep 3.8s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none; z-index: 1;
}
/* Em botões brancos o brilho é colorido; a página pode trocar com --shine */
.wa, .btn-light { --shine: rgba(168,85,247,.3); }
@keyframes shine-sweep {
  0% { transform: translateX(-130%) skewX(-20deg); }
  55%, 100% { transform: translateX(330%) skewX(-20deg); }
}

/* 2. Luz passando nas palavras em destaque */
.accent, .shimmer {
  background: linear-gradient(110deg, var(--accent) 0% 40%, #fff 50%, var(--accent) 60% 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: text-shine 5.5s ease-in-out infinite;
}
.shimmer { background-image: linear-gradient(110deg, var(--text) 0% 40%, var(--accent) 50%, var(--text) 60% 100%); }
@keyframes text-shine {
  0%, 35% { background-position: 100% 0; }
  80%, 100% { background-position: 0% 0; }
}

/* 3. Borda de luz girando nos cartões principais */
.glow-border { position: relative; }
.glow-border::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0deg 250deg, var(--accent) 300deg, #fff 330deg, var(--accent) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-spin 4.5s linear infinite;
  pointer-events: none; z-index: 1;
}
@keyframes border-spin { to { --ang: 360deg; } }

/* 4. Faixa de frases rolando */
.ticker {
  position: relative; overflow: hidden; padding: 20px 0;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.ticker-track span {
  display: flex; align-items: center; gap: 28px; padding-right: 28px;
  font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.ticker-track span::after { content: "✦"; color: var(--accent); font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 5. Brilho que segue o mouse nos cartões */
.spot {
  background-image: radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), rgba(255,255,255,.07), transparent 45%);
}

/* 6. Luz de fundo respirando */
.hero .glow, .final .glow { animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .7; scale: 1; } to { opacity: 1; scale: 1.12; } }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .wa::after, .pill::after, .glow-border::before { animation: none; display: none; }
  .accent, .shimmer { animation: none; background-position: 100% 0; }
  .ticker-track { animation: none; }
  .hero .glow, .final .glow { animation: none; }
}