/* ============================================================
   Marketing landing page — nieuwlid.team (WP-25)
   Loaded ONLY on the public landing page. Consumes design-system.css
   tokens; never redefines them. Theme-aware + reduced-motion safe.
   Layout note: the public shell centers its <main> as a flex item.
   For a scrolling landing we opt that page out into normal block flow.
   ============================================================ */

.public-shell__main:has(.lp) {
  display: block;
  align-items: initial;
}

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

.lp {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-16), 12vw, var(--space-24));
  color: var(--color-neutral-700);
}

/* ---- shared eyebrow / kicker (mono, technical RPG voice) ---- */
.lp-eyebrow,
.lp-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-600);
  margin: 0;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lp-eyebrow__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-success-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success-500) 22%, transparent);
}

/* ============================ HERO ============================ */
.lp-hero {
  display: grid;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}

.lp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.lp-hero__title {
  margin: 0;
  font-size: clamp(2.25rem, 6.5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--color-neutral-900);
  text-wrap: balance;
}

.lp-hero__accent {
  color: var(--color-primary-600); /* fallback if background-clip unsupported */
  background: linear-gradient(120deg, var(--color-primary-400), var(--color-primary-600) 55%, var(--color-primary-800));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-hero__lead {
  margin: 0;
  max-width: 40ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-neutral-600);
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.lp-cta {
  min-height: 3rem;
  padding-inline: var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
}

.lp-trust {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.lp-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-neutral-600);
}

.lp-trust__icon {
  font-size: var(--text-base);
}

/* ---- hero visual: fixed "game panel" (theme-independent dark) ---- */
.lp-hero__visual {
  position: relative;
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 26% 18%, rgb(129 140 248 / 0.28), transparent 55%),
    radial-gradient(circle at 84% 86%, rgb(16 185 129 / 0.16), transparent 52%),
    linear-gradient(150deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.lp-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.lp-tree {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 32rem;
  margin: 0 auto;
  overflow: visible;
}

/* paths */
.lp-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.lp-path--completed { stroke: var(--color-success-500); }
.lp-path--unlocked  { stroke: var(--color-primary-400); }
.lp-path--locked {
  stroke: rgb(255 255 255 / 0.16);
  stroke-dasharray: 6 7;
}

/* hex nodes */
.lp-hex {
  stroke-width: 2;
  stroke-linejoin: round;
}
.lp-hex--completed { fill: var(--color-primary-500); stroke: var(--color-primary-300); }
.lp-hex--progress  { fill: var(--color-primary-300); stroke: #fff; }
.lp-hex--available {
  fill: color-mix(in srgb, var(--color-primary-400) 20%, transparent);
  stroke: var(--color-primary-300);
}
.lp-hex--milestone { fill: var(--color-warning-500); stroke: rgb(255 255 255 / 0.7); }
.lp-hex--locked    { fill: rgb(255 255 255 / 0.06); stroke: rgb(255 255 255 / 0.22); }

.lp-pulse     { fill: rgb(129 140 248 / 0.16); stroke: none; transform-origin: center; }
.lp-glow-gold { fill: rgb(245 158 11 / 0.20); stroke: none; transform-origin: center; }

/* Node-staten (BEM-modifiers op de <g class="lp-node">). Zet hier nooit een
   CSS-transform of een transform-animatie op: dat overschrijft het
   transform="translate(x y)"-attribuut waarmee de node in de SVG staat (zie
   .lp-node__motion hieronder). Kleur, glow en opacity zijn wel veilig. */
.lp-node--live {
  --lp-node-glow: color-mix(in srgb, var(--color-primary-400) 55%, transparent);
}
/* In-progress: dezelfde indigo als de puls-halo, als zachte gloed om de kern. */
.lp-node--live .lp-hex--progress {
  filter: drop-shadow(0 0 5px var(--lp-node-glow));
}

.lp-node--milestone {
  --lp-node-glow: color-mix(in srgb, var(--color-warning-500) 55%, transparent);
}
/* Mijlpaal: warme gouden gloed, iets ruimer dan de live-staat zodat de
   mijlpaal het zwaarste knooppunt in de boom blijft. */
.lp-node--milestone .lp-hex--milestone {
  filter: drop-shadow(0 0 7px var(--lp-node-glow));
}
/* Donkere ster op goud houdt AA-contrast; de lichte rand tilt hem van het vlak. */
.lp-node--milestone .lp-node__star {
  stroke: rgb(255 255 255 / 0.35);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* Motion wrapper: keeps CSS transform/animation off the SVG attribute-anchored
   .lp-node group (CSS transform always wins over the transform attribute and
   would otherwise clobber the translate(x y) positioning). */
.lp-node__motion { transform-origin: center; }

.lp-node__check {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-node__spark { fill: #fff; }
.lp-node__ring  { fill: none; stroke: var(--color-primary-200); stroke-width: 2.5; }
.lp-node__star  { fill: var(--color-primary-900); }
.lp-node__lock  { fill: rgb(255 255 255 / 0.32); }

/* HUD chips */
.lp-hero__hud {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lp-hud__level,
.lp-hud__xp {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}
.lp-hud__level {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.2);
}
.lp-hud__xp {
  background: rgb(16 185 129 / 0.22);
  color: rgb(167 243 208);
  border: 1px solid rgb(16 185 129 / 0.4);
}

/* ========================= SECTIONS ========================== */
.lp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lp-section__title {
  margin: 0;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--color-neutral-900);
  max-width: 22ch;
  text-wrap: balance;
}

.lp-section__lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-neutral-600);
}

/* ========================= PROBLEM =========================== */
.lp-problem__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--space-2);
}

