/* Projects the preserved 2003 site like an old reel: sepia stock, grain, gate weave,
   flicker, scratches and dust. Injected into every /2003 page by scripts/legacy-2003.mjs.
   ?raw in the URL skips it and shows the page exactly as it was. */

html.film { background: #d9cbb0; }
html.film body {
  background: #fff;
  min-height: 100vh;
  filter: sepia(0.6) saturate(0.75) contrast(1.12) brightness(0.9);
  animation: film-weave 0.32s steps(1) infinite;
}

.film-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; }

.film-grain {
  inset: -50%;
  opacity: 0.2;
  background-size: 180px 180px;
  animation: film-grain 0.5s steps(1) infinite;
}
.film-vignette { background: radial-gradient(ellipse at center, transparent 52%, rgba(40, 22, 4, 0.62) 100%); }
.film-flicker { background: #fff3d6; mix-blend-mode: soft-light; animation: film-flicker 2.3s infinite; }
.film-scratch { left: auto; right: auto; width: 1px; background: rgba(255, 250, 235, 0.55); opacity: 0; }
.film-dust { position: fixed; inset: 0; pointer-events: none; z-index: 2147483001; width: 100vw; height: 100vh; }

@keyframes film-grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
@keyframes film-weave {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0.6px, -0.4px); }
  50% { transform: translate(-0.4px, 0.5px); }
  75% { transform: translate(0.3px, 0.2px); }
}
@keyframes film-flicker {
  0%, 100% { opacity: 0.1; }
  8% { opacity: 0.22; }
  11% { opacity: 0.05; }
  34% { opacity: 0.16; }
  37% { opacity: 0.08; }
  61% { opacity: 0.2; }
  63% { opacity: 0.04; }
  84% { opacity: 0.14; }
}

/* The leader: a projector countdown the first time a visitor walks in. */
.film-leader {
  position: fixed; inset: 0; z-index: 2147483002; display: grid; place-items: center;
  background: #1a140c; color: #e9dcc0; cursor: pointer;
  font: 600 22vmin/1 Georgia, 'Times New Roman', serif;
  transition: opacity 0.5s;
}
.film-leader.out { opacity: 0; pointer-events: none; }
.film-leader::before, .film-leader::after { content: ''; position: absolute; background: rgba(233, 220, 192, 0.35); }
.film-leader::before { left: 0; right: 0; top: 50%; height: 1px; }
.film-leader::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.film-leader .ring {
  position: absolute; width: 56vmin; height: 56vmin; border-radius: 50%;
  border: 2px solid rgba(233, 220, 192, 0.6); box-shadow: 0 0 0 3vmin rgba(233, 220, 192, 0.08);
}
.film-leader .sweep {
  position: absolute; width: 56vmin; height: 56vmin; border-radius: 50%;
  background: conic-gradient(rgba(233, 220, 192, 0.18) var(--p, 0deg), transparent 0);
}
.film-leader .cap {
  position: absolute; bottom: 6vh; font: 11px/1 'Courier New', monospace; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  html.film body, .film-grain, .film-flicker { animation: none; }
  .film-scratch, .film-dust { display: none; }
}