/* ============================================================
   FONDOS PARA LANDING MECHA — Opciones inspiradas en logo de llama
   ============================================================

   Cada opción puede activarse independientemente añadiendo la clase
   correspondiente al div .bg de index.html:

   <div class="bg bg-flames-rise">...</div>
   <div class="bg bg-heat-waves">...</div>
   <div class="bg bg-pulse-fire">...</div>
   <div class="bg bg-flicker-glow">...</div>
   <div class="bg bg-sparks-embers">...</div>
   <div class="bg bg-gradient-flow">...</div>

   Gradiente Mecha (del logo): #e0340e → #ff7a2e → #ffcf4a
   ============================================================ */

/* ------------------------------------------------------------
   1. FLAMES-RISE — Llamas ascendientes suaves
   ------------------------------------------------------------ */
.bg-flames-rise .orb {
  background: radial-gradient(ellipse at bottom, rgba(255,180,60,.7), transparent 70%);
  filter: blur(50px);
  animation: flameRise 8s ease-in-out infinite alternate;
}
.bg-flames-rise .orb.o1 { width: 300px; height: 500px; bottom: -100px; left: 10%; animation-delay: 0s; }
.bg-flames-rise .orb.o2 { width: 280px; height: 450px; bottom: -80px; left: 30%; animation-delay: -2s; opacity: .7; }
.bg-flames-rise .orb.o3 { width: 350px; height: 550px; bottom: -120px; left: 55%; animation-delay: -4s; opacity: .5; }
.bg-flames-rise .orb.o4 { width: 250px; height: 400px; bottom: -60px; left: 75%; animation-delay: -6s; opacity: .6; }

@keyframes flameRise {
  0% { transform: translateY(0) scaleY(1); opacity: .6; }
  50% { transform: translateY(-30px) scaleY(1.1); opacity: .8; }
  100% { transform: translateY(-10px) scaleY(.95); opacity: .5; }
}

/* ------------------------------------------------------------
   2. HEAT-WAVES — Ondas de calor sutiles
   ------------------------------------------------------------ */
.bg-heat-waves .orb { display: none; } /* desactivar orbs por defecto */
.bg-heat-waves::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 80px,
      rgba(255,150,50,.03) 80px,
      rgba(255,150,50,.03) 120px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(255,180,80,.02) 60px,
      rgba(255,180,80,.02) 100px
    );
  animation: heatShift 24s ease-in-out infinite alternate;
}

@keyframes heatShift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-30px, -20px); }
}

/* ------------------------------------------------------------
   3. PULSE-FIRE — Resplandor pulsante del logo
   ------------------------------------------------------------ */
.bg-pulse-fire .orb {
  width: 800px !important;
  height: 800px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(244,80,30,.15), rgba(255,150,50,.08), transparent 60%);
  animation: firePulse 6s ease-in-out infinite;
}
.bg-pulse-fire .orb.o1 { opacity: 1; }
.bg-pulse-fire .orb.o2, .bg-pulse-fire .orb.o3 { display: none; }

@keyframes firePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: .85; }
}

/* ------------------------------------------------------------
   4. FLICKER-GLOW — Llama que parpadea (como fuego real)
   ------------------------------------------------------------ */
.bg-flicker-glow .orb {
  width: 600px !important;
  height: 600px !important;
  top: 30% !important;
  left: 50% !important;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,120,30,.2), transparent 70%);
  animation: fireFlicker 3.5s ease-in-out infinite alternate;
}
.bg-flicker-glow .orb.o1 { opacity: 1; }
.bg-flicker-glow .orb.o2, .bg-flicker-glow .orb.o3 { display: none; }

@keyframes fireFlicker {
  0% { transform: translateX(-50%) scale(1) rotate(-1deg); opacity: .7; }
  30% { transform: translateX(-50%) scale(1.02) rotate(0.5deg); opacity: .85; }
  50% { transform: translateX(-50%) scale(.98) rotate(-0.5deg); opacity: .65; }
  70% { transform: translateX(-50%) scale(1.01) rotate(1deg); opacity: .8; }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: .75; }
}

/* ------------------------------------------------------------
   5. SPARKS-EMBERS — Brasas flameantes (desarrollado)
   ------------------------------------------------------------ */
.bg-sparks-embers .orb { display: none; }

