/* =========================================================
   Website 2.0 - gedeelde basis voor alle varianten
   Zelfstandig: geen externe fonts, geen externe requests.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../assets/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #08090a;
  --ink: #f2f1ee;
  --ink-soft: rgba(242, 241, 238, 0.56);
  --ink-faint: rgba(242, 241, 238, 0.14);
  --tally: #ff2f18;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(1.25rem, 3.6vw, 4.25rem);

  --micro: clamp(0.625rem, 0.68vw, 0.75rem);
  --lead: clamp(0.95rem, 1.05vw, 1.15rem);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* geen zichtbare scrollbalk, net als op de huidige site;
   scrollen zelf blijft gewoon werken */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }

img { display: block; max-width: 100%; }

::selection { background: var(--tally); color: #fff; }

.mono {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- vaste laag ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.scroll-space { position: relative; z-index: 0; }

/* ---------- korrel ---------- */

/* De korrel lag eerst als overlay-blend over het hele scherm. Dat
   betekent dat de browser elk beeld opnieuw de achtergrond moet
   uitlezen en doorrekenen: op een 27 inch zijn dat 4,7 miljoen
   pixels per frame, en dat is op een gewone pc de duurste laag van
   de site (01-08, Willem meldde haperen op een groot scherm). Zonder
   blend en met een lagere dekking ziet het er vrijwel gelijk uit en
   is het een gewone laag die de kaart in één keer tekent. */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: grain-shift 0.7s steps(5) infinite;
  will-change: transform;
}

@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-38px, 22px, 0); }
  40%  { transform: translate3d(24px, -34px, 0); }
  60%  { transform: translate3d(-18px, -20px, 0); }
  80%  { transform: translate3d(30px, 18px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- de W-bug, altijd zichtbaar ---------- */

.bug {
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  z-index: 60;
  width: clamp(30px, 3.1vw, 42px);
  height: auto;
  color: var(--ink);
  transition: color 0.6s var(--ease);
}

/* rood = op de lucht, wit = eraf. Zelfde logica als een tally. */
.bug.is-live { color: var(--tally); }

/* ---------- laadscherm ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.loader-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11.5vw;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.82;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.05;
  user-select: none;
}

@media (max-width: 620px) {
  .loader-ghost { font-size: 17vw; }
}

.loader-box { position: relative; width: min(320px, 62vw); }

.loader-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}

.loader-row #loadPct { color: var(--ink); letter-spacing: 0.06em; }

.loader-track {
  height: 1px;
  width: 100%;
  background: var(--ink-faint);
  overflow: hidden;
}

.loader-track i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--tally);
  transform-origin: left center;
}

/* ---------- tekstfasen ---------- */

.copy {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.phase {
  position: absolute;
  opacity: 0;
  will-change: opacity, transform, filter;
}

.phase .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  white-space: nowrap;
}

.phase .eyebrow::before {
  content: "";
  width: clamp(18px, 2.2vw, 34px);
  height: 1px;
  background: var(--tally);
  flex: none;
}

.phase h2 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.phase h2 em { font-style: normal; color: var(--tally); }

.phase p {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  font-size: var(--lead);
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ---------- dip to black ---------- */

.dip {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.outro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 36;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.outro .mono { color: var(--ink-soft); display: block; margin-bottom: 0.9rem; }

.outro strong {
  display: block;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- scrollhint ---------- */

.hint {
  pointer-events: none;
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) * 0.85);
  transform: translateX(-50%);
  z-index: 55;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.5s var(--ease);
}

.hint i {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--ink-soft), transparent);
  animation: hint-drop 2.1s var(--ease) infinite;
}

@keyframes hint-drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- variantschakelaar (alleen om te vergelijken) ---------- */

.switch {
  position: fixed;
  right: var(--pad);
  bottom: calc(var(--pad) * 0.85);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.switch a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.switch a:hover { color: var(--ink); }
.switch a[aria-current="page"] { color: var(--tally); }

.switch span { color: var(--ink-faint); }

/* op smal botst de schakelaar met de scrollhint, dus naar boven */
@media (max-width: 760px) {
  .switch {
    top: calc(var(--pad) * 0.9);
    right: var(--pad);
    bottom: auto;
    gap: 0.55rem;
    font-size: 0.6rem;
  }
}

/* ---------- toegankelijkheid ---------- */

:focus-visible {
  outline: 2px solid var(--tally);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hint i { animation: none; opacity: 0.6; }
  * { scroll-behavior: auto !important; }
}