/* ==========================================================================
   02 — FUNDO INFINITO
   Camada fixa atrás de TODA a página. Nunca termina e nunca "corta":
   aurora em movimento + faixas gigantes de texto rolando sem fim + anéis
   que expandem + grão. Reage à rolagem (velocidade e posição) e ao mouse.
   ========================================================================== */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--g-900); }

/* 1. Aurora: manchas de cor que derivam eternamente */
.bg__orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.bg__orb--a { width: 70vmax; height: 70vmax; left: -22vmax; top: -18vmax; background: radial-gradient(circle, rgba(42, 102, 87, 0.75), transparent 68%); animation: drift-a 34s ease-in-out infinite alternate; }
.bg__orb--b { width: 62vmax; height: 62vmax; right: -24vmax; top: 18vh; background: radial-gradient(circle, rgba(28, 74, 63, 0.9), transparent 68%); animation: drift-b 41s ease-in-out infinite alternate; }
.bg__orb--c { width: 46vmax; height: 46vmax; left: 12vw; bottom: -22vmax; background: radial-gradient(circle, rgba(114, 45, 19, 0.5), transparent 68%); animation: drift-c 29s ease-in-out infinite alternate; }
.bg__orb--d { width: 34vmax; height: 34vmax; right: 6vw; bottom: 8vh; background: radial-gradient(circle, rgba(215, 156, 115, 0.16), transparent 70%); animation: drift-a 37s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(16vmax, 12vmax, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-18vmax, -10vmax, 0) scale(0.9); } }
@keyframes drift-c { to { transform: translate3d(22vmax, -14vmax, 0) scale(1.25); } }

/* Aurora desloca com a rolagem (variável --sp = 0…1 definida via JS) */
.bg__aurora { position: absolute; inset: -10%; transform: translate3d(0, calc(var(--sp, 0) * -14vh), 0); will-change: transform; }

/* 2. Faixas de texto gigantes em contorno, rolando sem fim (motor: marquee-engine.js) */
.bg__rows { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; padding-block: 4vh; }
.bg__row { white-space: nowrap; font-family: var(--font-display); font-size: clamp(110px, 21vh, 260px); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(246, 230, 200, 0.075); will-change: transform; }
.bg__row:nth-child(2) { -webkit-text-stroke-color: rgba(215, 156, 115, 0.09); }
.bg__row span { display: inline-block; padding-right: 0.5em; }
.bg__row span::after { content: "✦"; padding-left: 0.5em; font-size: 0.5em; vertical-align: 0.25em; }

/* 3. Anéis que expandem para sempre a partir do canto superior direito */
.bg__rings { position: absolute; right: -10vmax; top: -10vmax; width: 60vmax; height: 60vmax; }
.bg__rings i { position: absolute; inset: 0; border: 1px solid rgba(215, 156, 115, 0.22); border-radius: 50%; animation: ring 14s linear infinite; opacity: 0; }
.bg__rings i:nth-child(2) { animation-delay: -4.6s; }
.bg__rings i:nth-child(3) { animation-delay: -9.3s; }
@keyframes ring { 0% { transform: scale(0.15); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* 4. Holofote que segue o mouse */
.bg__spot { position: absolute; left: 0; top: 0; width: 56vmax; height: 56vmax; margin: -28vmax 0 0 -28vmax; background: radial-gradient(circle, rgba(215, 156, 115, 0.13), transparent 62%); transform: translate3d(var(--mx, 70vw), var(--my, 30vh), 0); will-change: transform; }

/* 5. Grão de filme + vinheta */
.bg__grain { position: absolute; inset: -50%; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.bg__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(3, 9, 7, 0.62) 100%); }

@media (prefers-reduced-motion: reduce) {
  .bg__orb, .bg__rings i, .bg__grain { animation: none; }
  .bg__rings i { opacity: 0.4; }
}