/* =========================================================
   STRYVEFIT — AMBIENTE V1.5 (FUNDO ANIMADO PREMIUM)
   =========================================================
   Linguagem visual (referência aprovada):

     fundo escuro
     + grandes massas luminosas vermelho-laranja desfocadas,
       entrando e saindo pelas bordas (aurora / névoa)
     + áreas pretas entre os glows
     + poeira clara esparsa em movimento lento

   SEM faixa diagonal / beam / raio de luz (efeito antigo
   removido visualmente: o span __beam fica desligado).

   Estrutura reutilizada (já presente nos HTMLs):

     <div class="sf-ambient" aria-hidden="true">
       <span class="sf-ambient__beam"></span>           (off)
       <span class="sf-ambient__orb sf-ambient__orb--one"></span>
       <span class="sf-ambient__orb sf-ambient__orb--two"></span>
       <span class="sf-ambient__dust"></span>
     </div>

   Ordem de camadas dentro do hero:
     1. foto/fundo existente          (.hero, inalterada)
     2. overlay escuro existente      (.hero-overlay, z 1)
     3. .sf-ambient (glows + poeira)  (z-index 2)
     4. conteúdo original             (.overlay, z 2 — pinta
        depois de .sf-ambient na ordem da árvore)

   A página de Oferta NÃO carrega este arquivo.

   CSS-only: apenas transform/opacity/background-position.
   Sem blur/filter animado, sem JS, sem bibliotecas.
   ========================================================= */


/* =========================================================
   CAMADA BASE
   ========================================================= */

.sf-ambient {
  position: absolute;
  inset: 0;

  z-index: 2;

  overflow: hidden;

  pointer-events: none;
}

.sf-ambient span {
  position: absolute;

  display: block;

  pointer-events: none;
}

/* faixa de luz do V1.3 — desativada (span preservado no HTML) */
.sf-ambient__beam {
  display: none;
}


/* =========================================================
   1) GLOW A — MASSA DEEP RED / RED-ORANGE
   Grande nuvem avermelhada começando parcialmente fora
   da lateral inferior esquerda. Deriva de 15s com
   múltiplos estágios (movimento fluido, não linear).
   ========================================================= */

.sf-ambient__orb--one {
  left: -38vw;
  bottom: -42vw;

  width: 108vw;
  height: 108vw;

  border-radius: 50%;

  /* normal: o VERMELHO precisa se destacar da foto
     laranja (screen diluía demais a cor) */
  mix-blend-mode: normal;

  will-change: transform, opacity;

  opacity: 0.68;

  /* duas camadas radiais no MESMO span = massa irregular,
     não um círculo reconhecível */
  background:
    radial-gradient(
      circle at 38% 42%,
      rgba(179, 38, 18, 0.78),
      rgba(143, 23, 13, 0.55) 38%,
      rgba(227, 66, 22, 0.34) 55%,
      transparent 72%
    ),
    radial-gradient(
      circle at 62% 60%,
      rgba(255, 101, 0, 0.16),
      transparent 64%
    );

  animation:
    amb-glow-a
    15s
    ease-in-out
    infinite;
}

/* Home — intensidade máxima do glow A (animação de opacidade
   é compartilhada; intensidade vem dos alphas do gradiente) */
body[data-pagina="index"] .sf-ambient__orb--one {
  background:
    radial-gradient(
      circle at 38% 42%,
      rgba(179, 38, 18, 0.88),
      rgba(143, 23, 13, 0.62) 38%,
      rgba(227, 66, 22, 0.40) 55%,
      transparent 72%
    ),
    radial-gradient(
      circle at 62% 60%,
      rgba(255, 101, 0, 0.20),
      transparent 64%
    );
}


/* =========================================================
   2) GLOW B — MASSA STRYVEFIT ORANGE
   Segunda nuvem, mais quente, começando parcialmente fora
   da lateral superior direita. Deriva oposta de 21s.
   ========================================================= */

.sf-ambient__orb--two {
  right: -32vw;
  top: -28vw;

  width: 92vw;
  height: 92vw;

  border-radius: 50%;

  mix-blend-mode: screen;

  will-change: transform, opacity;

  opacity: 0.58;

  background:
    radial-gradient(
      circle at 60% 36%,
      rgba(255, 101, 0, 0.66),
      rgba(255, 61, 0, 0.46) 40%,
      rgba(255, 122, 0, 0.24) 58%,
      transparent 74%
    ),
    radial-gradient(
      circle at 36% 62%,
      rgba(255, 150, 60, 0.20),
      transparent 60%
    );

  animation:
    amb-glow-b
    21s
    ease-in-out
    infinite;
}

