/* ============================================================================
   POCKET FULL OF DRONES — Signature visual devices
   Load AFTER colors_and_type.css. Self-contained (grain is an inline data-URI),
   so these classes work even if assets/ isn't copied along.

   THREE motifs, in priority order:
     1. GRAIN        fine film/print noise over everything (always present)
     2. SIGNAL FIELD vertical scanline gradient — the hero device
     3. BLOCK MASK   modular orange/black blocks that fragment type & imagery
   ============================================================================ */

/* ---- 1. GRAIN -------------------------------------------------------------
   Drop <div class="pfod-grain"></div> as a sibling, or add .pfod-grain-host
   to a positioned container to get an ::after grain layer automatically. */
.pfod-grain,
.pfod-grain-host::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.pfod-grain-host { position: relative; }
.pfod-grain--strong { opacity: 0.8; }
.pfod-grain--soft   { opacity: 0.28; }

/* ---- 2. SIGNAL FIELD (vertical scanlines through the brand gradient) -------
   The hero visual. A gradient veiled by thin vertical lines — CRT/oscilloscope.
   Use behind covers, logo lockups, empty hero space. NEVER directly behind body
   copy (keep text on solid black beside it, or over the darkest band). */
.pfod-signal-field {
  position: relative;
  background:
    /* vertical scanlines */
    repeating-linear-gradient(90deg,
      rgba(2,3,5,0)    0px,
      rgba(2,3,5,0)    2px,
      rgba(2,3,5,0.55) 2px,
      rgba(2,3,5,0.55) 4px),
    /* brand gradient underneath */
    linear-gradient(0deg, #FF4E1B 0%, #C10801 52%, #3a0602 78%, #020305 100%);
  background-size: 4px 100%, 100% 100%;
}
/* Horizontal sweep variant (signal travelling left→right) */
.pfod-signal-field--h {
  background:
    repeating-linear-gradient(90deg,
      rgba(2,3,5,0)    0px,
      rgba(2,3,5,0)    2px,
      rgba(2,3,5,0.55) 2px,
      rgba(2,3,5,0.55) 4px),
    linear-gradient(90deg, #020305 0%, #3a0602 30%, #C10801 70%, #FF4E1B 100%);
  background-size: 4px 100%, 100% 100%;
}

/* Thin scanline texture only (no gradient) — overlay for panels/imagery */
.pfod-scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.35) 2px, rgba(0,0,0,0.35) 3px);
  z-index: 2;
}

/* ---- 3. BLOCK MASK (modular pixel blocks on a grid) -----------------------
   A grid of cells; fill some with black/lava/gunmetal to fragment whatever
   sits beneath (type, imagery). Pair with .pfod-signal-field for the hero. */
.pfod-block-grid {
  display: grid;
  grid-template-columns: repeat(var(--blk-cols, 12), 1fr);
  grid-auto-rows: var(--blk-row, 1fr);
  gap: 0;
}
.pfod-blk         { background: transparent; }
.pfod-blk--black  { background: var(--pfod-black); }
.pfod-blk--lava   { background: var(--pfod-lava); }
.pfod-blk--gun    { background: var(--pfod-gunmetal); }
.pfod-blk--ash    { background: var(--pfod-ash); }

/* Pixelated edge: a column of offset blocks used to "dissolve" an image edge */
.pfod-dither-edge {
  --c: var(--pfod-black);
  background:
    linear-gradient(90deg, var(--c) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(90deg, transparent 75%, var(--c) 75%) 0 8px / 8px 8px;
}

/* ---- MOTION: slow signal drift (optional, respects reduced-motion) -------- */
@keyframes pfod-scan-drift { to { background-position: 4px 0, 0 0; } }
.pfod-signal-field--live { animation: pfod-scan-drift 0.9s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) {
  .pfod-signal-field--live { animation: none; }
}

/* ---- DIVIDERS / RULES ------------------------------------------------------ */
.pfod-rule       { height: 1px; background: var(--pfod-border); border: 0; }
.pfod-rule--lava { height: 2px; background: var(--pfod-lava); border: 0; }
.pfod-tick {  /* short accent tick used to flag the one accent per view */
  display: inline-block; width: 10px; height: 10px; background: var(--pfod-lava);
}