/* ═══════════════════════════════════════════════════════
   FAUX OS V2.1 - Analog Textures & Film Grain
   ═══════════════════════════════════════════════════════ */

.texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-texture);
}

/* ── Film Grain: organic photographic noise ── */
.texture--grain {
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  animation: grain-drift 8s linear infinite;
}

/* Use background-position instead of transform so parallax JS can control transform independently */
@keyframes grain-drift {
  0%   { background-position: 0 0; }
  25%  { background-position: -2px 1px; }
  50%  { background-position: 1px -1px; }
  75%  { background-position: -1px -2px; }
  100% { background-position: 0 0; }
}

/* ── Scanlines: CRT phosphor rows ── */
.texture--scanlines {
  opacity: var(--scanline-opacity);
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanline-scroll 12s linear infinite;
}

@keyframes scanline-scroll {
  from { background-position-y: 0; }
  to   { background-position-y: 6px; }
}

/* ── Vignette: cinematic depth ── */
.texture--vignette {
  opacity: var(--vignette-opacity);
  background: radial-gradient(
    ellipse 60% 52% at 50% 46%,
    transparent 35%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* ── Halftone Dither: risograph / print texture ── */
.texture--dither {
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23000'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23fff' opacity='.2'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23fff' opacity='.2'/%3E%3C/svg%3E");
  image-rendering: pixelated;
  mix-blend-mode: soft-light;
}

/* ── Chromatic Fringe: subtle RGB edge bleed ── */
.texture--chroma {
  opacity: 0.015;
  background:
    linear-gradient(90deg, rgba(255, 0, 50, 0.3) 0%, transparent 3%, transparent 97%, rgba(0, 200, 255, 0.3) 100%),
    linear-gradient(180deg, rgba(255, 0, 50, 0.2) 0%, transparent 2%, transparent 98%, rgba(0, 200, 255, 0.2) 100%);
  mix-blend-mode: screen;
}

/* ══════════════════════════════════════════════════════
   BACKGROUND MIT SEELE - topographic contour map
   ══════════════════════════════════════════════════════ */
.texture--topo {
  opacity: 0.035;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='42' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 0.15 0.3 0.45 0.6 0.75 0.9 1'/%3E%3CfeFuncG type='discrete' tableValues='0 0.15 0.3 0.45 0.6 0.75 0.9 1'/%3E%3CfeFuncB type='discrete' tableValues='0 0.15 0.3 0.45 0.6 0.75 0.9 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size: 600px 600px;
  mix-blend-mode: soft-light;
}

/* ══════════════════════════════════════════════════════
   LIGHT LEAK - warm accent bleed from corner
   ══════════════════════════════════════════════════════ */
.texture--lightleak {
  opacity: 1;
  background:
    radial-gradient(ellipse 45% 55% at 95% 5%, rgba(232, 93, 48, 0.07), transparent 70%),
    radial-gradient(ellipse 35% 40% at 5% 90%, rgba(232, 93, 48, 0.04), transparent 60%),
    radial-gradient(ellipse 20% 20% at 50% 50%, rgba(255, 255, 255, 0.01), transparent 50%);
  mix-blend-mode: screen;
  animation: leak-breathe 16s ease-in-out infinite alternate;
}

@keyframes leak-breathe {
  0%   { opacity: 0.7; }
  50%  { opacity: 1; }
  100% { opacity: 0.8; }
}