/* =====================================================
   effects.css — cursor + magnetic + glow + shine
   Inspired by landonorris.com & lusion.co
   ===================================================== */

/* ─── Gradiente vermelho→laranja em todos os elementos primários ─── */
:root {
  --grad-primary: linear-gradient(135deg, #cc0000 0%, #ff8a00 100%);
  --grad-primary-hover: linear-gradient(135deg, #aa0000 0%, #e07000 100%);
}

.btn-primary {
  background: var(--grad-primary) !important;
}
.btn-primary:hover:not(:disabled) {
  background: var(--grad-primary-hover) !important;
  box-shadow: 0 6px 24px rgba(204,0,0,.35), 0 6px 24px rgba(255,138,0,.20);
}

/* ─── Shiny laranja sincronizado — todos os elementos primários ─── */
.text-primary,
h1 .text-primary, h2 .text-primary, h3 .text-primary, h4 .text-primary,
.eyebrow,
.gam-xp-row strong,
.hero-card-xp-label strong,
.plan-featured .plan-name,
.step-number,
.gam-notification {
  background: linear-gradient(
    120deg,
    #8b0000               30%,
    rgba(210,25,0,  0.85) 46%,
    #ff3300               50%,
    rgba(210,25,0,  0.85) 54%,
    #cc0000               70%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 8s linear infinite;
  animation-delay: 0s;
  display: inline;
}
/* eyebrow é inline-flex por causa do ícone — não sobrescrever display */
.eyebrow { display: inline-flex; }
.eyebrow svg, .eyebrow [data-icon], .eyebrow .icon { -webkit-text-fill-color: initial; }

/* Nav scrolled — border em vermelho */
.topnav.scrolled {
  border-bottom-color: rgba(204,0,0,0.18);
}

/* ─── Shiny Text (react-bits style) — hero h1 ─── */
.shiny-text {
  background: linear-gradient(
    120deg,
    #ffffff 30%,
    rgba(255,255,255,0.38) 46%,
    #fffbe8 50%,
    rgba(255,255,255,0.38) 54%,
    #ffffff 70%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 8s linear infinite;
  animation-delay: 0s;
}
/* "propósito" — mesmo timing de stops do branco, puxado pro vermelho */
.shiny-text .text-primary {
  background: linear-gradient(
    120deg,
    #8b0000               30%,
    rgba(210,25,0,  0.85) 46%,
    #ff3300               50%,
    rgba(210,25,0,  0.85) 54%,
    #cc0000               70%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 8s linear infinite;
  animation-delay: 0s;
}
@keyframes shiny-sweep {
  0%   { background-position: 150% center; }
  100% { background-position: -150% center; }
}

/* ─── Shiny em todo o texto do site ─── */
p, li, td, th, label,
span:not([class*="icon"]):not([data-icon]):not(.text-primary):not(.eyebrow):not(.badge),
.hero-lead, .hero-stat span, .depoimento-card p,
.gam-feature span, .step-card p, .faq-body p,
.section-head p, .footer-brand p {
  background: linear-gradient(
    120deg,
    rgba(240,240,240,1) 30%,
    rgba(255,255,255,0.5) 46%,
    rgba(255,252,230,1) 50%,
    rgba(255,255,255,0.5) 54%,
    rgba(240,240,240,1) 70%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 8s linear infinite;
}

/* ─── Site-wide shine overlay — passa luz em todo o site ─── */
#site-shine {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9985;
  background: linear-gradient(
    110deg,
    transparent        22%,
    rgba(255,255,255,0.03) 45%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.03) 55%,
    transparent        78%
  );
  background-size: 300% 100%;
  animation: site-shine 10s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes site-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ─── Nav scroll shrink ─── */
.topnav {
  transition: height 0.3s cubic-bezier(.4,0,.2,1),
              background 0.3s,
              border-color 0.3s,
              box-shadow 0.3s;
}
.topnav.scrolled {
  height: 54px;
  background: rgba(10,10,10,0.96);
  box-shadow: 0 1px 32px rgba(0,0,0,0.5);
}

/* ─── Text reveal ─── */
.text-reveal-wrap { overflow: hidden; display: block; }
.text-reveal-wrap .text-reveal-inner {
  display: block;
  animation: text-reveal 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes text-reveal {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Parallax — disable on mobile ─── */
@media (max-width: 900px) {
  .hero-visual,
  .hero-copy { transform: none !important; }
}

/* ─── SpotlightCard (react-bits) ─── */
.spotlight-card {
  position: relative;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(204, 0, 0, 0.22),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.spotlight-card:hover::before {
  opacity: 1;
}

/* ─── Glassmorphism cards ─── */
.card,
.plan-card,
.depoimento-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(17, 17, 17, 0.65);
  border-color: rgba(255, 255, 255, 0.07);
}
.plan-card.plan-featured {
  background: rgba(22, 22, 22, 0.82);
  border-color: var(--color-red) !important;
}

/* ─── Scroll progress bar ─── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #cc0000, #ff5500, #ff8a00);
  z-index: 99999;
  pointer-events: none;
  will-change: width;
  box-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

/* ─── Noise grain overlay ─── */
#noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9983;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}