/* ─────────────────────────────────────────────────────────────
   Vireno · verhaal-laag op de homepage
   Drie actes plus het ochtend-logboek, geladen naast main.css.
   Fonts en gedeelde merkkleuren (--paper, --peach, --teal) komen
   uit main.css; hieronder alleen de verhaal-specifieke tinten.
   ───────────────────────────────────────────────────────────── */

:root {
  --nacht: #20223A;
  --nacht-diep: #181A2E;
  --navy: #3D405B;
  --paper: #FBF9ED;
  --cream: #F6F2E4;
  --peach: #E07A5F;
  --peach-zacht: #EDA189;
  --teal: #81B29A;
  --inkt-licht: rgba(251, 249, 237, 0.93);
  --inkt-gedimd: rgba(251, 249, 237, 0.72);
}

.verhaal {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--inkt-licht);
  line-height: 1.6;
}
.verhaal * { margin: 0; padding: 0; box-sizing: border-box; }

/* Korrel voor sfeer, over alles heen */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.merk {
  position: fixed; top: 1.1rem; left: 1.2rem; z-index: 60;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(24, 26, 46, 0.55);
  border: 1px solid rgba(251, 249, 237, 0.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 0.45rem 0.85rem; border-radius: 999px;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}
.merk b { color: var(--peach); font-weight: 600; }

/* De dagklok woont in de merk-pill: "Vireno · 08:42" */
.merk-scheider { opacity: 0.45; margin: 0 0.5rem; }
.dagklok {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* Snelmenu rechtsboven: direct naar Over of contact, zonder
   eerst het hele verhaal te hoeven scrollen */
.verhaal-acties {
  position: fixed; top: 1.1rem; right: 1.2rem; z-index: 60;
  display: flex; gap: 0.5rem;
}
.verhaal-acties a {
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
  background: rgba(24, 26, 46, 0.55);
  border: 1px solid rgba(251, 249, 237, 0.25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 0.45rem 0.85rem; border-radius: 999px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.verhaal-acties a:hover,
.verhaal-acties a:focus-visible { background: rgba(24, 26, 46, 0.85); transform: translateY(-1px); }
.verhaal-acties .acties-cta {
  background: var(--peach-deep);
  border-color: transparent;
  color: #FFFFFF;
}
.verhaal-acties .acties-cta:hover,
.verhaal-acties .acties-cta:focus-visible { background: #8F3D1E; }

/* Smal scherm: V-monogram plus klok links, compacte acties rechts */
@media (max-width: 560px) {
  /* Snelmenu compact houden op smal scherm: Aanpak zit ook in de
     footer en achter de prijslink */
  .verhaal-acties .acties-aanpak { display: none; }
}

@media (max-width: 480px) {
  .merk .merk-rest { display: none; }
  .merk, .verhaal-acties a {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.7rem;
  }
  /* Snelmenu compacter zodat er ademruimte komt tussen de home-knop
     (links) en het snelmenu (rechts) op smal scherm */
  .verhaal-acties a { padding-left: 0.62rem; padding-right: 0.62rem; }
  .merk-scheider { margin: 0 0.35rem; }
  .verhaal-acties { gap: 0.28rem; }
}

/* Mobiel: de pills krijgen een vrijwel dekkende achtergrond zodat de
   verhaal-content er niet doorheen schemert. Ze blijven altijd zichtbaar. */
@media (max-width: 700px) {
  .merk,
  .verhaal-acties a:not(.acties-cta) {
    background: rgba(24, 26, 46, 0.92);
  }
}

/* Zodra het verhaal voorbij is, checken de pills uit en neemt
   de gewone navigatie het over */
.merk, .verhaal-acties { transition: opacity 0.45s ease; }
.voorbij-verhaal .merk,
.voorbij-verhaal .verhaal-acties { opacity: 0; pointer-events: none; }

/* Het merkteken is klikbaar als home-knop (terug naar het begin, zie verhaal.js) */
.merk { transition: opacity 0.45s ease, background 0.3s ease, transform 0.3s ease; }
.merk:hover, .merk:focus-visible { background: rgba(24, 26, 46, 0.85); transform: translateY(-1px); }
.merk:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }

/* ───────────────── ACTE 1 · 07:58 ───────────────── */
.act-1 {
  min-height: 100vh;
  min-height: 100svh;
  display: grid; place-content: center; text-align: center;
  position: relative; overflow: hidden;
  padding: 5rem 1.5rem 6rem;
  background:
    radial-gradient(ellipse 60% 45% at 75% 15%, rgba(224, 122, 95, 0.14), transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(129, 178, 154, 0.12), transparent 60%),
    linear-gradient(180deg, var(--nacht-diep), var(--nacht));
}
.klok {
  font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--peach-zacht);
}
.act-1 h1 {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--paper); margin: 1.4rem 0 1.6rem;
  position: relative; z-index: 2;
}
.act-1 h1 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 340;
  color: var(--peach);
}
.act-1 .lead {
  font-size: clamp(1rem, 1.8vw, 1.2rem); color: rgba(251, 249, 237, 0.88);
  max-width: 44ch; margin: 0 auto; position: relative; z-index: 2;
}

/* Binnenkomende-mail-notificaties: de ruis van een maandagochtend.
   Vorm leunt op een iOS/macOS notificatie: app-tegel met envelop,
   afzender vet, onderwerp eronder, rode stip bij spoed. */
.chips { position: absolute; inset: 0; z-index: 1; }
.chip {
  position: absolute;
  display: flex; align-items: center; gap: 0.6rem;
  max-width: 13rem;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  background: rgba(251, 249, 237, 0.08);
  border: 1px solid rgba(251, 249, 237, 0.22);
  border-radius: 15px;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  opacity: 0;
  animation: chip-val 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
             chip-zweef 7s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.9s);
}
.chip-app {
  position: relative; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-content: center;
  background: linear-gradient(155deg, var(--peach-zacht), var(--peach));
  color: #FFFFFF;
}
.chip-app svg { width: 18px; height: 18px; }
.chip--urgent .chip-app { background: linear-gradient(155deg, #EFA98F, #D85B3C); }
.chip-badge {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #E0563F; border: 2px solid var(--nacht);
}
.chip-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chip-van {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.8rem;
  color: rgba(251, 249, 237, 0.97);
}
.chip-ond {
  font-family: 'Inter', sans-serif; font-size: 0.74rem;
  color: rgba(251, 249, 237, 0.66);
  overflow: hidden; text-overflow: ellipsis;
}
@keyframes chip-val {
  from { opacity: 0; transform: translateY(-60px) rotate(var(--r, 0deg)) scale(0.9); }
  to   { opacity: var(--chip-o, 1); transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
@keyframes chip-zweef {
  from { translate: 0 0; }
  to   { translate: var(--zx, 8px) var(--zy, 14px); }
}
/* Bovenband (boven het gecentreerde tekstblok) en onderband eronder.
   De titelzone in het verticale midden blijft vrij. */
.chip:nth-child(1)  { top: 19%; left: 4%;   --d: 0.2s; --r: -3deg; --zx: 11px; --zy: 14px; }
.chip:nth-child(2)  { top: 6%;  left: 27%;  --d: 0.5s; --r: 2deg;  --zx: -10px; --zy: 12px; }
.chip:nth-child(3)  { top: 7%;  left: 53%;  --d: 0.8s; --r: 3deg;  --zx: 12px; --zy: -9px; }
.chip:nth-child(4)  { top: 19%; right: 4%;  --d: 1.1s; --r: -2deg; --zx: -9px; --zy: 14px; }
.chip:nth-child(5)  { bottom: 9%; left: 6%;  --d: 1.4s; --r: 3deg;  --zx: 12px; --zy: -12px; }
.chip:nth-child(6)  { bottom: 6%; left: 31%; --d: 1.7s; --r: -3deg; --zx: -12px; --zy: -8px; }
.chip:nth-child(7)  { bottom: 7%; left: 56%; --d: 2.0s; --r: 2deg;  --zx: -9px; --zy: 10px; }
.chip:nth-child(8)  { bottom: 10%; right: 5%; --d: 2.3s; --r: -2deg; --zx: 8px;  --zy: 12px; }

@media (max-width: 700px) {
  /* Smal scherm: twee mails hoog in de bovenband (ruim boven de klok)
     en twee laag in de onderband (onder de scroll-cue). De titel-,
     klok-, lead- en scrollzone in het midden blijven altijd vrij. */
  .chip { max-width: 11.5rem; }
  .chip:nth-child(1) { top: 9%;    left: 4%;  right: auto; bottom: auto; }
  .chip:nth-child(2) { top: 12%;   right: 3%; left: auto;  bottom: auto; }
  .chip:nth-child(3) { bottom: 11%; left: 4%; right: auto; top: auto; }
  .chip:nth-child(4) { bottom: 4%;  right: 3%; left: auto; top: auto; }
  .chip:nth-child(n+5) { display: none; }
}

/* Echt korte schermen (oude/kleine toestellen): minder mails zodat ze
   de tekst nooit raken. Drempel laag gehouden, want iOS Safari rapporteert
   met de adresbalk een kleinere hoogte dan het toestel zelf. */
@media (max-width: 700px) and (max-height: 640px) {
  .chip:nth-child(2), .chip:nth-child(3) { display: none; }
}


.scroll-cue {
  margin-top: 3.2rem;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 249, 237, 0.85);
  position: relative; z-index: 2;
}
.scroll-cue p { margin-top: 0.8rem; }
.muis {
  width: 27px; height: 44px; margin: 0 auto;
  border: 2px solid rgba(251, 249, 237, 0.75);
  border-radius: 999px;
  position: relative;
}
.muis::before {
  content: '';
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 9px; margin-left: -2px;
  border-radius: 999px;
  background: var(--peach);
  animation: muis-rol 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes muis-rol {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { transform: translateY(17px); opacity: 0; }
}

/* ───────────────── ACTE 2 · de reis van één mail ───────────────── */
.scene {
  position: relative;
  height: 460vh; height: 460svh;
  background: var(--nacht);
}
.bg-dag {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--cream), var(--paper));
  opacity: var(--p, 0);
}
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  overflow: hidden; padding: clamp(7rem, 19vh, 11rem) 1.5rem 1.5rem;
}
.fase-labels {
  height: 2.2rem; margin-bottom: clamp(1.2rem, 3vh, 2.4rem);
  position: relative; width: 100%; text-align: center;
}
.fase-label {
  position: absolute; inset: 0;
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  letter-spacing: 0.04em;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--inkt-licht);
}
.fase-label .tijd { color: var(--peach); font-variant-numeric: tabular-nums; }
[data-fase="2"] .fase-label, [data-fase="3"] .fase-label { color: var(--navy); }
[data-fase="2"] .fase-label .tijd, [data-fase="3"] .fase-label .tijd { color: var(--peach-deep); }
[data-fase="0"] .fase-label[data-f="0"],
[data-fase="1"] .fase-label[data-f="1"],
[data-fase="2"] .fase-label[data-f="2"],
[data-fase="3"] .fase-label[data-f="3"] { opacity: 1; transform: translateY(0); }

