@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Audiowide&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Orbitron', monospace;
  background: linear-gradient(to bottom, #000000, #001122, #000000);
}

/* Chrome logo effect */
.logo-chrome {
  font-family: 'Audiowide', cursive;
  background: linear-gradient(45deg, #c0c0c0, #ffffff, #808080, #ffffff, #c0c0c0);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chrome-shine 3s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}

@keyframes chrome-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Orb styles */
.orb-golden {
  background: radial-gradient(circle at 30% 30%, #ffd700, #ffb347, #ff8c00);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.orb-green {
  background: radial-gradient(circle at 30% 30%, #32cd32, #228b22, #006400);
  box-shadow: 0 0 20px rgba(50, 205, 50, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.orb-blue-grid {
  background: 
    linear-gradient(45deg, transparent 48%, #00ffff 49%, #00ffff 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, #00ffff 49%, #00ffff 51%, transparent 52%),
    radial-gradient(circle at 30% 30%, #4169e1, #0000cd, #000080);
  background-size: 8px 8px, 8px 8px, 100% 100%;
  box-shadow: 0 0 20px rgba(65, 105, 225, 0.6);
  position: relative;
}

.orb-blue-grid::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #00ffff;
  border-radius: 50%;
  animation: orbital-ring 4s linear infinite;
}

@keyframes orbital-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orb-silver {
  background: radial-gradient(circle at 30% 30%, #e6e6e6, #c0c0c0, #808080);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3);
  position: relative;
}

.orb-silver::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 3px solid #ffd700;
  border-radius: 50%;
  animation: orbital-ring 6s linear infinite;
}

.orb-red {
  background: radial-gradient(circle at 30% 30%, #ff4500, #dc143c, #8b0000);
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3);
  position: relative;
}

.orb-red::before {
  content: '⚡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  color: #ffff00;
  text-shadow: 0 0 10px #ffff00;
}

.orb-green-textured {
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 30% 30%, #32cd32, #228b22, #006400);
  background-size: 4px 4px, 100% 100%;
  box-shadow: 0 0 20px rgba(50, 205, 50, 0.6);
}

.orb-blue-glossy {
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6), transparent 50%),
              radial-gradient(circle at 30% 30%, #4169e1, #0000cd, #000080);
  box-shadow: 0 0 20px rgba(65, 105, 225, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Announcement banner */
.announcement-burst {
  position: relative;
  animation: burst-glow 2s ease-in-out infinite alternate;
}

.announcement-glow {
  background: radial-gradient(circle, rgba(255, 0, 0, 0.3), transparent 70%);
  animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes burst-glow {
  from { box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
  to { box-shadow: 0 0 40px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 255, 0, 0.3); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Retro interface elements */
.retro-interface {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 128, 255, 0.1));
  border-image: linear-gradient(45deg, #00ffff, #0080ff) 1;
  backdrop-filter: blur(10px);
}

.retro-file-item {
  border-left: 4px solid #00ff00;
  background: linear-gradient(90deg, rgba(0, 255, 0, 0.1), transparent);
  transition: all 0.3s ease;
}

.retro-file-item:hover {
  background: linear-gradient(90deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.1));
  transform: translateX(4px);
}

/* Award badges */
.award-badge {
  position: relative;
  overflow: hidden;
}

.award-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: badge-shine 3s ease-in-out infinite;
}

@keyframes badge-shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

/* Custom animations */
.animate-spin-slow {
  animation: spin 8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-chrome {
    font-size: 3rem;
  }
  
  .absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  
  /* Mobile orb grid */
  body .absolute {
    position: static !important;
    display: inline-block;
    margin: 0.5rem;
  }
}

/* Utility classes for navy color */
.from-navy-900 {
  --tw-gradient-from: #001122;
}

.to-navy-900 {
  --tw-gradient-to: #001122;
}