/* Richting 3 "Vuur" · zin in koken. Warm, donker en uitgesproken.
   Letters: Bricolage Grotesque (koppen, eigenwijs en warm) + DM Sans (tekst).
   Kleur: warm antraciet als basis, crème voor tekst, merkrood voor knoppen en accenten. */
@import url("../assets/ks.css");

body {
  --bg: #120e0c;
  --bg-2: #1a1411;
  --tekst: #eadccc;
  --kop: #fbf1e6;
  --zacht: #bba996;
  --eyebrow: #e2d1bc;
  --accent-tekstkleur: #ff8a75;
  --rand: rgba(255,240,225,.26);
  --rand-zacht: rgba(255,240,225,.1);
  --kaart: #18120f;
  --veld: #0f0b09;
  --nav-bg: rgba(18,14,12,.9);
  --voet-bg: #0a0706;
  --hero-bg: #0d0806;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --kop-gewicht: 700;
  --kop-spatiering: -.025em;
  --em-stijl: normal;
  --em-kleur: #ff4b33;
  --citaat-stijl: normal;
  --radius: 4px;
}
h1 { font-size: clamp(2.9rem, 7vw, 6rem); line-height: .98; }
.feit-groot { font-weight: 800; letter-spacing: -.05em; }
.citaat-in blockquote p { font-weight: 600; letter-spacing: -.02em; }
.project-citaat p { font-family: var(--font-body); font-weight: 500; font-size: 1.08rem; }
.stap-nr { font-weight: 800; opacity: .28; }

/* warme gloed onder de kop, zodat de overgang naar de pagina niet hard is */
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, var(--bg), transparent); }
.hero-in { max-width: 720px; }
/* slepen over de pan: horizontaal en tikken gaan naar de scène, verticaal blijft de pagina scrollen */
#scene { touch-action: pan-y; }

/* hint dat de bezoeker over de pan mag slepen: rechts bij de scène, vrij van de wisselaar */
.sleep-hint {
  position: absolute; right: var(--goot); bottom: 120px; z-index: 5; pointer-events: none; margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fbf1e6;
  padding: 10px 18px; border: 1px solid rgba(255,240,225,.35); border-radius: 999px;
  background: rgba(14,9,7,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--dur-2) var(--ease-out);
}
.sleep-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff6a3d; box-shadow: 0 0 0 0 rgba(255,106,61,.6); animation: puls 1.8s infinite; }
.sleep-hint.is-weg { opacity: 0; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(255,106,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,61,0); } }
@media (max-width: 820px) { .sleep-hint { bottom: auto; top: calc(var(--nav-h) + 14px); } }
@media (prefers-reduced-motion: reduce) { .sleep-hint::before { animation: none; } }