.mail-wrap {
  position: relative;
  width: min(92vw, 560px);
}
.kaart {
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(24, 26, 46, 0.5), 0 4px 16px rgba(24, 26, 46, 0.08);
  padding: 1.6rem 1.7rem;
  color: var(--navy);
}
.kaart-kop {
  display: flex; align-items: center; gap: 0.8rem;
  padding-bottom: 0.9rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(61, 64, 91, 0.12);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9rem;
  background: var(--teal); color: #fff;
}
.kaart-kop .van { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; }
.kaart-kop .onderwerp { font-size: 0.82rem; color: rgba(61, 64, 91, 0.86); }
.kaart-kop .tijdstip {
  margin-left: auto; font-family: 'Outfit', sans-serif;
  font-size: 0.78rem; color: rgba(61, 64, 91, 0.85);
  font-variant-numeric: tabular-nums;
}
.mail-body { font-size: 0.95rem; line-height: 1.7; white-space: pre-line; }
.mail-sign { color: rgba(61, 64, 91, 0.6); }

/* De mail zelf: komt binnen in fase 0, stapt terug in fase 2 */
.mail {
  position: relative; z-index: 3;
  opacity: 0; transform: translateY(70px) scale(0.96);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease;
}
[data-fase="0"] .mail, [data-fase="1"] .mail { opacity: 1; transform: translateY(0) scale(1); }
[data-fase="2"] .mail, [data-fase="3"] .mail {
  opacity: 0.45;
  transform: translateY(-3vh) scale(0.86);
  filter: saturate(0.7);
}

