/* Grain texture overlay — visible on dark backgrounds, subtle film-grain drift */
body::after {
  content: "";
  position: fixed;
  inset: -8%;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.1;
  mix-blend-mode: screen;
  animation: _grainShift 0.9s steps(1) infinite;
  will-change: transform;
}
@keyframes _grainShift {
  0%   { transform: translate( 0%,  0%); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate( 3%,  1%); }
  30%  { transform: translate(-1%,  2%); }
  40%  { transform: translate( 2%, -2%); }
  50%  { transform: translate(-3%,  1%); }
  60%  { transform: translate( 1%,  3%); }
  70%  { transform: translate(-2%, -1%); }
  80%  { transform: translate( 2%,  2%); }
  90%  { transform: translate(-1%, -2%); }
  100% { transform: translate( 0%,  0%); }
}

/* Page fade-in intro — ~1.6s hold, ~0.9s fade (total 2.5s) */
#_intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #070707;
  pointer-events: none;
  opacity: 1;
  animation: _introFade 2.5s ease-out forwards;
}
@keyframes _introFade {
  0%   { opacity: 1; }
  64%  { opacity: 1; }
  100% { opacity: 0; }
}