/* himitsu-bako-cyberpunk-atmosphere.css — the Himitsu-bako cyberpunk skin's
   page-level atmosphere (JUNE-346).

   Component-only skin: run-app-bar/run-header chrome falls back to the default
   skin (chrome components do not support dynamic skin loading yet; tracked
   separately). This atmosphere targets the page background only.

   Architecture note: served from public/, linked in index.html after tokens.css
   (reads --run-color-* tokens). Scoped to
   html[data-run-skin="himitsu-bako-cyberpunk"] — always loaded, activates only
   when the skin is selected. Mirrors the glassmorphism-atmosphere.css pattern.

   Palette anchors on the same --him-cyber-neon-color custom property the
   component skins use (set by the vocabulary's :host defaults to #39ff14 / neon
   green). Falls back to hard cyberpunk literals when the token is absent (e.g.
   before any component has upgraded). */

html[data-run-skin="himitsu-bako-cyberpunk"] {
  /* Near-black field — the canonical cyberpunk dark base. */
  background-color: #0a0a0f;

  /* Null the shell's opaque canvas so the atmosphere shows through the chrome. */
  --run-app-shell-background: transparent;

  /* Neon color anchors — mirror the vocabulary's :host defaults so the atmosphere
     reads from the same palette as the component canvases. */
  --cyber-atm-neon:    #39ff14;
  --cyber-atm-accent:  #ff003c;
  --cyber-atm-purple:  #7b00ff;
  --cyber-atm-scanline: rgba(0, 255, 200, 0.03);
}

/* Viewport-anchored decoration layer. position:fixed so it pins to the viewport
   and is sampled cleanly by backdrop-filter (no Chromium fixed-attachment seam).
   z-index:-1 puts it above the root canvas base colour, behind all page content.
   pointer-events: none so it never intercepts input. */
html[data-run-skin="himitsu-bako-cyberpunk"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Scan-line grid: subtle horizontal lines + a vertical neon stripe on each side,
     composed from three transparent gradient layers over the dark field.
     Pure CSS — no images, no external resources. */
  background-image:
    /* Horizontal scan lines — very low opacity, tight repeat */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      var(--cyber-atm-scanline) 3px,
      var(--cyber-atm-scanline) 4px
    ),
    /* Left-edge neon bloom */
    radial-gradient(
      ellipse 30rem 60rem at 0% 40%,
      color-mix(in srgb, var(--cyber-atm-purple) 18%, transparent),
      transparent 70%
    ),
    /* Right-edge neon bloom */
    radial-gradient(
      ellipse 30rem 60rem at 100% 60%,
      color-mix(in srgb, var(--cyber-atm-accent) 14%, transparent),
      transparent 70%
    ),
    /* Top-centre neon glow (the "sky" of the cyberpunk city) */
    radial-gradient(
      ellipse 80rem 30rem at 50% 0%,
      color-mix(in srgb, var(--cyber-atm-neon) 10%, transparent),
      transparent 65%
    );
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}