/* Enhanced Gothic Coffee House styling */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&family=Playfair+Display:wght@400;700&family=Crimson+Text:wght@400;600&display=swap');

/* Global dark theme */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Crimson Text', serif;
  background: linear-gradient(135deg, #0B0B0B 0%, #2A2A2A 50%, #4A0E0E 100%);
  margin: 0;
  padding: 0;
}

/* Custom scrollbar with coffee theme */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #0B0B0B;
  border: 1px solid #3C2415;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4A0E0E, #3C2415);
  border-radius: 10px;
  border: 1px solid #C0C0C0;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3C2415, #C0C0C0);
}

/* Steam animation */
@keyframes steam {
  0% { opacity: 0.7; transform: translateY(0) scaleX(1); }
  50% { opacity: 0.9; transform: translateY(-10px) scaleX(1.1); }
  100% { opacity: 0.7; transform: translateY(-20px) scaleX(0.9); }
}

/* Candlelight flicker animation */
@keyframes flicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  25% { opacity: 0.8; filter: brightness(0.9); }
  50% { opacity: 0.9; filter: brightness(1.1); }
  75% { opacity: 0.85; filter: brightness(0.95); }
}

/* Floating animation for text */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Gothic hover effects */
.gothic-hover:hover {
  text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
  filter: brightness(1.2);
}

/* Gothic button with steam effect */
.gothic-button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.gothic-button:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -100%;
  width: 100%;
  height: calc(100% + 4px);
  background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.1), transparent);
  transition: left 0.6s;
}

.gothic-button:hover:before {
  left: 100%;
}

.gothic-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 14, 14, 0.4);
  filter: brightness(1.1);
}

/* Gothic card effects */
.gothic-card {
  transition: all 0.4s ease;
  background-clip: padding-box;
}

.gothic-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(74, 14, 14, 0.3), 0 0 20px rgba(192, 192, 192, 0.1);
  border-color: #C0C0C0;
}

/* Gothic input styling */
.gothic-input {
  transition: all 0.3s ease;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(74, 14, 14, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(60, 36, 21, 0.1) 0%, transparent 50%);
}

.gothic-input:focus {
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.2);
  background-color: #2A2A2A;
}

/* Candle flicker background effect */
.candle-flicker-bg {
  background: 
    radial-gradient(ellipse at center, rgba(245, 245, 220, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse at 25% 25%, rgba(192, 192, 192, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(74, 14, 14, 0.1) 0%, transparent 50%);
  animation: flicker 4s ease-in-out infinite;
}

/* Steam particles effect */
.steam-particles {
  background: 
    radial-gradient(circle at 10% 10%, rgba(245, 245, 220, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 30% 20%, rgba(245, 245, 220, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 60% 15%, rgba(245, 245, 220, 0.06) 0%, transparent 20%),
    radial-gradient(circle at 80% 25%, rgba(245, 245, 220, 0.04) 0%, transparent 15%);
  animation: steam 5s ease-in-out infinite;
}

/* Typography enhancements */
h1, h2, h3, h4 {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
}

/* Literary quote styling with gothic flair */
.literary-quote {
  position: relative;
  padding: 1.5rem 2.5rem;
  font-style: italic;
  background: linear-gradient(135deg, rgba(74, 14, 14, 0.2), rgba(60, 36, 21, 0.1));
  border: 1px solid rgba(192, 192, 192, 0.3);
}

.literary-quote:before {
  content: '"';
  font-size: 5rem;
  position: absolute;
  left: 0;
  top: -20px;
  color: rgba(192, 192, 192, 0.3);
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Coffee stain texture effects */
.coffee-stain-1 {
  background: 
    radial-gradient(ellipse 80px 40px at 20% 30%, rgba(60, 36, 21, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 120px 60px at 80% 70%, rgba(74, 14, 14, 0.2) 0%, transparent 50%);
}

/* Parchment texture with coffee stains */
.parchment-coffee {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(74, 14, 14, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(60, 36, 21, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 10%, rgba(245, 245, 220, 0.05) 0%, transparent 30%);
  background-color: #2A2A2A;
}

/* Ornate gothic borders */
.gothic-border {
  border: 2px solid;
  border-image: linear-gradient(45deg, #4A0E0E, #C0C0C0, #3C2415) 1;
  border-radius: 0;
}

/* Dark manuscript paper effect */
.manuscript-paper {
  background: 
    linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, transparent 2%),
    linear-gradient(rgba(245, 245, 220, 0.03) 1px, transparent 1px);
  background-size: 100% 1.2em;
  background-position: 0 0;
}

/* Coffee steam rising animation */
.coffee-steam {
  position: relative;
}

.coffee-steam:after {
  content: '☕';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 1.5rem;
  animation: steam 3s ease-in-out infinite;
  opacity: 0.7;
}

/* Midnight glow effect */
.midnight-glow {
  box-shadow: 
    0 0 20px rgba(74, 14, 14, 0.3),
    inset 0 0 20px rgba(192, 192, 192, 0.05);
  border: 1px solid rgba(245, 245, 220, 0.2);
}

/* Gothic loading animation */
@keyframes gothic-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 10px rgba(74, 14, 14, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.2);
  }
}

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

/* Dark theme selection styles */
::selection {
  background: rgba(74, 14, 14, 0.7);
  color: #F5F5DC;
}

::-moz-selection {
  background: rgba(74, 14, 14, 0.7);
  color: #F5F5DC;
}

/* Responsive gothic design */
@media (max-width: 768px) {
  .gothic-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .steam-particles {
    opacity: 0.5;
  }
  
  h1 {
    font-size: 2.5rem !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
}

/* Dark accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .steam-particles,
  .candle-flicker-bg,
  .animate-steam,
  .animate-flicker,
  .animate-float {
    animation: none;
  }
}