/* Home — intensidade máxima do glow B */
body[data-pagina="index"] .sf-ambient__orb--two {
  background:
    radial-gradient(
      circle at 60% 36%,
      rgba(255, 101, 0, 0.74),
      rgba(255, 61, 0, 0.52) 40%,
      rgba(255, 122, 0, 0.28) 58%,
      transparent 74%
    ),
    radial-gradient(
      circle at 36% 62%,
      rgba(255, 150, 60, 0.24),
      transparent 60%
    );
}


/* =========================================================
   3) BRASAS / PARTÍCULAS DE FOGO CAINDO (FUNDO 3)
   Sistema em 3 camadas de profundidade, zero DOM extra:
     - .sf-ambient__dust          → brasas PEQUENAS (1–2px)
     - .sf-ambient__dust::before  → brasas MÉDIAS (3–5px, halo)
     - .sf-ambient__dust::after   → brasas GRANDES (6–10px,
       blur estático = perto da câmera)

   Cada camada cai de cima para baixo em velocidade própria,
   com leve deriva lateral e fade de opacidade nas pontas
   (o fade esconde o reset do loop — transição invisível).

   Pontos = radial-gradients no-repeat com posições
   irregulares (sem grade). Centro quente + borda
   vermelho-laranja: aparência de brasa incandescente.
   ========================================================= */

/* ------- CAMADA 1: BRASAS PEQUENAS (14 pontos) ------- */

.sf-ambient__dust {
  inset: 0;

  opacity: 0.85;

  will-change: transform;

  background-image:
    radial-gradient(circle, rgba(255, 208, 160, 0.95) 0%, rgba(255, 101, 0, 0.85) 35%, rgba(255, 61, 0, 0.40) 62%, transparent 75%),
    radial-gradient(circle, rgba(255, 122, 0, 0.90) 0%, rgba(255, 36, 0, 0.70) 45%, transparent 72%),
    radial-gradient(circle, rgba(255, 176, 102, 0.95) 0%, rgba(255, 101, 0, 0.80) 38%, transparent 70%),
    radial-gradient(circle, rgba(255, 61, 0, 0.95) 0%, rgba(179, 38, 18, 0.70) 48%, transparent 75%),
    radial-gradient(circle, rgba(255, 208, 160, 0.95) 0%, rgba(255, 122, 0, 0.82) 35%, transparent 72%),
    radial-gradient(circle, rgba(255, 101, 0, 0.95) 0%, rgba(255, 36, 0, 0.60) 50%, transparent 75%),
    radial-gradient(circle, rgba(255, 176, 102, 0.90) 0%, rgba(255, 61, 0, 0.75) 42%, transparent 72%),
    radial-gradient(circle, rgba(255, 122, 0, 0.92) 0%, rgba(227, 66, 22, 0.68) 46%, transparent 74%),
    radial-gradient(circle, rgba(255, 208, 160, 0.90) 0%, rgba(255, 101, 0, 0.78) 36%, transparent 72%),
    radial-gradient(circle, rgba(255, 61, 0, 0.92) 0%, rgba(255, 36, 0, 0.62) 48%, transparent 74%),
    radial-gradient(circle, rgba(255, 176, 102, 0.88) 0%, rgba(255, 101, 0, 0.72) 40%, transparent 72%),
    radial-gradient(circle, rgba(255, 101, 0, 0.88) 0%, rgba(179, 38, 18, 0.60) 50%, transparent 74%),
    radial-gradient(circle, rgba(255, 208, 160, 0.85) 0%, rgba(255, 122, 0, 0.70) 40%, transparent 72%),
    radial-gradient(circle, rgba(255, 36, 0, 0.90) 0%, rgba(179, 38, 18, 0.62) 50%, transparent 75%);

  background-size: 7px 7px;
  background-repeat: no-repeat;

  background-position:
    7% 4%, 19% 86%, 33% 21%, 47% 54%,
    58% 12%, 71% 77%, 83% 33%, 91% 60%,
    14% 48%, 39% 92%, 63% 41%, 77% 8%,
    26% 63%, 87% 71%;

  animation:
    embers-fall-small
    11s
    linear
    infinite;
}

/* ------- CAMADA 2: BRASAS MÉDIAS (8 pontos, halo suave) ------- */