/* Meelezen: kernfeiten lichten één voor één op */
.hl {
  background: linear-gradient(0deg, rgba(129, 178, 154, 0.32), rgba(129, 178, 154, 0.32)) no-repeat left bottom / 0% 88%;
  border-radius: 4px;
  transition: background-size 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hl-urgent {
  background-image: linear-gradient(0deg, rgba(224, 122, 95, 0.3), rgba(224, 122, 95, 0.3));
}
[data-fase="1"] .hl, [data-fase="2"] .hl, [data-fase="3"] .hl { background-size: 100% 88%; }
[data-fase="1"] .hl:nth-of-type(1) { transition-delay: 0.15s; }
[data-fase="1"] .hl:nth-of-type(2) { transition-delay: 0.65s; }
[data-fase="1"] .hl:nth-of-type(3) { transition-delay: 1.15s; }
[data-fase="1"] .hl:nth-of-type(4) { transition-delay: 1.65s; }
.hl-tag {
  position: absolute; right: 1.2rem; bottom: 1rem;
  font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-deep);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s ease 2s, transform 0.5s ease 2s;
}
[data-fase="1"] .hl-tag { opacity: 1; transform: translateY(0); }
[data-fase="2"] .hl-tag, [data-fase="3"] .hl-tag { opacity: 0; transition-delay: 0s; }

