/* ============================================================
   training.css, Ai-trainingspagina (na lux.css)
   Prompt-demo in de hero · calculator-verfijning · review-stagger.
   Additief: zonder training.js blijft alles statisch leesbaar.
   ============================================================ */

/* ---------- Prompt-demo: glazen Ai-kaart over de herofoto ----------
   Een prompt typt zichzelf, het antwoord streamt binnen (training.js).
   Zonder JS toont de kaart het eerste voorbeeld statisch. */
.promptcard {
  position: absolute;
  z-index: 2;
  /* rechtsonder, met de overhang aan de rechterkant en een klein stukje
     onder de foto: zo blijft de foto zelf bijna helemaal in beeld */
  left: auto;
  right: clamp(-2.4rem, -3vw, -1rem);
  bottom: clamp(-5rem, -5.8vw, -3rem);
  width: min(23.5rem, 88%);
  padding: 0.95rem 1.15rem 1.2rem;
  border-radius: var(--r);
  font-size: 0.86rem;
  line-height: 1.5;
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1px var(--glass-border),
    0 30px 70px -24px rgba(0, 0, 0, 0.55);
}
@media (max-width: 899px) {
  .promptcard {
    left: auto;
    right: 0.8rem;
    bottom: 0.8rem;
    width: min(20rem, calc(100% - 1.6rem));
    font-size: 0.8rem;
  }
}
.promptcard__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.promptcard__dots {
  display: inline-flex;
  gap: 0.3rem;
}
.promptcard__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.promptcard__title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.promptcard__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.promptcard__row + .promptcard__row {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.promptcard__tag {
  flex: 0 0 auto;
  margin-top: 0.1em;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.28em 0.6em;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.promptcard__tag--ai {
  color: var(--accent-ink);
  background: var(--grad-accent);
}
/* vaste hoogtes zodat de kaart niet "ademt" tijdens het typen */
.promptcard__q { min-height: 2.9em; color: var(--ink); font-weight: 540; }
.promptcard__a { min-height: 4.4em; color: var(--ink-soft); }
.promptcard__caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  border-radius: 1px;
  background: var(--accent-deep);
  box-shadow: 0 0 8px var(--accent-glow);
  opacity: 0;
}
.promptcard__caret.is-on {
  opacity: 1;
  animation: pcBlink 0.95s steps(1, end) infinite;
}
@keyframes pcBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
/* scene-wissel: oud antwoord zakt zachtjes weg */
.promptcard__q span[data-pc-q],
.promptcard__a span[data-pc-a] {
  transition: opacity 0.28s var(--ease-out);
}
.promptcard.is-swap .promptcard__q span[data-pc-q],
.promptcard.is-swap .promptcard__a span[data-pc-a] {
  opacity: 0;
}

/* ---------- Calculator: gevulde slider-track + gloeiend resultaat ---------- */
/* training.js schrijft --fill per slider; fallback = bestaande vlakke track */
.v2 .calc-range {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--accent-2) 0%,
    var(--accent-3) var(--fill, 50%),
    var(--line-strong) var(--fill, 50%)
  );
}
/* aura in het resultaatpaneel groeit mee met de besparing (--heat 0..1) */
.calc__result::before {
  content: "";
  position: absolute;
  right: -20%;
  top: -30%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  filter: blur(30px);
  opacity: calc(0.2 + var(--heat, 0.3) * 0.65);
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.calc__result > * { position: relative; }
.calc__euro span {
  font-variant-numeric: tabular-nums;
}
/* korte lichtpuls wanneer het bedrag naar een nieuwe waarde tikt */
.calc__euro {
  transition: filter 0.35s var(--ease-out);
}
.calc__euro.is-tick {
  filter: drop-shadow(0 0 24px var(--accent-glow));
}

/* ---------- De ommekeer: vóór wordt doorgestreept, ná licht op ----------
   Het paneel is één glas-element met twee helften en een scharnier-badge.
   Zonder JS/motion staat alles gewoon leesbaar in zijn eindstand. */
.shift {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.4rem);
  border-radius: var(--r-xl);
  overflow: hidden;
}
@media (min-width: 880px) {
  .shift { grid-template-columns: 1fr 1px 1.08fr; }
}
.shift__col {
  padding: clamp(1.7rem, 1.2rem + 1.8vw, 2.9rem);
}
.shift__col--before {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.shift__col--after {
  background: radial-gradient(130% 110% at 100% 0%, rgba(102, 198, 255, 0.12), transparent 62%);
}
.shift__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.shift__label--after {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.shift__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.shift__item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: var(--fs-body);
  line-height: 1.45;
}
.shift__mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 0.05em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.shift__mark svg { width: 13px; height: 13px; }
.shift__mark--x {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: #ff9a9a;
}
.shift__mark--v {
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 16px -6px var(--accent-glow);
}
.shift__col--before .shift__item { color: var(--ink-soft); }
.shift__col--after .shift__item { color: var(--ink); font-weight: 540; }
/* de doorstreping: échte text-decoration (klopt ook bij regelval), die per
   item gestaggerd van transparant naar zichtbaar kleurt zodra het paneel in
   beeld komt, leest als één-voor-één wegstrepen van de oude werkwijze */
.shift__col--before .shift__txt {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, #ff9a9a 60%, var(--ink-faint));
}
.lux-on[data-motion="on"] .shift:not(.is-in) .shift__col--before .shift__txt {
  text-decoration-color: transparent;
}
.lux-on[data-motion="on"] .shift.is-in .shift__col--before .shift__txt {
  transition: text-decoration-color 0.5s var(--ease-out) var(--d, 0s);
}
.lux-on[data-motion="on"] .shift.is-in [data-shift-old] {
  transition: opacity 0.55s var(--ease-out) calc(var(--d, 0s) + 0.25s);
  opacity: 0.62;
}
/* ná-items schuiven gestaggerd binnen */
.lux-on[data-motion="on"] [data-shift-new] {
  opacity: 0;
  transform: translateX(16px);
  animation: luxFailsafe 0.5s var(--ease-out) 3s forwards;
}
.lux-on[data-motion="on"] .shift.is-in [data-shift-new] {
  transition: opacity 0.6s var(--ease-out) var(--d, 0s),
    transform 0.6s var(--ease-out) var(--d, 0s);
  opacity: 1;
  transform: none;
}
/* de uitkomst-cijfers onder de ná-lijst */
.shift__gains {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.2rem;
  margin-top: 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.shift__gains b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.shift__gains > div > span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  max-width: 15ch;
}
/* scharnier: verticale naad met een glazen pijl-badge in het midden */
.shift__divider {
  position: relative;
  background: var(--line);
}
.shift__hinge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 0 var(--glass-hi), 0 14px 34px -14px var(--accent-glow);
  z-index: 2;
}
.shift__hinge svg { width: 20px; height: 20px; }
@media (max-width: 879px) {
  .shift__divider { height: 1px; }
  .shift__hinge svg { transform: rotate(90deg); }
}

