/* =========================================================================
   AURORA BACKGROUND (Claude Templates · identidade laranja)
   Adaptado do componente React "AuroraBackground" para CSS vanilla.
   Cores trocadas para a paleta da marca (#D97757 e variações).
   ========================================================================= */

.aurora-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aurora-bg__layer {
  /* Paleta da marca */
  --bg-base:     #08090C;
  --aurora-1:    #E8915A;   /* laranja claro */
  --aurora-2:    #D97757;   /* accent principal */
  --aurora-3:    #C04E24;   /* laranja escuro */
  --aurora-4:    #E69173;   /* laranja hover */
  --aurora-5:    #8B3E1F;   /* laranja queimado */
  --transparent: transparent;

  --dark-gradient: repeating-linear-gradient(
    100deg,
    var(--bg-base) 0%,
    var(--bg-base) 7%,
    var(--transparent) 10%,
    var(--transparent) 12%,
    var(--bg-base) 16%
  );

  --aurora: repeating-linear-gradient(
    100deg,
    var(--aurora-1) 10%,
    var(--aurora-2) 15%,
    var(--aurora-3) 20%,
    var(--aurora-4) 25%,
    var(--aurora-5) 30%
  );

  position: absolute;
  inset: -10px;
  background-image: var(--dark-gradient), var(--aurora);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px);
  opacity: 0.42;
  will-change: transform;
  pointer-events: none;

  /* Máscara radial para fade nos cantos (igual ao original) */
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}

.aurora-bg__layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dark-gradient), var(--aurora);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora-shift 60s linear infinite;
  pointer-events: none;
}

@keyframes aurora-shift {
  0%   { background-position: 50% 50%, 50% 50%; }
  100% { background-position: 350% 50%, 350% 50%; }
}

/* Glow ambient laranja sobreposto (mantém o calor original do hero) */
.aurora-bg::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: 1200px;
  height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 60% 50% at 50% 30%,
    rgba(217, 119, 87, 0.16) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* Garante que o conteúdo do hero fique acima da aurora.
   O .orbit NÃO entra aqui: ele deve permanecer position:absolute
   (definido no style-v2.css) para não ocupar espaço no fluxo. */
.hero > .wrap,
.hero__inner {
  position: relative;
  z-index: 2;
}
/* Orbit fica acima da aurora mas abaixo do conteúdo, sem sair do absolute */
.hero > .orbit { z-index: 1; }

/* Reduz movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg__layer::after { animation: none; }
}

/* Mobile: reduz blur e opacidade para performance */
@media (max-width: 768px) {
  .aurora-bg__layer {
    filter: blur(8px);
    opacity: 0.35;
  }
}