/* De twee concepten vouwen uit de mail */
.concept {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  opacity: 0; transform: translateY(4vh) scale(0.92);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.concept .mail-body { font-size: 0.88rem; }
.concept-badge {
  display: inline-block; margin-bottom: 0.8rem;
  font-family: 'Outfit', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--peach-deep); background: rgba(224, 122, 95, 0.1);
  border: 1px solid rgba(224, 122, 95, 0.35);
  border-radius: 999px; padding: 0.3rem 0.75rem;
}
[data-fase="2"] .concept, [data-fase="3"] .concept { opacity: 1; }
[data-fase="2"] .c-links, [data-fase="3"] .c-links {
  transform: translate(calc(-50% - 1.2rem), 9vh) scale(1) rotate(-1.6deg);
}
[data-fase="2"] .c-rechts, [data-fase="3"] .c-rechts {
  transform: translate(calc(50% + 1.2rem), 13vh) scale(1) rotate(1.4deg);
  transition-delay: 0.12s;
}

/* Verzonden: de stempel waar de mens op drukte */
.stempel {
  position: absolute; top: -0.9rem; right: -0.7rem; z-index: 4;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep); background: var(--paper);
  border: 2px solid var(--teal-deep); border-radius: 10px;
  padding: 0.4rem 0.8rem;
  opacity: 0; transform: rotate(8deg) scale(1.6);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
[data-fase="3"] .stempel { opacity: 1; transform: rotate(-4deg) scale(1); }
[data-fase="3"] .c-rechts .stempel { transition-delay: 0.25s; }
/* De afsluitregel hangt nu onder de kaarten in plaats van aan de
   onderkant van de stage. Zo blijft de afstand tot de e-mails altijd
   gelijk (de 13vh valt weg tegen de 13vh van de rechterkaart), in
   plaats van mee te zwabberen met de schermhoogte. */
.fase-voetnoot {
  position: absolute; left: 0; right: 0; top: calc(13vh + 31.5rem);
  text-align: center;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 340;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); color: var(--navy);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}
[data-fase="3"] .fase-voetnoot { opacity: 1; transform: translateY(0); }

/* Korte desktop-vensters (bijvoorbeeld een 1366x768-laptop): er is geen
   ruimte voor de vaste afstand onder de kaarten zonder dat de regel uit
   de stage (overflow: hidden) valt. Daar houden we de regel onderaan in
   beeld. Alleen desktop-breedtes, zodat de mobiele stapel ongemoeid blijft. */
@media (min-width: 701px) and (max-height: 884px) {
  .fase-voetnoot { top: auto; bottom: clamp(3.5rem, 13vh, 8rem); }
}

