@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:wght@400;600&display=swap');

.cinzel-font {
  font-family: 'Cinzel', serif;
}

.crimson-font {
  font-family: 'Crimson Text', serif;
}

.twilight-bg {
  background: linear-gradient(135deg, 
    #0f0f23 0%, 
    #1a1a2e 25%, 
    #16213e 50%, 
    #0f3460 75%, 
    #1a1a2e 100%);
  background-size: 400% 400%;
  animation: twilightShift 20s ease-in-out infinite;
}

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

.twilight-particles {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(138, 43, 226, 0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(138, 43, 226, 0.3), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255, 215, 0, 0.2), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: particles 15s linear infinite;
}

@keyframes particles {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-200px, -100px); }
}

.twilight-glow {
  text-shadow: 
    0 0 5px rgba(255, 215, 0, 0.5),
    0 0 10px rgba(255, 215, 0, 0.3),
    0 0 15px rgba(255, 215, 0, 0.2),
    0 0 20px rgba(255, 215, 0, 0.1);
  animation: subtleGlow 3s ease-in-out infinite alternate;
}

@keyframes subtleGlow {
  0% { 
    text-shadow: 
      0 0 5px rgba(255, 215, 0, 0.5),
      0 0 10px rgba(255, 215, 0, 0.3),
      0 0 15px rgba(255, 215, 0, 0.2);
  }
  100% { 
    text-shadow: 
      0 0 8px rgba(255, 215, 0, 0.7),
      0 0 15px rgba(255, 215, 0, 0.4),
      0 0 25px rgba(255, 215, 0, 0.3);
  }
}

.menu-border {
  border-radius: 8px;
  border: 1px solid rgba(79, 70, 229, 0.3);
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.4) 0%,
    rgba(30, 41, 59, 0.6) 50%,
    rgba(15, 23, 42, 0.4) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.3);
  position: relative;
}

.menu-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(45deg, 
    rgba(255, 215, 0, 0.3), 
    rgba(138, 43, 226, 0.2), 
    rgba(79, 70, 229, 0.3));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.menu-border:hover {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 20px rgba(255, 215, 0, 0.1);
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.5);
}

/* Focus styles for accessibility */
button:focus,
div[tabindex]:focus {
  outline: 2px solid rgba(255, 215, 0, 0.6);
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .twilight-particles {
    background-size: 150px 75px;
  }
  
  .menu-border {
    backdrop-filter: blur(5px);
  }
}

/* Prevent text selection on UI elements */
.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Loading animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu-border {
  animation: fadeIn 0.5s ease-out;
}