@font-face { font-family: 'Anton'; src: url('fonts/anton-v27-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('fonts/special-elite-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --nacht: #070605;
  --rook: #1A1613;
  --natrium: #F5C534;
  --bloed: #C22B1F;
  --papier: #D8CDB8;
  --dim: #4A4238;
  --kop: 'Anton', sans-serif;
  --machine: 'Special Elite', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--nacht);
  color: var(--papier);
  font-family: var(--machine);
  line-height: 1.7;
  overflow: hidden;
}

::selection { background: var(--natrium); color: var(--nacht); }

a { color: var(--natrium); }
a:focus-visible { outline: 2px solid var(--natrium); outline-offset: 4px; }

/* Filmkorrel */
.grain {
  position: fixed;
  inset: -100px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: korrel 0.45s steps(3) infinite;
}
@keyframes korrel {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-38px, 22px); }
  66% { transform: translate(24px, -30px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* De zaklamp: een lichtvlek die de pagina onthult */
.spot {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(circle 260px at var(--sx, 50%) var(--sy, 38%),
    transparent 0%,
    rgba(7, 6, 5, 0.24) 38%,
    rgba(7, 6, 5, 0.8) 72%,
    rgba(7, 6, 5, 0.94) 100%);
  transition: background 0.05s linear;
}
@media (prefers-reduced-motion: reduce) {
  .spot { background: rgba(7, 6, 5, 0.28); }
}

/* Geheimen: alleen leesbaar in het licht van de lamp */
.geheim {
  color: var(--bloed);
  text-shadow: 0 0 14px rgba(194, 43, 31, 0.35);
}

.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}
.zender { color: var(--dim); }

/* Horizontale rail */
.rail {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.paneel {
  flex: 0 0 100vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 8vw, 8rem) 4rem;
  position: relative;
  border-right: 1px dashed rgba(216, 205, 184, 0.12);
}

.intro { align-items: flex-start; }
.intro-label {
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--natrium);
  margin-bottom: 1.5rem;
}
.intro h1 {
  font-family: var(--kop);
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--papier);
  text-shadow: 0.05em 0.06em 0 rgba(194, 43, 31, 0.25);
}
.intro-sub { margin-top: 2rem; max-width: 30rem; color: var(--dim); }
.intro-hint {
  position: absolute;
  bottom: 2.2rem;
  right: clamp(1.5rem, 8vw, 8rem);
  color: var(--natrium);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  animation: wenk 2.4s ease-in-out infinite;
}
@keyframes wenk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .intro-hint { animation: none; } }

.afl {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--natrium);
  margin-bottom: 1.25rem;
}
.paneel h2 {
  font-family: var(--kop);
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  line-height: 0.95;
  color: var(--papier);
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.synopsis { max-width: 34rem; color: #8A7F6E; font-size: 1.05rem; }

.dossier {
  margin-top: 2.75rem;
  display: flex;
  gap: 2.5rem;
  border-top: 1px dashed rgba(216, 205, 184, 0.25);
  padding-top: 1.25rem;
  max-width: 34rem;
}
.dossier dt {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.3rem;
}
.dossier dd { font-size: 0.95rem; }
.rood { color: var(--bloed); }
.geel { color: var(--natrium); }

.colofon-paneel { align-items: flex-start; }
.colofon-groot {
  font-family: var(--kop);
  font-size: clamp(3rem, 10vw, 8rem);
  color: var(--natrium);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.colofon-tekst { max-width: 32rem; color: var(--dim); font-size: 0.95rem; }

@media (max-width: 640px) {
  .dossier { flex-wrap: wrap; gap: 1.25rem 2rem; }
}