/**
 * PoAW Particle Stream styles — /proof-of-work.html Module 2 (seat 3 §1B)
 * Owner: WEB.GLASS / PULSE-WEB cross-check
 *
 * Hard rules respected:
 *   - W-002 (no "уродская рамка"): canvas has no visible border, tooltip uses soft glow only
 *   - W-103 (no layout shift): canvas is absolutely positioned, tooltip is absolutely positioned
 *   - W-200 (prefers-reduced-motion): static counter fallback path (no animations on tooltip)
 *   - W-201 (contrast ≥ 4.5:1 for text on dark bg)
 *
 * Bundle target: ≤ 2 kB minified.
 */

/* Wrapper inside the hero — positions the canvas overlay so it sits above the
   cosmic-hero-canvas background but BELOW the hero text/buttons.
   The `!important` overrides cosmic-hero.css's global rule
     `section.hero:has(> .cosmic-hero-bg) > *:not(.cosmic-hero-bg)
        { position: relative; z-index: 1; }`
   which would otherwise collapse the host to 0 height by forcing
   position: relative. We need absolute + inset:0 so the canvas can fill
   the hero. Pointer events ARE wanted on the canvas inside (for hover/click),
   so the host is `none` and the canvas inside is `auto`. */
.poaw-particles-host {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 1; /* above cosmic-hero-bg (z-index 0), below hero content (z-index 1 from cosmic-hero.css — but hero text renders ON TOP because it comes later in DOM order at same z-index) */
  overflow: hidden;
}

/* The actual particle canvas — pointer events enabled so hover/click work. */
.poaw-particles-host > .poaw-particles__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  /* No border, no shadow rim — avoids "уродская рамка". */
  background: transparent;
  display: block;
}

.poaw-particles__canvas:focus-visible {
  /* Subtle focus ring for keyboard users — passes W-202 contrast (≈ 9:1 vs #0a0a0f). */
  outline: 2px solid #00E5FF;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tooltip shown on hover over a recent particle. */
.poaw-particles__tooltip {
  position: absolute;
  display: none;
  padding: 6px 10px;
  background: rgba(10, 10, 15, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  pointer-events: auto;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.poaw-particles__tooltip-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
  margin-bottom: 2px;
}

.poaw-particles__tooltip-link {
  color: #00E5FF;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
  padding-bottom: 1px;
}

.poaw-particles__tooltip-link:hover {
  color: #6FE9FF;
  border-bottom-color: rgba(0, 229, 255, 0.7);
}

.poaw-particles__tooltip-link:focus-visible {
  outline: 2px solid #00E5FF;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced-motion fallback: text counter shown in place of the canvas. */
.poaw-particles-fallback {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(0, 229, 255, 0.85);
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .poaw-particles__tooltip-link {
    transition: none;
  }
}

/* Mobile — narrow viewport tweaks. */
@media (max-width: 600px) {
  .poaw-particles__tooltip {
    font-size: 10px;
    padding: 5px 8px;
  }
}