/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Consolidated site-wide styles */
:root {
  --wolf-dark: #1a0b1e;
  --wolf-purple: #4c1d4b;
  --wolf-red: #8b1a1a;
  --wolf-accent: #e74c3c;
  --autobot-blue: #0066cc;
  --decepticon-purple: #6a0dad;
  --autocon-cyan: #00bcd4;
}

body {
  font-family: 'Roboto', Verdana, sans-serif;
  background-color: white;
  color: black;
}

.wolf-bg {
  background: linear-gradient(135deg, var(--wolf-dark) 0%, var(--wolf-purple) 50%, #2d1b3d 100%);
  min-height: 100vh;
}

.faction-bg-autobot {
  background: linear-gradient(135deg, #0066cc 0%, #004499 50%, #87ceeb 100%);
}

.faction-bg-decepticon {
  background: linear-gradient(135deg, #6a0dad 0%, #4b0082 50%, #9932cc 100%);
}

.faction-bg-autocon {
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 50%, #80deea 100%);
}

.wolf-text {
  font-family: 'Creepster', cursive;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.tf-text {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
}

.glow-text {
  text-shadow: 0 0 20px currentColor;
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    text-shadow: 0 0 20px currentColor;
  }

  50% {
    text-shadow: 0 0 30px currentColor, 0 0 40px currentColor;
  }
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

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

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

.nav-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-5px) scale(1.02);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
}

.faction-card {
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.3s ease;
  border-radius: 15px;
  overflow: hidden;
}

.faction-card:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.char-card-placeholder {
  aspect-ratio: 16/9;
  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #888;
}

.hidden {
  display: none;
}