/*
 * NATGAS — Easter egg "Morph de Halloween" del ícono/flor del submenú
 * secundario (assets/includes/sub-menu.php).
 * v1 (2026-09-29)
 *
 * Vigencia: 2026-09-29T00:00:00 a 2026-10-31T23:59:59 (hora local del
 * visitante), controlada por JS en assets/js/mx-halloween-icon-morph.v1.js.
 * sub-menu.php es un include COMPARTIDO por casi todo el sitio (home,
 * empresas, GNC, biometano, estaciones móviles, nosotros, etc.) — a
 * diferencia del doodle del logo (solo home), este easter egg aparece en
 * todas esas páginas a la vez, por diseño.
 *
 * Técnica de "morph": no es un morph vectorial real (los 4 íconos son PNG
 * rasterizados, no SVG con la misma cantidad de puntos de trazo) — se
 * simula con blur+scale+fade en dos fases sobre el mismo <img> (se oculta
 * con blur/escala, se cambia el src en opacidad 0, y se revela con
 * blur/escala inverso). Ilusión de transformación convincente sin
 * necesitar vectores.
 */

@media (prefers-reduced-motion: reduce) {
  .ng-hw-active { display: none !important; } /* marcador, ver JS: con reduced-motion el script no hace nada */
}

.subnav-cover .icon {
  cursor: pointer;
}
.subnav-cover .icon:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 8px;
}

.subnav-cover .icon img.ng-hw-morph-out {
  animation: ng-hw-morph-out .25s ease-in forwards;
}
.subnav-cover .icon img.ng-hw-morph-in {
  animation: ng-hw-morph-in .25s ease-out forwards;
}

@keyframes ng-hw-morph-out {
  0%   { opacity: 1; filter: blur(0px); transform: scale(1); }
  100% { opacity: 0; filter: blur(6px); transform: scale(1.35); }
}
@keyframes ng-hw-morph-in {
  0%   { opacity: 0; filter: blur(6px); transform: scale(0.6); }
  100% { opacity: 1; filter: blur(0px); transform: scale(1); }
}