/* =========================================================
   CODERN
   Particle Background
   ========================================================= */


/* ---------------------------------------------------------
   PARTICLE BACKGROUND
   --------------------------------------------------------- */

.particle-background {
  position: fixed;
  inset: 0;

  /*
   * Particles stay behind all website content.
   * Do NOT use a negative z-index because that can place
   * the canvas behind the document/background.
   */
  z-index: var(--z-base);

  width: 100%;
  height: 100%;

  pointer-events: none;

  overflow: hidden;

  opacity: 0.32;

  /*
   * Transparent canvas.
   * The website background remains fully visible.
   */
  background: transparent;

  transition: opacity 0.4s ease;

  /*
   * Prevent unnecessary touch interaction.
   */
  user-select: none;

  /*
   * Keep rendering isolated from surrounding layout.
   */
  contain: strict;
}


/* ---------------------------------------------------------
   CANVAS
   --------------------------------------------------------- */

.particle-background canvas {
  display: block;

  width: 100%;
  height: 100%;

  pointer-events: none;

  background: transparent;
}


/* ---------------------------------------------------------
   DISABLED STATE
   --------------------------------------------------------- */

.particle-background.is-disabled {
  display: none;
}


/* ---------------------------------------------------------
   WEBSITE CONTENT
   ---------------------------------------------------------
   IMPORTANT:
   The header is intentionally NOT included here.

   The header has its own fixed positioning and z-index.
   Including .site-header in this rule would change it from
   fixed to relative and break the always-visible header.
   --------------------------------------------------------- */

.site-main,
.site-footer {
  position: relative;
  z-index: var(--z-base);
}


/* ---------------------------------------------------------
   HEADER SAFETY LAYER
   ---------------------------------------------------------
   The header must ALWAYS remain fixed while scrolling.

   This protects it from accidental positioning rules in
   other component stylesheets.
   --------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: var(--z-header);
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .particle-background {
    opacity: 0.16;

    transition: none;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {
  .particle-background {
    opacity: 0.22;
  }
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {
  .particle-background {
    opacity: 0.18;
  }
}


/* ---------------------------------------------------------
   HIGH CONTRAST / FORCED COLORS
   --------------------------------------------------------- */

@media (forced-colors: active) {
  .particle-background {
    display: none;
  }
}


/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */

@media print {
  .particle-background {
    display: none !important;
  }
}

/* =========================================================
   LIGHT THEME
   ---------------------------------------------------------
   Particle system remains fully functional.
   Only visual intensity is adjusted for the light theme.
   ========================================================= */

[data-theme="light"] .particle-background {
  opacity: 0.14;
}


/* ---------------------------------------------------------
   LIGHT THEME — REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .particle-background {
    opacity: 0.08;
  }
}


/* ---------------------------------------------------------
   LIGHT THEME — MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {
  [data-theme="light"] .particle-background {
    opacity: 0.11;
  }
}


/* ---------------------------------------------------------
   LIGHT THEME — SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {
  [data-theme="light"] .particle-background {
    opacity: 0.08;
  }
}