/* Capa base: glow cálido del fuego */
.bg-sparks-embers::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,140,40,.15), transparent 50%),
    radial-gradient(ellipse at 20% 110%, rgba(255,160,50,.08), transparent 40%),
    radial-gradient(ellipse at 80% 115%, rgba(255,120,30,.1), transparent 45%);
  pointer-events: none;
}

/* Capa de brasas/chispas */
.bg-sparks-embers::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* Brasas grandes (naranja profundo) */
    radial-gradient(circle, rgba(255,140,40,.7) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,120,30,.6) 2.5px, transparent 2.5px),
    /* Brasas medianas (naranja brillante) */
    radial-gradient(circle, rgba(255,180,60,.8) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,160,50,.7) 1.8px, transparent 1.8px),
    /* Chispas pequeñas (amarillo/oro) */
    radial-gradient(circle, rgba(255,200,80,.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,220,100,.8) 1.2px, transparent 1.2px),
    /* Chispas diminutas (blanquecino, muy caliente) */
    radial-gradient(circle, rgba(255,240,180,.7) 0.8px, transparent 0.8px),
    /* Brasas con rastro (forma alargada) */
    radial-gradient(ellipse 3px 8px at center, rgba(255,150,40,.5), transparent);

  background-size:
    /* Espaciado variable para naturalidad */
    180px 280px, 320px 380px,
    240px 320px, 400px 450px,
    160px 260px, 280px 340px,
    200px 300px,
    150px 400px;

  background-position:
    /* Offset inicial distribuido */
    0 1000px, 120px 1080px,
    240px 1020px, 360px 1100px,
    80px 950px, 200px 1050px,
    320px 980px,
    150px 1120px;

  animation: emberFloat 28s linear infinite;
  opacity: .7;
}

/* Variación sutil en opacidad durante el ascenso */
@keyframes emberFloat {
  0% {
    background-position:
      0 1000px, 120px 1080px, 240px 1020px, 360px 1100px,
      80px 950px, 200px 1050px, 320px 980px, 150px 1120px;
  }
  100% {
    background-position:
      0 -400px, 120px -320px, 240px -380px, 360px -300px,
      80px -450px, 200px -350px, 320px -420px, 150px -280px;
  }
}

/* Efecto extra: chispas ocasionales más brillantes */
.bg-sparks-embers .ember-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(255,240,200,1), rgba(255,180,60,.8) 30%, transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  opacity: 0;
  animation: sparkFlash 8s ease-in-out infinite;
}

.bg-sparks-embers .ember-spark:nth-child(1) { bottom: 10%; left: 15%; animation-delay: 0s; }
.bg-sparks-embers .ember-spark:nth-child(2) { bottom: 20%; left: 45%; animation-delay: -2.5s; }
.bg-sparks-embers .ember-spark:nth-child(3) { bottom: 5%; left: 75%; animation-delay: -5s; }
.bg-sparks-embers .ember-spark:nth-child(4) { bottom: 15%; left: 85%; animation-delay: -1.5s; }
.bg-sparks-embers .ember-spark:nth-child(5) { bottom: 25%; left: 30%; animation-delay: -3.8s; }

@keyframes sparkFlash {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  10% { opacity: 0; transform: translateY(-5px) scale(0.8); }
  15% { opacity: 1; transform: translateY(-8px) scale(1.2); }
  25% { opacity: 0.8; transform: translateY(-15px) scale(1); }
  35% { opacity: 0; transform: translateY(-25px) scale(0.6); }
}

/* ------------------------------------------------------------
   6. GRADIENT-FLOW — Gradiente Mecha animado que fluye
   ------------------------------------------------------------ */
.bg-gradient-flow .orb { display: none; }
.bg-gradient-flow::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(224,52,14,.05) 20%,
    rgba(255,122,46,.08) 40%,
    rgba(255,207,74,.06) 60%,
    transparent 80%
  );
  animation: gradientFlow 18s ease-in-out infinite alternate;
}

@keyframes gradientFlow {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(15deg) scale(1.1); }
}

/* ------------------------------------------------------------
   COMBINACIÓN CON EL ACTUAL —叠加效果
   ------------------------------------------------------------ */
/* Para叠加 en el fondo actual: añadir clase +keep-base */
.bg-flames-rise.keep-base .orb,
.bg-pulse-fire.keep-base .orb,
.bg-flicker-glow.keep-base .orb {
  mix-blend-mode: screen;
}
.bg-heat-waves.keep-base::after,
.bg-gradient-flow.keep-base::before {
  mix-blend-mode: screen;
}