/* ============================================
   TRAFFIC LIGHT LOGO ANIMATION
   Жинхэнэ гэрлэн дохио шиг улаан→шар→ногоон
   дараалан анивчина.
   ============================================ */

.tl-lights {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  vertical-align: middle;
}

.tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.25;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.tl-dot.tl-red {
  background: #f9564f;
}

.tl-dot.tl-yellow {
  background: #ffd166;
}

.tl-dot.tl-green {
  background: #22c55e;
}

/* Улаан гэрэл анивчих цаг хугацаа */
.tl-dot.tl-red {
  animation: tlBlinkRed 3s infinite;
}
.tl-dot.tl-yellow {
  animation: tlBlinkYellow 3s infinite;
}
.tl-dot.tl-green {
  animation: tlBlinkGreen 3s infinite;
}

@keyframes tlBlinkRed {
  0%, 5% {
    opacity: 1;
    box-shadow: 0 0 10px 2px rgba(249, 86, 79, 0.7);
  }
  33%, 100% {
    opacity: 0.25;
    box-shadow: none;
  }
}

@keyframes tlBlinkYellow {
  0%, 33% {
    opacity: 0.25;
    box-shadow: none;
  }
  38%, 43% {
    opacity: 1;
    box-shadow: 0 0 10px 2px rgba(255, 209, 102, 0.7);
  }
  66%, 100% {
    opacity: 0.25;
    box-shadow: none;
  }
}

@keyframes tlBlinkGreen {
  0%, 66% {
    opacity: 0.25;
    box-shadow: none;
  }
  71%, 95% {
    opacity: 1;
    box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.7);
  }
  100% {
    opacity: 0.25;
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .tl-lights {
    gap: 4px;
    margin-right: 6px;
    transform: scaleY(0.9);
    transform-origin: center;
  }
  .tl-dot {
    width: 11px;
    height: 11px;
  }
  .tl-dot.tl-red,
  .tl-dot.tl-yellow,
  .tl-dot.tl-green {
    box-shadow: none;
  }
}
/* Mobile дээр .logo-г main2.css нуудаг тул давхар зөвшөөрөх */
@media (max-width: 1000px) {
  .logo {
    display: flex !important;
    align-items: center;
  }
}