.sf-ambient__dust::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.8;

  will-change: transform;

  background-image:
    radial-gradient(circle, rgba(255, 220, 170, 0.95) 0%, rgba(255, 101, 0, 0.85) 30%, rgba(255, 36, 0, 0.45) 55%, transparent 78%),
    radial-gradient(circle, rgba(255, 122, 0, 0.92) 0%, rgba(255, 61, 0, 0.70) 42%, transparent 75%),
    radial-gradient(circle, rgba(255, 208, 160, 0.92) 0%, rgba(255, 122, 0, 0.78) 34%, transparent 74%),
    radial-gradient(circle, rgba(255, 61, 0, 0.95) 0%, rgba(179, 38, 18, 0.68) 50%, transparent 78%),
    radial-gradient(circle, rgba(255, 208, 160, 0.90) 0%, rgba(255, 101, 0, 0.80) 32%, transparent 75%),
    radial-gradient(circle, rgba(255, 101, 0, 0.92) 0%, rgba(255, 36, 0, 0.62) 46%, transparent 76%),
    radial-gradient(circle, rgba(255, 176, 102, 0.88) 0%, rgba(255, 61, 0, 0.70) 42%, transparent 75%),
    radial-gradient(circle, rgba(255, 122, 0, 0.88) 0%, rgba(227, 66, 22, 0.62) 48%, transparent 76%);

  background-size: 20px 20px;
  background-repeat: no-repeat;

  background-position:
    11% 16%, 29% 67%, 44% 30%, 57% 79%,
    69% 9%, 81% 52%, 93% 25%, 36% 44%;

  animation:
    embers-fall-medium
    8s
    linear
    infinite;
}

/* ------- CAMADA 3: BRASAS GRANDES (5 pontos, blur estático) ------- */

.sf-ambient__dust::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.65;

  filter: blur(3px);

  will-change: transform;

  background-image:
    radial-gradient(circle, rgba(255, 220, 170, 0.85) 0%, rgba(255, 101, 0, 0.60) 35%, rgba(255, 36, 0, 0.28) 58%, transparent 80%),
    radial-gradient(circle, rgba(255, 150, 70, 0.80) 0%, rgba(255, 61, 0, 0.50) 42%, transparent 78%),
    radial-gradient(circle, rgba(255, 208, 160, 0.80) 0%, rgba(255, 122, 0, 0.55) 36%, transparent 78%),
    radial-gradient(circle, rgba(255, 101, 0, 0.78) 0%, rgba(179, 38, 18, 0.45) 50%, transparent 80%),
    radial-gradient(circle, rgba(255, 176, 102, 0.72) 0%, rgba(255, 61, 0, 0.48) 44%, transparent 78%);

  background-size: 54px 54px;
  background-repeat: no-repeat;

  background-position:
    16% 72%, 49% 18%, 74% 84%, 88% 45%, 5% 38%;

  animation:
    embers-fall-big
    6s
    linear
    infinite;
}

/* QUESTIONÁRIO (~80% da Home): mesmos pontos, mesmos
   movimentos, picos de opacidade reduzidos nas keyframes */
body[data-pagina]:not([data-pagina="index"]) .sf-ambient__dust {
  animation-name: embers-fall-small-soft;
}

body[data-pagina]:not([data-pagina="index"]) .sf-ambient__dust::before {
  animation-name: embers-fall-medium-soft;
}

body[data-pagina]:not([data-pagina="index"]) .sf-ambient__dust::after {
  animation-name: embers-fall-big-soft;
}

/* variantes SOFT — trajetórias idênticas, picos ~80% */
@keyframes embers-fall-small-soft {

  0% {
    transform: translate3d(0, -12%, 0);
    opacity: 0;
  }

  10% {
    opacity: 0.68;
  }

  50% {
    transform: translate3d(1.5%, 40%, 0);
  }

  88% {
    opacity: 0.64;
  }

  100% {
    transform: translate3d(3%, 112%, 0);
    opacity: 0;
  }

}

@keyframes embers-fall-medium-soft {

  0% {
    transform: translate3d(0, -14%, 0);
    opacity: 0;
  }

  9% {
    opacity: 0.64;
  }

  50% {
    transform: translate3d(-2%, 42%, 0);
  }

  87% {
    opacity: 0.58;
  }

  100% {
    transform: translate3d(-4%, 114%, 0);
    opacity: 0;
  }

}

@keyframes embers-fall-big-soft {

  0% {
    transform: translate3d(0, -16%, 0);
    opacity: 0;
  }

  12% {
    opacity: 0.52;
  }

  50% {
    transform: translate3d(2.5%, 44%, 0);
  }

  86% {
    opacity: 0.44;
  }

  100% {
    transform: translate3d(5%, 118%, 0);
    opacity: 0;
  }

}


/* =========================================================
   QUEDA DAS BRASAS — 3 velocidades (profundidade)
   Fade de opacidade nas pontas esconde o reset do loop.
   ========================================================= */

