/* ===========================================================================
   fx.css — MÓDULO DE AMBIENTE. Brasas, resplandor que respira y barrido de luz.

   Por qué existe: las mismas tres animaciones estaban escritas TRES veces, una
   por hoja de estilo, con nombres distintos y valores apenas corridos:
     landing.css   tdp-fx-*     (piso .55, pico 1.08, brasa -88vh)
     rankings.css  tdp-rk-*     (piso .50, pico 1.07, brasa -92vh)
     cuenta.css    tdp-elf-*    (piso .55, pico 1.07, brasa -95vh)
   Tres copias que hay que tocar de a tres, y que ya empezaron a divergir sin
   que nadie lo decidiera.

   Acá hay UN solo juego de @keyframes, parametrizado por custom properties.
   Cada superficie declara sus valores en el contenedor del efecto y las
   variables bajan por herencia hasta los ::before/::after/brasas que animan.
   Ajustar el ambiente de una pantalla = cambiar cuatro números en un lugar.

   Los @keyframes NO llevan colores ni tamaños: eso es de cada superficie. Acá
   sólo vive el MOVIMIENTO.
   =========================================================================== */

/* Resplandor que respira. Asume un elemento centrado con
   `left:50%; top:X; transform: translate(-50%,-50%)`. */
@keyframes tdp-fx-breath {
  0%, 100% { opacity: var(--fx-respiro-piso, .55); transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(var(--fx-respiro-pico, 1.07)); }
}

/* Barrido de luz (god-ray). Idéntico en las tres superficies: sin parámetros,
   lo único que cambia es el gradiente y la duración, que las pone cada una. */
@keyframes tdp-fx-sweep {
  0%       { transform: translateX(-30%); opacity: 0; }
  40%, 60% { opacity: 1; }
  100%     { transform: translateX(30%); opacity: 0; }
}

/* Brasas subiendo. La altura y la deriva se parametrizan porque cada pantalla
   tiene distinto alto útil y distinta densidad de aire. */
@keyframes tdp-fx-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: var(--fx-brasa-entra, .9); }
  90%  { opacity: var(--fx-brasa-sale, .6); }
  100% { transform: translateY(var(--fx-brasa-alto, -90vh)) translateX(var(--fx-brasa-deriva, 16px)); opacity: 0; }
}

/* Destello de una sola pasada (acuse de recibo: el login validó, la puerta se
   abrió). Vive acá y no en cuenta.css porque sirve para cualquier confirmación. */
@keyframes tdp-fx-destello {
  0%   { opacity: 0; transform: scale(1.12); }
  14%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- presets por superficie ----------
   Los valores son EXACTAMENTE los que cada pantalla tenía antes de unificar:
   este módulo no cambia cómo se ve nada, sólo dónde vive. */

/* Portada: ambiente tenue detrás del texto, y el overlay otoñal brillante. */
.tdp-fx, .tdp-ingresar-fx {
  --fx-respiro-piso: .55; --fx-respiro-pico: 1.08;
  --fx-brasa-entra: .9;   --fx-brasa-sale: .6;
  --fx-brasa-alto: -88vh; --fx-brasa-deriva: 14px;
}
/* Tablero de rankings: la arena, un punto más contenida. */
.tdp-rk-fx {
  --fx-respiro-piso: .5;  --fx-respiro-pico: 1.07;
  --fx-brasa-entra: .85;  --fx-brasa-sale: .5;
  --fx-brasa-alto: -92vh; --fx-brasa-deriva: 16px;
}
/* /cuenta: el bosque de la Muse Elf, brasas más vivas y más altas. */
.tdp-elf-fondo {
  --fx-respiro-piso: .55; --fx-respiro-pico: 1.07;
  --fx-brasa-entra: .95;  --fx-brasa-sale: .55;
  --fx-brasa-alto: -95vh; --fx-brasa-deriva: 18px;
}

/* Ambiente de páginas de documento (/empezar, /agenda, /descargar): mismo
   módulo de movimiento que portada/rankings/cuenta, en su versión más tenue.
   Reglas propias y auto-contenidas (scope .tdp-ambiente-doc): NO dependen de
   landing.css, así funcionan en las páginas-doc que solo cargan base/fx/estilo/
   arte. Capa fija a z --z-escena (negativa: nunca pinta sobre el texto — ver la
   advertencia de la escalera de z-index en base.css). En móvil se apaga. */
.tdp-ambiente-doc {
  --fx-respiro-piso: .4; --fx-respiro-pico: 1.05;
  --fx-brasa-entra: .6;  --fx-brasa-sale: .35;
  --fx-brasa-alto: -70vh; --fx-brasa-deriva: 12px;
  position: fixed; inset: 0; z-index: var(--z-escena, -1);
  pointer-events: none; overflow: hidden;
}
.tdp-ambiente-doc::before { content: ""; position: absolute; left: 50%; top: 60%; width: 80vmax; height: 80vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,138,42,.05), rgba(216,162,74,.025) 40%, transparent 64%);
  animation: tdp-fx-breath 9s ease-in-out infinite; }
.tdp-ambiente-doc::after { content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 45%, rgba(240,200,119,.04) 50%, transparent 55%);
  animation: tdp-fx-sweep 16s ease-in-out infinite; }
.tdp-ambiente-doc .mote { position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,200,119,.6), rgba(216,162,74,0) 70%);
  filter: blur(.6px); opacity: 0; animation: tdp-fx-rise linear infinite; }
.tdp-ambiente-doc .mote:nth-child(3n) { background: radial-gradient(circle, rgba(255,138,42,.55), rgba(255,138,42,0) 70%); }
.tdp-ambiente-doc .mote:nth-child(1)  { left: 8%;  animation-duration: 13s; animation-delay: 0s; }
.tdp-ambiente-doc .mote:nth-child(2)  { left: 21%; animation-duration: 16s; animation-delay: 2s;  width: 3px; height: 3px; }
.tdp-ambiente-doc .mote:nth-child(3)  { left: 35%; animation-duration: 14s; animation-delay: 5s; }
.tdp-ambiente-doc .mote:nth-child(4)  { left: 49%; animation-duration: 17s; animation-delay: 1s;  width: 5px; height: 5px; }
.tdp-ambiente-doc .mote:nth-child(5)  { left: 62%; animation-duration: 15s; animation-delay: 7s;  width: 3px; height: 3px; }
.tdp-ambiente-doc .mote:nth-child(6)  { left: 74%; animation-duration: 16s; animation-delay: 3s; }
.tdp-ambiente-doc .mote:nth-child(7)  { left: 86%; animation-duration: 14s; animation-delay: 9s; }
.tdp-ambiente-doc .mote:nth-child(8)  { left: 93%; animation-duration: 18s; animation-delay: 4s;  width: 3px; height: 3px; }
.tdp-ambiente-doc .mote:nth-child(9)  { left: 28%; animation-duration: 17s; animation-delay: 11s; }
.tdp-ambiente-doc .mote:nth-child(10) { left: 67%; animation-duration: 15s; animation-delay: 6s;  width: 5px; height: 5px; }
@media (prefers-reduced-motion: reduce) { .tdp-ambiente-doc::before, .tdp-ambiente-doc::after, .tdp-ambiente-doc .mote { animation: none; } }
@media (max-width: 900px) { .tdp-ambiente-doc { display: none; } }