/* ─────────────────────────────────────────────
   Kaya & Kevin — Site-wide grainy film / retro texture
   A single fixed noise layer painted over the whole
   page (and the password gate). Self-contained SVG
   noise — no external files, China-safe.
───────────────────────────────────────────── */

html::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 2147483646;      /* above everything, incl. the gate */
  pointer-events: none;     /* never blocks clicks or inputs */
  opacity: 0.42;            /* very grainy, but keeps text legible */
  mix-blend-mode: overlay;  /* reads as authentic film grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  animation: film-texture 0.6s steps(3) infinite;
  will-change: transform;
}

@keyframes film-texture {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 2%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html::after { animation: none; }
}