/* pequenas: mais lentas e mais distantes (deriva suave →) */
@keyframes embers-fall-small {

  0% {
    transform: translate3d(0, -12%, 0);
    opacity: 0;
  }

  10% {
    opacity: 0.85;
  }

  50% {
    transform: translate3d(1.5%, 40%, 0);
  }

  88% {
    opacity: 0.8;
  }

  100% {
    transform: translate3d(3%, 112%, 0);
    opacity: 0;
  }

}

/* médias: mais rápidas, deriva ← sutil */
@keyframes embers-fall-medium {

  0% {
    transform: translate3d(0, -14%, 0);
    opacity: 0;
  }

  9% {
    opacity: 0.8;
  }

  50% {
    transform: translate3d(-2%, 42%, 0);
  }

  87% {
    opacity: 0.72;
  }

  100% {
    transform: translate3d(-4%, 114%, 0);
    opacity: 0;
  }

}

/* grandes: perto da câmera, deriva mais larga */
@keyframes embers-fall-big {

  0% {
    transform: translate3d(0, -16%, 0);
    opacity: 0;
  }

  12% {
    opacity: 0.65;
  }

  50% {
    transform: translate3d(2.5%, 44%, 0);
  }

  86% {
    opacity: 0.55;
  }

  100% {
    transform: translate3d(5%, 118%, 0);
    opacity: 0;
  }

}


/* =========================================================
   4) PÁGINA DE SUCESSO — VERSÃO CALMA
   Camada fixa (a página tem scroll), somente glows + poeira.
   Conteúdo (z 2+) e header (z 20) ficam acima desta camada.
   ========================================================= */

body.success-page .sf-ambient--page {
  position: fixed;

  z-index: 1;
}

body.success-page .sf-ambient__orb--one {
  background:
    radial-gradient(
      circle at 38% 42%,
      rgba(179, 38, 18, 0.46),
      rgba(143, 23, 13, 0.32) 38%,
      rgba(227, 66, 22, 0.18) 55%,
      transparent 72%
    ),
    radial-gradient(
      circle at 62% 60%,
      rgba(255, 101, 0, 0.10),
      transparent 64%
    );

  animation:
    amb-glow-a-calm
    19s
    ease-in-out
    infinite;
}

body.success-page .sf-ambient__orb--two {
  background:
    radial-gradient(
      circle at 60% 36%,
      rgba(255, 101, 0, 0.42),
      rgba(255, 61, 0, 0.28) 40%,
      rgba(255, 122, 0, 0.14) 58%,
      transparent 74%
    ),
    radial-gradient(
      circle at 36% 62%,
      rgba(255, 150, 60, 0.12),
      transparent 60%
    );

  animation:
    amb-glow-b-calm
    26s
    ease-in-out
    infinite;
}

/* SUCCESS (~50%): sem a camada de brasas grandes e com
   picos de opacidade reduzidos — versão elegante */
body.success-page .sf-ambient__dust {
  animation: embers-fall-small-calm 13s linear infinite;
}

body.success-page .sf-ambient__dust::before {
  animation: embers-fall-medium-calm 10s linear infinite;
}

body.success-page .sf-ambient__dust::after {
  display: none;
}

@keyframes embers-fall-small-calm {

  0% {
    transform: translate3d(0, -12%, 0);
    opacity: 0;
  }

  10% {
    opacity: 0.42;
  }

  50% {
    transform: translate3d(1.5%, 40%, 0);
  }

  88% {
    opacity: 0.38;
  }

  100% {
    transform: translate3d(3%, 112%, 0);
    opacity: 0;
  }

}

@keyframes embers-fall-medium-calm {

  0% {
    transform: translate3d(0, -14%, 0);
    opacity: 0;
  }

  9% {
    opacity: 0.40;
  }

  50% {
    transform: translate3d(-2%, 42%, 0);
  }

  87% {
    opacity: 0.34;
  }

  100% {
    transform: translate3d(-4%, 114%, 0);
    opacity: 0;
  }

}

/* variantes calmas: mesma trajetória, opacidade pela metade */
@keyframes amb-glow-a-calm {

  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.30;
  }

  25% {
    transform: translate3d(18vw, -12vh, 0) scale(1.14);
    opacity: 0.46;
  }

  50% {
    transform: translate3d(30vw, 5vh, 0) scale(0.94);
    opacity: 0.36;
  }

  75% {
    transform: translate3d(11vw, 14vh, 0) scale(1.07);
    opacity: 0.48;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.30;
  }

}

