/* Animated Icon Styles for Navigation */

/* Nav Icon Container */
.nav-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 18px;
}

/* GM Message - Envelope Animation */
@keyframes envelopeOpen {

  0%,
  100% {
    transform: scale(1) rotateX(0deg);
  }

  25% {
    transform: scale(1.1) rotateX(-15deg);
  }

  50% {
    transform: scale(1.15) rotateX(0deg);
  }

  75% {
    transform: scale(1.1) rotateX(15deg);
  }
}

@keyframes messagePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.animated-envelope {
  animation: envelopeOpen 3s ease-in-out infinite;
}

.nav-item:hover .animated-envelope {
  animation: messagePulse 0.6s ease-in-out infinite;
}

/* PCEE - Electricity Flow + Gear Rotation */
@keyframes electricFlow {

  0%,
  100% {
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffa500;
    transform: scale(1);
  }

  50% {
    text-shadow: 0 0 15px #ffff00, 0 0 25px #ff8c00;
    transform: scale(1.15);
  }
}

@keyframes gearRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animated-electric {
  animation: electricFlow 2s ease-in-out infinite;
}

.nav-item:hover .animated-electric {
  animation: electricFlow 0.8s ease-in-out infinite, gearRotate 3s linear infinite;
}

/* Rule Books - Book Open + Page Flip */
@keyframes bookOpen {

  0%,
  100% {
    transform: rotateY(0deg) scale(1);
  }

  25% {
    transform: rotateY(-20deg) scale(1.1);
  }

  50% {
    transform: rotateY(20deg) scale(1.1);
  }

  75% {
    transform: rotateY(-10deg) scale(1.05);
  }
}

@keyframes pageFlip {

  0%,
  100% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(-1);
  }
}

.animated-book {
  animation: bookOpen 4s ease-in-out infinite;
  display: inline-block;
}

.nav-item:hover .animated-book {
  animation: pageFlip 0.8s ease-in-out infinite;
}

/* Locomotives - Wheel Rotation + Headlight Blink */
@keyframes wheelRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes headlightBlink {

  0%,
  100% {
    filter: brightness(1);
    text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
  }

  50% {
    filter: brightness(1.5);
    text-shadow: 0 0 15px rgba(255, 255, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.7);
  }
}

.animated-train {
  animation: wheelRotate 3s linear infinite;
  display: inline-block;
}

.nav-item:hover .animated-train {
  animation: wheelRotate 1s linear infinite, headlightBlink 1.5s ease-in-out infinite;
}

/* Traffic - Signal Cycle (Red → Yellow → Green) */
@keyframes signalCycle {
  0% {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
  }

  33% {
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffaa00;
  }

  66% {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
  }

  100% {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
  }
}

.animated-signal {
  animation: signalCycle 3s linear infinite;
  display: inline-block;
}

.nav-item:hover .animated-signal {
  animation: signalCycle 1.5s linear infinite;
}

/* OHE - Current Flow + Pantograph Motion */
@keyframes currentFlow {

  0%,
  100% {
    transform: translateX(0px);
    filter: brightness(1);
  }

  25% {
    transform: translateX(2px);
    filter: brightness(1.3);
  }

  50% {
    transform: translateX(0px);
    filter: brightness(1.5);
  }

  75% {
    transform: translateX(-2px);
    filter: brightness(1.3);
  }
}

@keyframes pantographMove {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-3px);
  }
}

.animated-power {
  animation: currentFlow 2s ease-in-out infinite;
  display: inline-block;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
}

.nav-item:hover .animated-power {
  animation: currentFlow 1s ease-in-out infinite, pantographMove 1.5s ease-in-out infinite;
}

/* C & W - Wheel Rotate + Spanner Tap */
@keyframes gearSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spannerTap {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-4px) rotate(-15deg);
  }

  50% {
    transform: translateY(0px) rotate(0deg);
  }

  75% {
    transform: translateY(-2px) rotate(15deg);
  }
}

.animated-gear {
  animation: gearSpin 4s linear infinite;
  display: inline-block;
}

.nav-item:hover .animated-gear {
  animation: spannerTap 0.8s ease-in-out infinite;
}

/* P-Way - Track Draw + Hammer Tap */
@keyframes trackDraw {

  0%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }

  50% {
    transform: scaleX(1.1);
    opacity: 0.8;
  }
}

@keyframes hammerTap {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-5px) rotate(-20deg);
  }

  40% {
    transform: translateY(2px) rotate(5deg);
  }

  50% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animated-track {
  animation: trackDraw 3s ease-in-out infinite;
  display: inline-block;
}

.nav-item:hover .animated-track {
  animation: hammerTap 0.7s ease-in-out infinite;
}

/* SPAD Prevention - Red Signal Flash + Shield Lock */
@keyframes redFlash {

  0%,
  100% {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    transform: scale(1);
  }

  50% {
    color: #ff6666;
    text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
    transform: scale(1.2);
  }
}

@keyframes shieldLock {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1) rotate(-5deg);
  }

  50% {
    transform: scale(1.15);
  }

  75% {
    transform: scale(1.1) rotate(5deg);
  }
}

.animated-shield {
  animation: redFlash 2s ease-in-out infinite;
  display: inline-block;
}

.nav-item:hover .animated-shield {
  animation: shieldLock 0.6s ease-in-out infinite;
}

/* Hover Effects for All Animated Icons */
.nav-item:hover .nav-icon {
  transform-origin: center;
}

/* Pause animation when nav item is active */
.nav-item.active .nav-icon {
  animation-play-state: paused;
}

/* Mobile - Reduce animation intensity */
@media (max-width: 768px) {
  .nav-icon {
    font-size: 16px;
  }

  /* Simplify animations on mobile for performance */
  .animated-envelope,
  .animated-electric,
  .animated-book,
  .animated-train,
  .animated-signal,
  .animated-power,
  .animated-gear,
  .animated-track,
  .animated-shield {
    animation-duration: 4s;
  }
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}