/* BuenViaje: campaña El Transporte Presente, edición 180.
   Dos fuegos artificiales CSS sin JavaScript y sin GIF. */

/* The selectors below match the original code that worked on the Jannah menu. */
#main-nav a[href*="el-transporte-presente"],
.main-nav a[href*="el-transporte-presente"],
#theme-header a[href*="el-transporte-presente"] {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  background: linear-gradient(120deg, #8c102a, #d42b45, #9d1733) !important;
  color: #fff !important;
  border: 1px solid #f9cf6f !important;
  border-radius: 5px !important;
  box-shadow: 0 0 9px rgba(229,166,68,.75) !important;
  font-weight: 700 !important;
  animation: bv180-glow 2.4s ease-in-out infinite !important;
}

/* Keep the effects visible above nearby menu items when the theme permits it. */
#main-nav li:has(> a[href*="el-transporte-presente"]),
.main-nav li:has(> a[href*="el-transporte-presente"]),
#theme-header li:has(> a[href*="el-transporte-presente"]) {
  overflow: visible !important;
  position: relative;
  z-index: 50;
}

.bv180-effect {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 9 !important;
  display: block !important;
  font-size: 0;
  line-height: normal;
}

.bv180-burst {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.bv180-left { left: 12%; top: 15%; --bv-delay: 0s; }
.bv180-right { left: 89%; top: 75%; --bv-delay: 1.65s; }

.bv180-burst i {
  position: absolute !important;
  display: block !important;
  top: 0; left: 0;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--bv-color) !important;
  box-shadow: 0 0 5px 2px var(--bv-color), 0 0 13px 1px var(--bv-color) !important;
  opacity: 0;
  pointer-events: none;
  animation: bv180-particle 3.3s ease-out var(--bv-delay) infinite !important;
}

.bv180-core {
  position: absolute !important;
  display: block !important;
  top: -4px; left: -4px;
  width: 8px; height: 8px;
  border: 1.5px solid #fff5ac;
  border-radius: 50%;
  box-shadow: 0 0 16px #ffd700;
  opacity: 0;
  animation: bv180-flash 3.3s ease-out var(--bv-delay) infinite !important;
}

.bv180-star {
  position: absolute !important;
  display: block !important;
  color: #fff6b4;
  font-size: 14px !important;
  line-height: 1 !important;
  text-shadow: 0 0 9px #ffd700;
  pointer-events: none !important;
  animation: bv180-twinkle 1.4s ease-in-out infinite !important;
}
.bv180-star-one { right: 17%; top: -10px; }
.bv180-star-two { left: 22%; bottom: -11px; animation-delay: .7s !important; }

@keyframes bv180-glow {
  0%,100% { box-shadow: 0 0 5px #ddaa50, 0 0 10px #e5a64422; }
  50% { box-shadow: 0 0 13px #ffd96a, 0 0 23px #ffd96a88; }
}
@keyframes bv180-particle {
  0%,3% { transform: translate(-50%,-50%) scale(.15); opacity: 0; }
  7%,18% { opacity: 1; }
  33% { transform: translate(calc(var(--bv-x) * .9), calc(var(--bv-y) * .9)) scale(1.1); opacity: .95; }
  42%,100% { transform: translate(var(--bv-x), var(--bv-y)) scale(.1); opacity: 0; }
}
@keyframes bv180-flash {
  0%,4% { opacity: 0; transform: scale(.1); }
  8% { opacity: 1; transform: scale(1); }
  24% { opacity: .5; transform: scale(4); }
  37%,100% { opacity: 0; transform: scale(7); }
}
@keyframes bv180-twinkle {
  0%,100% { opacity: .2; transform: scale(.65); }
  50% { opacity: 1; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .bv180-effect { display:none !important; }
  #main-nav a[href*="el-transporte-presente"],
  .main-nav a[href*="el-transporte-presente"],
  #theme-header a[href*="el-transporte-presente"] { animation: none !important; }
}