@keyframes amb-glow-b-calm {

  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.26;
  }

  30% {
    transform: translate3d(-16vw, 14vh, 0) scale(1.10);
    opacity: 0.40;
  }

  55% {
    transform: translate3d(-28vw, 4vh, 0) scale(0.93);
    opacity: 0.32;
  }

  80% {
    transform: translate3d(-9vw, 18vh, 0) scale(1.06);
    opacity: 0.42;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.26;
  }

}


/* =========================================================
   MOVIMENTO — keyframes multi-estágio (fluido, sem sensação
   robótica). Glows entram/saem pelas bordas e respiram em
   opacity; entre eles sobra área preta da foto.
   ========================================================= */

/* glow A: sobe para a direita e retorna, respirando */
@keyframes amb-glow-a {

  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }

  25% {
    transform: translate3d(18vw, -12vh, 0) scale(1.14);
    opacity: 0.85;
  }

  50% {
    transform: translate3d(30vw, 5vh, 0) scale(0.94);
    opacity: 0.68;
  }

  75% {
    transform: translate3d(11vw, 14vh, 0) scale(1.07);
    opacity: 0.90;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }

}

/* glow B: desce para a esquerda na direção oposta */
@keyframes amb-glow-b {

  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.45;
  }

  30% {
    transform: translate3d(-16vw, 14vh, 0) scale(1.10);
    opacity: 0.72;
  }

  55% {
    transform: translate3d(-28vw, 4vh, 0) scale(0.93);
    opacity: 0.58;
  }

  80% {
    transform: translate3d(-9vw, 18vh, 0) scale(1.06);
    opacity: 0.78;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.45;
  }

}


/* =========================================================
   MOBILE — efeito continua visível, apenas ~10–15% mais sutil
   ========================================================= */

@media (max-width: 768px) {

  .sf-ambient__orb--one {
    width: 118vw;
    height: 118vw;

    background:
      radial-gradient(
        circle at 38% 42%,
        rgba(179, 38, 18, 0.70),
        rgba(143, 23, 13, 0.50) 38%,
        rgba(227, 66, 22, 0.30) 55%,
        transparent 72%
      ),
      radial-gradient(
        circle at 62% 60%,
        rgba(255, 101, 0, 0.14),
        transparent 64%
      );
  }

  body[data-pagina="index"] .sf-ambient__orb--one {
    background:
      radial-gradient(
        circle at 38% 42%,
        rgba(179, 38, 18, 0.78),
        rgba(143, 23, 13, 0.56) 38%,
        rgba(227, 66, 22, 0.35) 55%,
        transparent 72%
      ),
      radial-gradient(
        circle at 62% 60%,
        rgba(255, 101, 0, 0.18),
        transparent 64%
      );
  }

  .sf-ambient__orb--two {
    width: 100vw;
    height: 100vw;

    background:
      radial-gradient(
        circle at 60% 36%,
        rgba(255, 101, 0, 0.58),
        rgba(255, 61, 0, 0.40) 40%,
        rgba(255, 122, 0, 0.21) 58%,
        transparent 74%
      ),
      radial-gradient(
        circle at 36% 62%,
        rgba(255, 150, 60, 0.17),
        transparent 60%
      );
  }

  body[data-pagina="index"] .sf-ambient__orb--two {
    background:
      radial-gradient(
        circle at 60% 36%,
        rgba(255, 101, 0, 0.66),
        rgba(255, 61, 0, 0.46) 40%,
        rgba(255, 122, 0, 0.24) 58%,
        transparent 74%
      ),
      radial-gradient(
        circle at 36% 62%,
        rgba(255, 150, 60, 0.21),
        transparent 60%
      );
  }

  /* mobile: brasas visíveis, ~10–15% mais suaves
     (todas as páginas usam as variantes "soft") */
  .sf-ambient__dust {
    animation-name: embers-fall-small-soft;
  }

  .sf-ambient__dust::before {
    animation-name: embers-fall-medium-soft;
  }

  .sf-ambient__dust::after {
    animation-name: embers-fall-big-soft;
  }

  body.success-page .sf-ambient__dust {
    animation-name: embers-fall-small-calm;
  }

  body.success-page .sf-ambient__dust::before {
    animation-name: embers-fall-medium-calm;
  }

}


/* =========================================================
   ACESSIBILIDADE — prefers-reduced-motion
   Movimento para; glows e poeira permanecem estáticos
   e visíveis (visual cinematográfico preservado).
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sf-ambient__beam,
  .sf-ambient__orb--one,
  .sf-ambient__orb--two,
  .sf-ambient__dust,
  .sf-ambient__dust::before,
  .sf-ambient__dust::after {
    animation: none;
  }

}