.lp-pain {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lp-pain__num {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--color-primary-500) 26%, transparent);
}

.lp-pain__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-neutral-900);
}

.lp-pain p {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: 1.55;
}

/* ========================= FEATURES ========================== */
.lp-feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--space-2);
}

.lp-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-neutral-200);
}

.lp-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-2xl);
  line-height: 1;
}
.lp-feature__icon--primary { background: var(--color-primary-100); }
.lp-feature__icon--success { background: var(--color-success-100); }
.lp-feature__icon--info    { background: var(--color-info-100); }
.lp-feature__icon--warning { background: var(--color-warning-100); }

.lp-feature__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-neutral-900);
}

.lp-feature p {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: 1.55;
}

/* ======================= SOCIAL PROOF ======================== */
.lp-proof {
  align-items: center;
}

.lp-proof__panel {
  width: min(100%, 46rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  border-radius: var(--radius-2xl);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.lp-proof__panel .lp-section__title {
  max-width: none;
}

.lp-proof__panel .lp-section__lead {
  max-width: 46ch;
}

/* ======================== FINAL CTA ========================= */
.lp-final__card {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  border-radius: var(--radius-2xl);
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, rgb(129 140 248 / 0.35), transparent 55%),
    linear-gradient(140deg, var(--color-primary-700), var(--color-primary-900));
  box-shadow: var(--shadow-xl);
}

.lp-final__title {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}

.lp-final__lead {
  margin: var(--space-4) auto 0;
  max-width: 44ch;
  font-size: var(--text-lg);
  color: rgb(255 255 255 / 0.82);
}

.lp-final__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}

.lp-final__link {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.4);
}
.lp-final__link:hover,
.lp-final__link:focus-visible {
  border-bottom-color: #fff;
}

/* ========================= RESPONSIVE ======================== */
@media (min-width: 62rem) {
  .lp-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (max-width: 40rem) {
  .lp-hero__visual {
    order: -1; /* lead with copy on the smallest screens */
  }
  .lp-hero__hud {
    top: var(--space-3);
    right: var(--space-3);
  }
}

/* ==================== MOTION (opt-in only) =================== */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero__copy > * {
    animation: lp-rise var(--duration-slow) var(--ease-out) both;
  }
  .lp-hero__copy > *:nth-child(1) { animation-delay: 0.02s; }
  .lp-hero__copy > *:nth-child(2) { animation-delay: 0.10s; }
  .lp-hero__copy > *:nth-child(3) { animation-delay: 0.18s; }
  .lp-hero__copy > *:nth-child(4) { animation-delay: 0.26s; }
  .lp-hero__copy > *:nth-child(5) { animation-delay: 0.34s; }

  .lp-hero__visual { animation: lp-rise var(--duration-dramatic) var(--ease-out) both; }

  .lp-tree__nodes > .lp-node > .lp-node__motion { animation: lp-node-in var(--duration-normal) var(--ease-spring) both; }
  .lp-tree__nodes > .lp-node:nth-child(1) > .lp-node__motion { animation-delay: 0.30s; }
  .lp-tree__nodes > .lp-node:nth-child(2) > .lp-node__motion { animation-delay: 0.40s; }
  .lp-tree__nodes > .lp-node:nth-child(3) > .lp-node__motion { animation-delay: 0.52s; }
  .lp-tree__nodes > .lp-node:nth-child(4) > .lp-node__motion { animation-delay: 0.60s; }
  .lp-tree__nodes > .lp-node:nth-child(5) > .lp-node__motion { animation-delay: 0.70s; }
  .lp-tree__nodes > .lp-node:nth-child(6) > .lp-node__motion { animation-delay: 0.80s; }
  .lp-tree__nodes > .lp-node:nth-child(7) > .lp-node__motion { animation-delay: 0.88s; }

  .lp-pulse     { animation: lp-pulse 2.6s var(--ease-in-out) infinite; }
  .lp-glow-gold { animation: lp-gold 3.2s var(--ease-in-out) infinite; }
  /* Live-node ademt mee met de halo (zelfde duur/easing): alleen stroke-opacity,
     dus geen transform-conflict met het translate-attribuut en geen layout-werk. */
  .lp-node--live .lp-hex--progress { animation: lp-node-live 2.6s var(--ease-in-out) infinite; }
  .lp-node__spark { animation: lp-spark 2.2s var(--ease-in-out) infinite; }
  .lp-path--flow {
    stroke-dasharray: 10 12;
    animation: lp-flow 1.6s linear infinite;
  }
}

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lp-node-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lp-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}

@keyframes lp-node-live {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 1; }
}

@keyframes lp-gold {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

@keyframes lp-spark {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes lp-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -22; }
}

/* ==================== HIGH CONTRAST ========================= */
@media (forced-colors: active) {
  .lp-hero__accent {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
  .lp-pain,
  .lp-proof__panel,
  .lp-feature {
    border: 1px solid CanvasText;
  }

  /* Gloed vervaagt de node-omtrek in high contrast; vorm > sfeer. */
  .lp-node--live .lp-hex--progress,
  .lp-node--milestone .lp-hex--milestone {
    filter: none;
  }
}