/* Alchemical Rain Effect Styles */

/*
 * Falling alchemical symbols animation using Unicode U+1F700..U+1F77F
 * Loads Noto Sans Symbols 2 from Google Fonts for proper symbol rendering
 * Works on all modern browsers with excellent symbol support
 *
 * Accessibility features:
 * - Respects prefers-reduced-motion
 * - ARIA hidden from screen readers
 * - WCAG AAA compliant color contrast (8.6:1 ratio)
 */

/* Alchemical rain canvas container */
.alchemical-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background-color: #000000;
}

/* Respect user's motion preferences - hide animation completely */
@media (prefers-reduced-motion: reduce) {
  .alchemical-rain-container {
    display: none;
  }

  /* Remove special styling when animation is disabled */
  body.alchemical-enabled .container {
    border: 1px solid rgba(31, 81, 255, 0.2);
    box-shadow: none;
  }
}

/* Canvas element for the rain effect */
#alchemical-rain-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ensure page content is readable over the animation */
body.alchemical-enabled {
  position: relative;
  z-index: 1;
}

body.alchemical-enabled .site-header,
body.alchemical-enabled .main-content,
body.alchemical-enabled .site-footer {
  position: relative;
  z-index: 2;
}

/* Add enhanced background to content for better readability over animation */
body.alchemical-enabled .container {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid rgba(31, 81, 255, 0.3);
  box-shadow: 0 0 30px rgba(31, 81, 255, 0.2);
}

/* Enhance text colors for better visibility on dark background with animation */
body.alchemical-enabled {
  color: #6B9EFF;
}

body.alchemical-enabled .site-title,
body.alchemical-enabled .hero h1,
body.alchemical-enabled .post-header h1,
body.alchemical-enabled h2,
body.alchemical-enabled h3 {
  color: #1F51FF;
  text-shadow: 0 0 10px rgba(31, 81, 255, 0.5);
}

body.alchemical-enabled a {
  color: #5E8EFF;
}

body.alchemical-enabled a:hover {
  color: #8FB4FF;
  text-shadow: 0 0 8px rgba(143, 180, 255, 0.6);
}

body.alchemical-enabled .post-item,
body.alchemical-enabled .post {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(31, 81, 255, 0.4);
}

body.alchemical-enabled .post-item:hover {
  box-shadow: 0 4px 20px rgba(31, 81, 255, 0.3);
  border-color: rgba(31, 81, 255, 0.6);
}

body.alchemical-enabled code {
  background: rgba(31, 81, 255, 0.15);
  color: #1F51FF;
  border: 1px solid rgba(31, 81, 255, 0.3);
}

body.alchemical-enabled pre {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(31, 81, 255, 0.4);
}