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

.tl-lights {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  vertical-align: middle;
}

/* Хажуугийн хуучин logo зургийг нуух */
.logo img {
  display: none;
}

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

.tl-dot:not(:first-child) {
  margin-left: -8px;
}

.tl-dot.tl-red { z-index: 3; position: relative; }
.tl-dot.tl-yellow { z-index: 2; position: relative; }
.tl-dot.tl-green { z-index: 1; position: relative; }

.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-dot {
    width: 22px;
    height: 22px;
  }
  .tl-dot:not(:first-child) {
    margin-left: -13px;
  }
}