/* =====================================================================
   VIVIDVERSE HUB - TEXTURE LAYER
   Theme-driven surface character. theme.js sets data-texture on the
   world container; these paint it. All CSS-generated (no image deps),
   subtle by design, and inert under prefers-reduced-motion where
   animated. Worlds may extend, never replace, the token contract.
   ===================================================================== */

/* grain: paper/film grain via layered radial noise. KRS, Alex & Mara. */
[data-texture="grain"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.055;
  background-image:
    radial-gradient(circle at 20% 30%, var(--ink) 0.5px, transparent 0.5px),
    radial-gradient(circle at 70% 60%, var(--ink) 0.5px, transparent 0.5px),
    radial-gradient(circle at 45% 85%, var(--ink) 0.5px, transparent 0.5px),
    radial-gradient(circle at 90% 15%, var(--ink) 0.5px, transparent 0.5px);
  background-size: 7px 7px, 11px 11px, 13px 13px, 17px 17px;
}

/* rain: visible two-layer rainfall, lamplight catching the streaks.
   Wu only. Foreground = faster, brighter, longer drops; background =
   slower drizzle. Light-on-dark (ink is limestone on the Wu theme). */
[data-texture="rain"]::before {
  content: "";
  position: fixed;
  inset: -30% -5%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.28;
  background-image: repeating-linear-gradient(
    169deg,
    transparent 0px,
    transparent 32px,
    color-mix(in oklab, var(--ink) 65%, var(--accent)) 32px,
    color-mix(in oklab, var(--ink) 65%, var(--accent)) 33px,
    transparent 34px,
    transparent 71px
  );
  background-size: 100% 137px;
  animation: vv-rain-fg 0.7s linear infinite;
}

[data-texture="rain"]::after {
  content: "";
  position: fixed;
  inset: -30% -5%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.14;
  background-image: repeating-linear-gradient(
    173deg,
    transparent 0px,
    transparent 17px,
    var(--ink) 17px,
    var(--ink) 17.5px,
    transparent 18.5px,
    transparent 41px
  );
  background-size: 100% 89px;
  animation: vv-rain-bg 1.5s linear infinite;
}

@keyframes vv-rain-fg {
  to { transform: translateY(137px); }
}

@keyframes vv-rain-bg {
  to { transform: translateY(89px); }
}

/* grid: cold engineering grid. Digital Nomads. */
[data-texture="grid"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* stars: starlight field. Atlas Galaxy. */
[data-texture="stars"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 12% 22%, var(--ink) 1px, transparent 1.5px),
    radial-gradient(circle at 38% 74%, var(--ink) 0.8px, transparent 1.2px),
    radial-gradient(circle at 61% 38%, var(--ink) 1.2px, transparent 1.8px),
    radial-gradient(circle at 83% 66%, var(--ink) 0.7px, transparent 1px),
    radial-gradient(circle at 71% 12%, var(--ink) 1px, transparent 1.4px),
    radial-gradient(circle at 27% 51%, var(--ink) 0.6px, transparent 1px);
  background-size: 480px 480px, 360px 360px, 540px 540px, 300px 300px, 420px 420px, 390px 390px;
}

/* stickers: confetti dots at low opacity. Alphonse. */
[data-texture="stickers"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
  background-image:
    radial-gradient(circle at 15% 25%, var(--accent) 6px, transparent 7px),
    radial-gradient(circle at 80% 40%, var(--accent-2) 5px, transparent 6px),
    radial-gradient(circle at 45% 70%, var(--accent) 4px, transparent 5px),
    radial-gradient(circle at 65% 90%, var(--accent-2) 6px, transparent 7px);
  background-size: 340px 340px, 420px 420px, 380px 380px, 460px 460px;
}

/* loom: fine vertical threads. Tapestry. */
[data-texture="loom"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink) 0px,
    var(--ink) 1px,
    transparent 1px,
    transparent 14px
  );
}

@media (prefers-reduced-motion: reduce) {
  [data-texture="rain"]::before,
  [data-texture="rain"]::after { animation: none; }
}