/* ---------- Taak-matcher: chips + passende modellen ---------- */
.fit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
}
.fit__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.fit__chip {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 560;
  color: var(--ink-soft);
  padding: 0.55em 1.1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-3) 55%, transparent);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fit__chip:hover { color: var(--ink); border-color: var(--accent-deep); transform: translateY(-1px); }
.fit__chip.is-active {
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-color: transparent;
  box-shadow: 0 10px 26px -12px var(--accent-glow);
}
.model-card { position: relative; }
.model-fit {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4em 0.85em;
  border-radius: var(--r-pill);
  color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 45%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.model-card.is-fit .model-fit { opacity: 1; transform: none; }
/* NB: de selectors hieronder dragen .models-grid als prefix zodat ze het
   winnen van [data-motion="on"] .reveal.is-in (zelfde bron van waarheid
   voor opacity/transform/filter), anders dimt er niets. */
.models-grid .model-card.is-fit {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1.5px var(--accent-deep),
    0 30px 70px -28px var(--accent-glow);
}
.models-grid .model-card.is-dim {
  opacity: 0.35;
  filter: saturate(0.5);
}
.model-card { transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }

/* ---------- Het traject: één doorlopende lijn ----------
   De lead belooft "één doorlopende lijn", dus die lijn staat er ook echt:
   een haarlijn links die zich met de scroll vult, met per fase één knoop.
   Voorbij de laatste knoop dooft de lijn uit in plaats van te stoppen -
   stap vier is doorlopend, dus daar hoort geen eindpunt.
   Verder houdt alles zijn mond: gelijke rijen, geen pijlen, geen stickers. */
.traject {
  --traject-gutter: clamp(1.6rem, 0.9rem + 2.8vw, 3.6rem);
  --traject-node-y: 0.44rem; /* hoogte van het knoop-hart t.o.v. de rijkop */
  position: relative;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-left: var(--traject-gutter);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem); /* ruimte om uit te doven */
}

/* De rail loopt van de eerste knoop tot voorbij de laatste stap en
   vervaagt onderaan via een mask, dat is de "doorlopend"-boodschap. */