/* ───────────────── TUSSENBEDRIJF · het ochtend-logboek ───────────────── */
.act-feed {
  background: var(--paper);
  color: var(--navy);
  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.act-feed .klok { color: var(--teal-deep); }
.act-feed h2 {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.015em;
  margin: 1.2rem 0 1.1rem;
}
.act-feed h2 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 340;
  color: var(--peach-deep);
}
.feed-intro {
  max-width: 46ch; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem);
  color: rgba(61, 64, 91, 0.86);
}
/* "flows" labelt de meelopende lijn: hier stromen je workflows */
.feed-flows {
  max-width: 33rem; margin: 0 auto 0.7rem;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--teal-deep);
}
.feed-flows .flows-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--teal-deep); background: var(--paper);
}
html.js .feed-flows .flows-dot { animation: flows-puls 2.4s ease-in-out infinite; }
@keyframes flows-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 114, 84, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(44, 114, 84, 0); }
}

.feed-lijst {
  list-style: none; max-width: 33rem; margin: 0 auto; text-align: left;
  position: relative;
}
.feed-lijst::before {
  content: ''; position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem;
  width: 1px; z-index: 0;
  background: rgba(129, 178, 154, 0.22);
}
/* De vullijn tekent zich terwijl je scrolt (--feed-p uit verhaal.js) */
.feed-lijst::after {
  content: ''; position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem;
  width: 2px; margin-left: -0.5px; z-index: 1;
  background: var(--teal-deep);
  transform: scaleY(var(--feed-p, 0));
  transform-origin: top center;
}
.feed-item { position: relative; padding: 0.5rem 0 0.5rem 3.4rem; }
/* Stations: icoontjes op de route die vertellen wat er gebeurde */
.feed-station {
  position: absolute; left: -0.55rem; top: 0.55rem;
  width: 36px; height: 36px; border-radius: 50%; z-index: 2;
  display: grid; place-content: center;
  background: var(--paper);
  border: 2px solid rgba(44, 114, 84, 0.5);
  color: var(--teal-deep);
  transform: scale(0.82);
  transition: border-color 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feed-item.zichtbaar .feed-station { border-color: var(--teal-deep); transform: scale(1); }
.feed-station svg { width: 19px; height: 19px; stroke-width: 2.1; }
.feed-tijd {
  display: block; margin-bottom: 0.15rem;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.84rem;
  letter-spacing: 0.1em; color: var(--teal-deep); font-variant-numeric: tabular-nums;
}
.feed-tekst { font-size: 0.97rem; line-height: 1.55; color: var(--navy); }
/* Bestemming per regel: stippellijntje vanaf de tijdlijn naar
   de plek waar het resultaat landt (Drive, concepten, agenda) */
.feed-doel {
  display: flex; width: fit-content; align-items: center; gap: 0.55rem;
  margin-top: 0.5rem;
  position: relative;
  font-family: 'Outfit', sans-serif; font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
  color: #1F5A40;
  background: rgba(129, 178, 154, 0.14);
  border: 1px solid rgba(44, 114, 84, 0.45);
  border-radius: 999px; padding: 0.4rem 0.95rem 0.4rem 0.75rem;
}
.feed-doel svg { width: 17px; height: 17px; flex-shrink: 0; }
.feed-doel::before {
  content: ''; position: absolute; left: -2.5rem; top: 50%; margin-top: -1px;
  width: 2.2rem; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(44, 114, 84, 0.55) 0 5px, transparent 5px 10px);
}
html.js .feed-item.zichtbaar .feed-doel::before { animation: dash-stroom 0.9s linear infinite; }
@keyframes dash-stroom { to { background-position: 10px 0; } }
html.js .feed-doel {
  opacity: 0; transform: translateX(-12px) rotate(-2.5deg) scale(0.95);
  transition: opacity 0.5s ease 0.3s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
html.js .feed-item.zichtbaar .feed-doel { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }

/* De golvende route die verhaal.js bouwt; zodra hij er is gaan
   de rechte fallback-lijnen uit */
.route-svg {
  position: absolute; top: 0; left: 0; z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.route-spoor {
  fill: none; stroke: rgba(129, 178, 154, 0.3);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.route-vul {
  fill: none; stroke: var(--teal-deep);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.route-loper circle {
  fill: var(--teal-deep); stroke: var(--paper); stroke-width: 2;
}
.route-loper rect, .route-loper path {
  fill: none; stroke: var(--paper); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.feed-lijst.heeft-route::before,
.feed-lijst.heeft-route::after { display: none; }
/* De route wijst door: van het logboek naar de rust van 11:02 */
.route-verder {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  width: fit-content; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  text-decoration: none;
  color: var(--teal-deep);
  font-family: 'Outfit', sans-serif; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.3s ease;
}
.route-verder svg { width: 26px; height: 84px; }
.route-verder svg path {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.route-verder:hover, .route-verder:focus-visible { color: #1F5A40; }
html.js .route-verder svg { animation: verder-dobber 2.6s ease-in-out infinite; }
@keyframes verder-dobber {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

.feed-slot {
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; max-width: 44ch;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 340;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.55;
}
html.js .feed-item {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.js .feed-item.zichtbaar { opacity: 1; transform: translateY(0); }

/* ───────────────── ACTE 3 · 11:02 ───────────────── */
.act-3 {
  background: linear-gradient(180deg, var(--paper), var(--cream));
  color: var(--navy);
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem clamp(5rem, 10vw, 7.5rem);
}
.act-3 .klok { color: var(--teal-deep); }
.act-3 h2 {
  font-family: 'Fraunces', serif; font-weight: 340;
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  line-height: 1.12; letter-spacing: -0.01em;
  margin: 1.4rem auto 1.5rem; max-width: 18ch;
}
.act-3 h2 em { font-style: italic; color: var(--peach-deep); }
.act-3 .uitleg {
  max-width: 52ch; margin: 0 auto 2.6rem;
  font-size: clamp(1rem, 1.8vw, 1.15rem); color: rgba(61, 64, 91, 0.9);
}
.waarheden {
  list-style: none; max-width: 30rem; margin: 0 auto 3rem;
  font-family: 'Outfit', sans-serif; font-size: 1rem;
}
.waarheden li {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(61, 64, 91, 0.12);
}
.waarheden li:first-child { border-top: 1px solid rgba(61, 64, 91, 0.12); }
.prijs-anker { margin: 0 auto 3rem; max-width: 34rem; }
.prijs-label {
  font-family: 'Outfit', sans-serif; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep);
}
.prijs-bedrag {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -0.01em;
  margin: 0.5rem 0 0.6rem;
}
.prijs-sub { font-size: 0.92rem; color: rgba(61, 64, 91, 0.84); max-width: 46ch; margin: 0 auto 0.8rem; }
.prijs-link {
  font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 500;
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}
.prijs-link:hover, .prijs-link:focus-visible { color: var(--peach); }
.cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem;
  background: var(--navy); color: var(--paper);
  text-decoration: none;
  padding: 1.2rem 2.2rem; border-radius: 999px;
  box-shadow: 0 16px 36px -14px rgba(43, 45, 66, 0.55);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease;
}
.cta:hover, .cta:focus-visible {
  background: var(--peach); transform: translateY(-3px);
  box-shadow: 0 22px 44px -16px rgba(224, 122, 95, 0.6);
}
.disclaimer {
  margin-top: 3.4rem; font-size: 0.82rem; color: rgba(61, 64, 91, 0.55);
}
.disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ───────────────── Brug · de tweede dienst ───────────────── */
.brug {
  background: var(--indigo);
  color: var(--paper);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.brug .klok { color: var(--teal-soft); }
.brug h2 {
  font-family: 'Fraunces', serif; font-weight: 340;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.14; letter-spacing: -0.01em;
  margin: 1.1rem auto 1.3rem; max-width: 20ch;
}
.brug h2 em { font-style: italic; color: var(--apricot); }
.brug-tekst {
  max-width: 52ch; margin: 0 auto 2.1rem;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: rgba(251, 249, 237, 0.86);
}
.brug-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.02rem;
  color: var(--paper); text-decoration: none;
  border-bottom: 2px solid var(--peach); padding-bottom: 3px;
  transition: color 0.3s ease;
}
.brug-link span { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.brug-link:hover, .brug-link:focus-visible { color: var(--apricot); }
.brug-link:hover span, .brug-link:focus-visible span { transform: translateX(4px); }

/* ───────────────── Mobiel ───────────────── */
@media (max-width: 700px) {
  /* De sticky-scrub van de scene werkt niet prettig op een smal scherm:
     de kaarten stapelden over elkaar en de inhoud was onleesbaar.
     Op mobiel tonen we de mail en de twee concepten daarom als een
     rustige verticale stapel, elk volledig leesbaar met body en
     ondertekening. */
  .scene { height: auto; }
  .bg-dag { opacity: 1; }
  .stage {
    position: static; height: auto; overflow: visible;
    padding: 3.5rem 1.25rem 1rem;
    gap: 1.3rem;
  }
  .fase-labels { display: none; }
  .mail-wrap { width: 100%; }
  .mail, .concept { filter: none !important; }
  /* relative (niet static) zodat de Verzonden-stempel op zijn eigen
     conceptkaart valt en niet bovenaan de stapel zweeft */
  .concept { position: relative; margin-top: 1.3rem; }
  /* Scroll-reveal: de mail en de concepten faden rustig in als je
     erlangs scrolt (in plaats van de desktop-scrub). Bewust traag en
     zacht. */
  html.js .mail, html.js .concept {
    opacity: 0; transform: translateY(42px);
    transition: opacity 1.05s ease, transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  html.js .mail.in, html.js .concept.in { opacity: 1 !important; transform: none !important; }
  html.js .concept.in { transition-delay: 0.12s; }
  .concept .mail-body { display: block; }
  .hl { background-size: 100% 88% !important; }
  .hl-tag { display: none; }
  .stempel { right: 0.6rem; }
  /* De Verzonden-stempel komt als losse beat pas later in beeld: niet
     meegeplakt aan de kaart-reveal, maar wanneer je verder scrolt en de
     kaart hoger in beeld staat (klasse via verhaal.js). */
  html.js .concept .stempel {
    opacity: 0; transform: rotate(9deg) scale(1.4);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
  }
  html.js .concept.toon-stempel .stempel { opacity: 1; transform: rotate(-3deg) scale(1); }
  /* De regel zit nu binnen .mail-wrap, dus de oude flex-gap (1.3rem)
     tussen mail-wrap en de regel vervalt. Marge compenseert dat zodat de
     mobiele afstand exact gelijk blijft (~46px boven de regel). */
  .fase-voetnoot {
    position: static; top: auto; margin: 2.9rem auto 0;
    opacity: 1 !important; transform: none !important;
  }
}

/* ───────────────── Reduced motion en geen JS ─────────────────
   Het verhaal blijft volledig leesbaar: alle stappen onder elkaar,
   zonder sticky-scrub of bewegende elementen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chip { animation: chip-val 0.001ms forwards; }
  .muis::before { animation: none; opacity: 1; }
  .scene { height: auto; }
  .bg-dag { opacity: 1; }
  .stage { position: static; height: auto; padding: 4rem 1.5rem; gap: 1.6rem; }
  .fase-labels { display: none; }
  .mail, .concept, .stempel, .fase-voetnoot { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; }
  .concept { position: static; margin-top: 1.4rem; }
  .hl { background-size: 100% 88% !important; transition: none !important; }
  .hl-tag { opacity: 1; transform: none; transition: none; }
  .fase-voetnoot { position: static; margin-top: 1.8rem; }
  .dagklok, .merk-scheider { display: none; }
  html.js .feed-item { opacity: 1; transform: none; transition: none; }
  .feed-lijst::after { transform: none; }
  .feed-doel { opacity: 1 !important; transform: none !important; transition: none !important; }
  .feed-doel::before { animation: none; }
  .feed-flows .flows-dot { animation: none; }
  .route-verder svg { animation: none; }
}
html:not(.js) .scene { height: auto; }
html:not(.js) .bg-dag { opacity: 1; }
html:not(.js) .stage { position: static; height: auto; padding: 4rem 1.5rem; }
html:not(.js) .fase-labels { display: none; }
html:not(.js) .mail, html:not(.js) .concept, html:not(.js) .stempel, html:not(.js) .fase-voetnoot { opacity: 1; transform: none; }
html:not(.js) .concept { position: static; margin-top: 1.4rem; }
html:not(.js) .fase-voetnoot { position: static; top: auto; margin-top: 1.8rem; }
html:not(.js) .hl { background-size: 100% 88%; }
html:not(.js) .feed-lijst::after { transform: none; }
html:not(.js) .dagklok, html:not(.js) .merk-scheider { display: none; }