/* ============================================================================
   MK Vision — Journey (3D route door onze werkwijze)
   Een gewone pinned sectie: alle lagen zitten in .jrn-stage, die sticky is en
   één schermhoogte beslaat. In de bron stond alles op position:fixed — dat
   werkte daar omdat de sectie de hele pagina was, maar hier zou het canvas
   dan achter álle secties liggen.
   De sectie heeft bewust GEEN eigen achtergrond: de pagina-achtergrond loopt
   gewoon door, zoals op de rest van home.
   ========================================================================== */

.mk-journey-sec{
  --mx:50%;
  --my:40%;
  --jrn-bg-rgb:245,241,235;    /* JS houdt dit gelijk aan de paginakleur */
  --jrn-accent:#fc5b34;
  --jrn-ink:#0b0f14;
  --jrn-muted:#191919;
  --jrn-icon:48px;
  --jrn-scroll:496svh;         /* scrollruimte van de sectie */

  position:relative;
  width:100%;
  height:var(--jrn-scroll);
  background:transparent;      /* pagina-achtergrond loopt door */
}

/* De pin: één schermhoogte die blijft staan zolang de sectie langs scrollt. */
.jrn-stage{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* Alle lagen absoluut binnen de stage — niet fixed t.o.v. het venster. */
.jrn-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  user-select:none;
  pointer-events:none;
  touch-action:pan-y;
  opacity:0;
  transition:opacity .7s ease-out;
  z-index:0;
}
.jrn-canvas.is-ready{opacity:1;}

.jrn-hoverglow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.95;
  background:radial-gradient(420px circle at var(--mx) var(--my),
    rgba(252,91,52,.11), rgba(252,91,52,.05) 24%, rgba(252,91,52,0) 64%);
}
.jrn-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(var(--jrn-bg-rgb),.62) 0%, rgba(var(--jrn-bg-rgb),.18) 23%, rgba(var(--jrn-bg-rgb),0) 43%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%, transparent 75%, rgba(var(--jrn-bg-rgb),.08));
}
.jrn-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.20;
  background-image:
    linear-gradient(rgba(23,23,23,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,23,23,.025) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 58% 48%, black 0 45%, transparent 82%);
  mask-image:radial-gradient(circle at 58% 48%, black 0 45%, transparent 82%);
}

/* --- Labels boven de stops ------------------------------------------------- */
.jrn-labels{position:absolute; inset:0; z-index:2; pointer-events:none;}
.jrn-label{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  will-change:transform,opacity;
}
.jrn-label__tag{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(248,244,239,.82);
  border:1px solid rgba(23,23,23,.07);
  backdrop-filter:blur(12px);
  font-family:IBMPlexMono, MKVMono, monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--jrn-ink);
  box-shadow:0 6px 22px rgba(23,23,23,.05);
}
.jrn-label__title{
  font-weight:400;
  font-size:15px;
  line-height:1;
  letter-spacing:-.025em;
  color:var(--jrn-ink);
  white-space:nowrap;
  padding:7px 12px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(23,23,23,.06);
  box-shadow:0 8px 24px rgba(23,23,23,.05);
}
.jrn-label.is-active{opacity:1; transform:translate(-50%,-58%);}
.jrn-label.is-dim{opacity:.56;}

/* --- Hero ------------------------------------------------------------------ */
.jrn-hero{
  position:absolute;
  z-index:3;
  top:0; left:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.jrn-hero__content{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(28px,3vw,48px);
  text-align:center;
  color:var(--jrn-ink);
  padding-top:clamp(96px,12vh,128px);
  will-change:transform,opacity;
}
.jrn-hero__title{
  margin:0;
  font-weight:400;
  font-size:max(33.4px,3.3vw);
  line-height:1.05;
  letter-spacing:-.045em;
}
.jrn-hero__title span{display:block;}
.jrn-hero__subtitle{
  margin:0;
  max-width:620px;
  font-size:clamp(18px,1.55vw,28px)!important;
  line-height:1.2;
  letter-spacing:-.03em;
  color:var(--jrn-muted);
}
.jrn-hero__subtitle span{display:block;}

.jrn-hero__scroll{
  white-space:nowrap;
  position:absolute;
  bottom:clamp(28px,4vh,48px);
  left:50%;
  transform:translate(-50%);
  display:flex; align-items:center; justify-content:center;
  height:48px; padding:0 16px;
  font-family:IBMPlexMono, MKVMono, monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--jrn-ink);
}
.jrn-hero__scroll > span{overflow:hidden; position:relative; padding:0 0 8px;}
.jrn-hero__scroll > span:after{
  content:"";
  position:absolute; bottom:0; left:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0) translateZ(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1) .25s;
}
.jrn-hero__scroll-in{
  display:flex;
  transform:translate3d(0,calc(100% + 7px),0);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) .65s;
}
.jrn-hero.show .jrn-hero__scroll > span:after{transform:scaleX(1) translateZ(0);}
.jrn-hero.show .jrn-hero__scroll-in{transform:translateZ(0);}
.jrn-hero.hide .jrn-hero__scroll-in{
  transform:translate3d(0,calc(100% + 7px),0);
  transition:transform .35s ease;
}
.jrn-hero.hide .jrn-hero__scroll > span:after{
  transform:scaleX(0) translateZ(0);
  transition:transform .4s cubic-bezier(.55,0,1,.45) .1s;
}