.traject__rail {
  position: absolute;
  left: 0;
  top: var(--traject-head, var(--traject-node-y)); /* JS zet het exact op knoop 1 */
  bottom: 0;
  width: 1.5px;
  /* Het spoor is bijna onzichtbaar: wat je ziet is de lijn die zich vult.
     Zo tekent hij zich terwijl je leest, en concurreert hij niet met de
     vaste .spine van de pagina zelf, die links van het scherm meeloopt. */
  background: var(--line);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
}
/* De vulling is precies zo hoog als de afstand eerste → laatste knoop
   (JS zet --traject-span), zodat scaleY(1) exact op stap vier eindigt. */
.traject__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--traject-span, 100%);
  background: linear-gradient(to bottom, var(--accent-deep), var(--accent-3));
  box-shadow: 0 0 10px -1px var(--accent-glow);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
/* Zonder JS of zonder motion staat de lijn er gewoon helemaal. */
html:not(.has-js) .traject__fill,
[data-motion="off"] .traject__fill { transform: scaleY(1); }

.traject__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.8rem, 1.8rem + 4.5vw, 6.5rem);
}
.traject__step {
  display: grid;
  gap: clamp(1.3rem, 0.9rem + 2vw, 3rem);
  align-items: start;
}
/* Vanaf tablet hangt de tekst optisch midden tegen de foto, anders staat er
   onder elk kort tekstblok een gat zo hoog als het verschil in hoogte. */
@media (min-width: 980px) {
  .traject__step {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }
}

/* De knoop hangt aan het tekstblok, niet aan de rij: zo staat hij altijd
   op de hoogte van het label, ook nu de tekst gecentreerd meebeweegt. */
.traject__body { position: relative; }
.traject__node {
  position: absolute;
  left: calc(-1 * var(--traject-gutter));
  top: var(--traject-node-y);
  translate: -50% -50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1.5px var(--line-strong);
  transition: background var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.traject__step.is-live .traject__node {
  background: var(--accent-deep);
  scale: 1.12;
  box-shadow: 0 0 0 1.5px var(--accent-deep),
    0 0 0 6px color-mix(in srgb, var(--accent-deep) 13%, transparent);
}

/* Wanneer + waar. Dat is echte informatie, dus dat is het label -
   geen genummerde sticker die alleen herhaalt wat de volgorde al zegt. */
.traject__when {
  margin: 0 0 clamp(0.7rem, 0.5rem + 0.5vw, 1rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--dur-2) var(--ease-out);
}
.traject__step.is-live .traject__when { color: var(--accent-deep); }
.traject__when span {
  margin: 0 0.5em;
  opacity: 0.4;
}

.traject__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.22rem + 1.05vw, 2.25rem);
  font-weight: 640;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  color: var(--ink);
}
.traject__text {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-soft);
  line-height: 1.58;
}

.traject__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-soft);
}
.traject__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* De foto zakt bij binnenkomst rustig op zijn plek. Alleen als reveal-js
   echt draait, zodat de failsafe nooit een ingezoomde foto achterlaat. */
[data-motion="on"].reveal-js .traject__media img {
  transform: scale(1.05);
  transition: transform 1.4s var(--ease-out);
}
[data-motion="on"].reveal-js .traject__media.is-in img { transform: none; }

/* ---------- Factsheet: de training concreet, als datasheet ----------
   Eén glazen kaart met de harde feiten onder elkaar: mono-label links,
   de waarde groot in display-type rechts. Leest als een spec-sheet,
   zodat een potentiële klant in tien seconden weet of het past. */
.facts {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.4rem);
  padding: clamp(0.4rem, 0.2rem + 0.8vw, 1rem) clamp(1.4rem, 1rem + 2vw, 3rem);
}
.fact {
  display: grid;
  grid-template-columns: minmax(8.5rem, 15rem) 1fr;
  gap: 0.35rem 2.5rem;
  align-items: baseline;
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
}
.fact:last-child { border-bottom: 0; }
.fact__label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.15rem);
  font-weight: 640;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  color: var(--ink);
}
/* het kerngetal in de waarde krijgt de merk-gradient, één accent per regel */
.fact__value em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fact__detail {
  grid-column: 2;
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .fact { grid-template-columns: 1fr; gap: 0.3rem; }
  .fact__detail { grid-column: 1; }
}

/* ---------- Reviews: kolommen komen gestaggerd binnen ---------- */
.bubbles .bubble:nth-child(3n + 2) { --reveal-delay: 0.08s; }
.bubbles .bubble:nth-child(3n) { --reveal-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .promptcard__caret.is-on { animation: none; }
}