/* =========================================================================
   koodalanne — Background & decorative patterns
   Design language: "Neon Precision" — one signature graphic per composition.
   -------------------------------------------------------------------------
   Part of the Imagery layer. Every pattern derives from the same six motifs
   (grid · sunset · ocean · neon · concrete · pixels) and consumes tokens only.
   Keep them faint — atmosphere, not decoration. Requires tokens.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Miami grid
   ------------------------------------------------------------------------- */

.kd-grid {
  background-image:
    linear-gradient(var(--kd-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--kd-grid-line) 1px, transparent 1px);
  background-size: var(--kd-grid-size) var(--kd-grid-size);
}

/* Grid that dissolves toward the top — the "horizon" */
.kd-grid-horizon {
  background-image:
    linear-gradient(var(--kd-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--kd-grid-line) 1px, transparent 1px);
  background-size: var(--kd-grid-size) var(--kd-grid-size);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
          mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}

/* -------------------------------------------------------------------------
   Line fields
   ------------------------------------------------------------------------- */

/* Faint diagonal pink lines */
.kd-diagonal {
  background-image: repeating-linear-gradient(
    45deg, var(--kd-grid-line) 0 1px, transparent 1px 14px);
}

/* Subtle CRT scanlines */
.kd-scanline {
  background-image: repeating-linear-gradient(
    to bottom, rgba(236, 236, 238, 0.03) 0 1px, transparent 1px 3px);
}

/* Full-width thin neon horizon rule */
.kd-horizon-line {
  height: 1px;
  width: 100%;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--color-accent-secondary), transparent);
}

/* -------------------------------------------------------------------------
   Depth & framing
   ------------------------------------------------------------------------- */

/* Radial vignette — adds night-time depth to heroes / imagery */
.kd-vignette { position: relative; }
.kd-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 42%, rgba(12, 13, 18, 0.6) 100%);
}

/* Pixel corner ticks — pink, top-left + bottom-right */
.kd-ticks { position: relative; }
.kd-ticks::before,
.kd-ticks::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-color: var(--color-accent);
  border-style: solid;
}
.kd-ticks::before { top: 0; left: 0; border-width: var(--kd-border-thin) 0 0 var(--kd-border-thin); }
.kd-ticks::after { bottom: 0; right: 0; border-width: 0 var(--kd-border-thin) var(--kd-border-thin) 0; }

/* -------------------------------------------------------------------------
   Sunset washes (one per screen, low opacity)
   ------------------------------------------------------------------------- */

.kd-wash-sunset { background-image: var(--kd-gradient-sunset); }
.kd-wash-neon   { background-image: var(--kd-gradient-neon); }
.kd-wash-horizon{ background-image: var(--kd-gradient-horizon); }