/* Background atmosphere: dark cinematic gradients with a fine, static film grain.
   The grain is a small SVG noise tile of sparse, faint light specks (about 3
   levels of variation, lifting the graphite base by about 1 level). It is used
   only on the home's DJ directory and on the profiles' "Sobre el artista" and
   gallery sections, always as a background, so it never covers photos, text,
   cards or forms. No animation and no blend modes. */

:root {
  --film-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .4 0 0 0 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
}

/* Page canvas: a fixed atmospheric haze behind every element (z-index -1 over
   the canvas, which carries the body's own gradients). It replaces the old,
   nearly invisible full-page noise layer of body::before; no grain here. */
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(80% 60% at 6% 0%, rgba(18, 58, 124, .24) 0%, rgba(18, 58, 124, 0) 70%),
    radial-gradient(65% 55% at 100% 30%, rgba(76, 38, 146, .18) 0%, rgba(76, 38, 146, 0) 70%),
    radial-gradient(85% 55% at 26% 104%, rgba(0, 88, 116, .18) 0%, rgba(0, 88, 116, 0) 70%),
    radial-gradient(130% 95% at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(2, 2, 6, .5) 100%);
}

/* Home: grain behind the DJ cards only, fading in and out at the section edges.
   The cards are opaque, so it shows only between and around them. */
html body .directory {
  position: relative;
  isolation: isolate;
}
html body .directory::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--film-grain);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
}

/* Profiles: grain on "Sobre el artista" and the gallery only. These sections
   paint their own opaque backgrounds, so the grain goes on top of their existing
   gradients, which are kept as they were. Each ends at the section's own
   dividing line, so the edge stays natural. */
html body #sobre-mi {
  background:
    var(--film-grain),
    radial-gradient(circle at 15% 18%, rgba(0, 212, 255, .075), transparent 24%),
    radial-gradient(circle at 78% 30%, rgba(204, 0, 255, .063), transparent 28%),
    radial-gradient(circle at 34% 92%, rgba(107, 47, 255, .07), transparent 34%),
    linear-gradient(180deg, rgba(4, 6, 14, .98), rgba(8, 8, 18, .96)) !important;
}
html body #galeria.gallery-section {
  background:
    var(--film-grain),
    radial-gradient(circle at 50% 8%, rgba(0, 212, 255, .17), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(204, 0, 255, .13), transparent 36%),
    radial-gradient(circle at 12% 70%, rgba(107, 47, 255, .12), transparent 34%),
    linear-gradient(180deg, #07070a, #0d0c12 52%, #07070a) !important;
}