/*
 * NATGAS — Easter egg "Fuegos artificiales" de Independencia de México.
 * v1 (2026-09-15)
 *
 * Vigencia: 2026-09-15T00:00:00 a 2026-09-17T23:59:59 (hora local del
 * visitante), controlada por JS en assets/js/mx-independence-fireworks.v1.js.
 * Vive únicamente en el home (index.php / index-Natgas.php).
 *
 * Diseño "no intrusivo": el overlay es pointer-events:none en todo momento
 * (nunca bloquea clics ni scroll), no oscurece la página (sin backdrop),
 * y las explosiones se ubican en el tercio superior de la pantalla lejos
 * del centro, para no tapar títulos/CTAs. Se dispara una sola vez por
 * carga de página (ver SCROLL_THRESHOLD en el JS) — no interrumpe cada
 * vez que el usuario mueve el scroll.
 */

@media (prefers-reduced-motion: reduce) {
  .ng-fw-overlay { display: none !important; }
}

.ng-fw-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990; /* por encima del header/doodle (máx. 205) pero pointer-events:none */
  pointer-events: none;
  overflow: hidden;
}

.ng-fw-flash {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0) 70%);
  animation: ng-fw-flash .45s ease-out forwards;
}
@keyframes ng-fw-flash {
  0%   { opacity: .95; transform: translate(-50%, -50%) scale(.2); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(7); }
}

.ng-fw-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow: 0 0 4px 1px currentColor;
  animation: ng-fw-particle-fly var(--fw-dur, 1.1s) cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes ng-fw-particle-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--dist)) scale(.35); }
}

@media (max-width: 575px) {
  .ng-fw-particle { width: 5px; height: 5px; }
}