/* --- Stappenlijst, linksonder in de stage ---------------------------------- */
.jrn-flow__steps{
  position:absolute;
  left:0; bottom:0;
  z-index:3;
  padding:clamp(24px,3vw,48px);
  display:flex; flex-direction:column;
  width:max-content;
  /* JS faadt deze in zodra de hero uit beeld is (ze delen één stage). */
  opacity:0;
  pointer-events:none;
  will-change:opacity,transform;
}
/* Verticale geleidelijn door alle stappen; de actieve markering schuift mee. */
.jrn-flow__steps::before{
  content:"";
  position:absolute;
  left:calc(clamp(24px,3vw,48px) + var(--jrn-icon) / 2 - 1px);
  top:clamp(24px,3vw,48px);
  bottom:clamp(24px,3vw,48px);
  width:2px;
  border-radius:2px;
  background:rgba(11,15,20,.09);
}
.jrn-flow__marker{
  position:absolute;
  left:calc(clamp(24px,3vw,48px) + var(--jrn-icon) / 2 - 1px);
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#ff8a5c,var(--jrn-accent));
  box-shadow:0 0 14px rgba(252,91,52,.45);
  will-change:transform,height;
}

.jrn-step{position:relative; display:flex; flex-direction:column; backface-visibility:hidden;}
.jrn-step__header{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:18px;
  cursor:pointer;
  padding:9px 0;
}
.jrn-step.is-active .jrn-step__header{cursor:default; pointer-events:none;}
.jrn-step__num{
  display:flex; align-items:center; justify-content:center;
  width:var(--jrn-icon); height:var(--jrn-icon);
  border-radius:50%;
  font-family:IBMPlexMono, MKVMono, monospace;
  font-size:13px;
  letter-spacing:.02em;
  color:rgba(11,15,20,.42);
  flex-shrink:0; position:relative;
  transition:color .45s ease;
}
.jrn-step__num span{position:relative; z-index:2;}
/* Witte pil die de geleidelijn onderbreekt: de stap zit visueel óp de lijn. */
.jrn-step__num:before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:#fff;
  transform:scale(.58);
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
  will-change:transform;
  box-shadow:0 2px 10px rgba(17,30,43,.07);
}
/* Accentring die opengaat zodra de stap actief wordt. */
.jrn-step__num:after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--jrn-accent);
  opacity:0; transform:scale(.58);
  transition:opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.jrn-step.is-active .jrn-step__num{color:var(--jrn-accent);}
.jrn-step.is-active .jrn-step__num:after{opacity:1; transform:scale(1);}
.jrn-step__title{
  margin:0;
  font-weight:400;
  font-size:clamp(18px,1.6vw,28px);
  line-height:1.2;
  letter-spacing:-.03em;
  color:rgba(11,15,20,.45);
  /* Kleinere sprong dan voorheen: rustiger en beter leesbaar in ruststand. */
  transform:scale(.78);
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1), color .45s ease;
  will-change:transform;
}
.jrn-step:hover .jrn-step__title{color:rgba(11,15,20,.72);}
.jrn-step.is-active .jrn-step__title{color:var(--jrn-ink);}
.jrn-step__body{
  display:grid; grid-template-rows:0px 0fr; overflow:hidden;
  transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1);
}
.jrn-step__body:before{content:""; min-height:0; overflow:hidden;}
.jrn-step__body-inner{display:flex; gap:20px; min-height:0; overflow:hidden;}
/* De losse voortgangsbalk is vervangen door de doorlopende geleidelijn met
   meebewegende marker; deze kolom houdt alleen nog de uitlijning vast. */
.jrn-step__track{
  width:var(--jrn-icon); flex-shrink:0;
}
.jrn-step__bar,.jrn-step__fill{display:none;}

/* Beschrijving als glazen kaart, in de taal van de andere kaarten op de site. */
.jrn-step__desc{
  margin:0;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.5;
  letter-spacing:-.02em;
  color:var(--jrn-muted);
  max-width:460px;
  opacity:0; transform:translateY(10px);
  will-change:opacity,transform;
  padding:15px 18px 17px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 34px rgba(17,30,43,.09);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.jrn-step.is-active .jrn-step__num:before{transform:scale(1); transition-duration:.6s;}
.jrn-step.is-active .jrn-step__body{grid-template-rows:16px 1fr;}
.jrn-step.is-active .jrn-step__title{transform:scale(1);}

@media(max-width:820px){
  .mk-journey-sec{--jrn-icon:40px; --jrn-scroll:560svh;}
  .jrn-stage{height:100dvh;}
  .jrn-hero__content{padding:96px 24px 0; gap:32px;}
  .jrn-hero__subtitle{max-width:330px;}
  .jrn-hero__scroll{bottom:28px; font-size:10px;}
  .jrn-flow__steps{padding:24px;}
  .jrn-step__desc{max-width:280px;}
  .jrn-step__title{font-size:20px; transform:scale(.7);}
  .jrn-step.is-active .jrn-step__title{transform:scale(1);}
  .jrn-shade{
    background:
      radial-gradient(240px circle at var(--mx) var(--my), rgba(252,91,52,.08), rgba(252,91,52,0) 60%),
      linear-gradient(180deg, rgba(var(--jrn-bg-rgb),0) 0 40%, rgba(var(--jrn-bg-rgb),.30) 62%, rgba(var(--jrn-bg-rgb),.62) 82%);
  }
  .jrn-hoverglow{background:radial-gradient(240px circle at var(--mx) var(--my), rgba(252,91,52,.10), rgba(252,91,52,0) 64%);}
}

/* Char-reveal wrappers voor de hero-tekst (zelfde taal als de site-reveals). */
.jrn-hero .mk-word-wrap{display:inline-block; white-space:nowrap;}
.jrn-hero .mk-char-wrap{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.16em; margin-bottom:-.16em;
}
.jrn-hero .mk-char-wrap > .char{display:inline-block; will-change:transform;}

@media (prefers-reduced-motion: reduce){
  .jrn-hero__title, .jrn-hero__subtitle{opacity:1!important;}
  .jrn-hero .char{transform:none!important;}
}


/* --- Sectiebadge boven de titel -------------------------------------------- */
/* Zelfde taal als de badges elders op de site: mono, uppercase, accentkleur,
   met een klein rondje ervoor. */
.jrn-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:IBMPlexMono, MKVMono, monospace;
  font-size:clamp(11px,.78vw,14px);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--jrn-accent);
  padding:.62em 1.05em .58em;
  border:1px solid rgba(252,91,52,.28);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
}
.jrn-hero__badge:before{
  content:"";
  width:.45em; height:.45em;
  border-radius:50%;
  background:currentColor;
}

/* --- Mobiel: één stap tegelijk --------------------------------------------- */
/* De volledige lijst dekte op een klein scherm de 3D-route af, en de stappen
   die één voor één in- en uitfaadden liepen door de path-animatie heen. Nu
   staat alleen de stap in beeld waar de route op dat moment is. */
@media(max-width:812px){
  .jrn-hero__badge{font-size:11px; padding:.6em 1em .55em;}
  .jrn-flow__steps::before,
  .jrn-flow__marker{display:none!important;}
  .jrn-flow__steps{padding-bottom:clamp(28px,5vh,52px);}
  .jrn-step{display:none!important;}
  .jrn-step.is-active{display:flex!important;}
  /* Body meteen open en zonder uitklap-animatie: er is toch maar één stap. */
  .jrn-step.is-active .jrn-step__body{
    grid-template-rows:0px 1fr!important;
    transition:none!important;
  }
  .jrn-step.is-active .jrn-step__desc{opacity:1!important; transform:none!important;}
  .jrn-step.is-active .jrn-step__title{transform:none!important;}
}