/* LANDING-COACH-SCROLLYTELLING — the coach origin's public root.
   Self-contained: own token block, no imports, no external fonts. app.css is
   loaded before this file only so the shared waitlist sheet keeps its styling;
   every rule here is namespaced .ls-* so the app's own surfaces are untouched.
   DRIFT-ANKER: de scrub-, copy- en .ls-shot/.ls-ui-blokken hieronder zijn de
   canonieke blokken uit landing/preview/landing.css — wijzig ze daar eerst. */

.ls-root {
  /* Surfaces */
  --ls-surface-base: #0F0F10;
  --ls-surface-raised: #161618;
  /* Text */
  --ls-text-primary: #E8E8EA;
  --ls-text-secondary: #9C9CA3;
  --ls-text-tertiary: #62626A;
  --ls-on-accent: #0F0F10;
  /* Accent — scarce by design: CTA button, progress fill, hero cue, focus ring */
  --ls-accent: #ADFF00;
  --ls-accent-hover: #C1FF40;
  /* Chrome */
  --ls-chrome-mid: #8A8A92;
  --ls-chrome-dim: #3A3A40;
  /* Type */
  --ls-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ls-text-hero: clamp(2rem, 4.5vw, 3.25rem);
  --ls-text-scene-heading: clamp(1.375rem, 2.2vw, 1.75rem);
  --ls-text-scene-body: clamp(0.9375rem, 1.1vw, 1.0625rem);
  --ls-text-label: 0.75rem;
  --ls-text-cta-heading: clamp(1.75rem, 3.5vw, 2.5rem);
  --ls-text-caption: 0.8125rem;
  /* Motion */
  --ls-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ls-duration-fast: 200ms;
}

html.ls-html,
body.ls-body {
  margin: 0;
  padding: 0;
  background: var(--ls-surface-base);
}

.ls-root {
  background: var(--ls-surface-base);
  color: var(--ls-text-primary);
  font-family: var(--ls-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.ls-root :focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 4px;
}

/* ── Hero ─────────────────────────────────────────────── */
.ls-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px 96px;
  box-sizing: border-box;
  position: relative;
}

.ls-hero__mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.ls-hero__wordmark {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ls-chrome-mid);
}

.ls-hero__title {
  margin: 32px 0 0;
  max-width: 640px;
  font-size: var(--ls-text-hero);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.ls-hero__lede {
  margin: 20px 0 0;
  max-width: 520px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ls-text-secondary);
}

.ls-hero__cue {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  font-size: var(--ls-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-tertiary);
}

/* COACHKASSA-LEGT-UIT — 'Scroll' zit in een eigen <b> zodat data-i18n de tekst
   kan omzetten zonder het geanimeerde streepje ernaast te wissen. */
.ls-hero__cue b { font-weight: inherit; }

/* De taalrij zweeft rechtsboven, boven de video-etappes uit. Geen accentkleur:
   dit is een schakelaar, geen beloftevolle knop — de accentknop op deze pagina
   is en blijft 'Meld je interesse'. */
.ls-lang {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(15, 15, 16, 0.72);
  border: 1px solid var(--ls-chrome-dim);
  backdrop-filter: blur(8px);
}

.ls-lang__btn {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ls-text-tertiary);
  font: inherit;
  font-size: var(--ls-text-caption);
  line-height: 1;
  cursor: pointer;
}

.ls-lang__btn[aria-pressed="true"] {
  background: var(--ls-chrome-dim);
  color: var(--ls-text-primary);
}

.ls-hero__cue span {
  display: block;
  width: 1px;
  height: 20px;
  margin: 10px auto 0;
  background: var(--ls-accent);
  opacity: 0.5;
}

/* ── Chapter / scenes ─────────────────────────────────── */
.ls-chapter {
  position: relative;
}

.ls-stage {
  display: none;
}

.ls-scene {
  position: relative;
  padding: 0 0 64px;
}

.ls-scene__img {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
  background: var(--ls-surface-base);
}

.ls-copy {
  box-sizing: border-box;
  padding: 24px;
  max-width: 640px;
  margin: 0 auto;
}

.ls-copy__label {
  margin: 0 0 10px;
  font-size: var(--ls-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-text-tertiary);
}

.ls-copy h2 {
  margin: 0 0 12px;
  font-size: var(--ls-text-scene-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.ls-copy p {
  margin: 0;
  font-size: var(--ls-text-scene-body);
  line-height: 1.55;
  color: var(--ls-text-secondary);
}

/* ── CTA ──────────────────────────────────────────────── */
.ls-cta {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ls-surface-raised);
  padding: 96px 24px;
  box-sizing: border-box;
}

.ls-cta__mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.ls-cta h2 {
  margin: 24px 0 0;
  font-size: var(--ls-text-cta-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.ls-cta__body {
  margin: 16px 0 0;
  max-width: 480px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ls-text-secondary);
}

.ls-cta__button {
  display: inline-block;
  margin: 32px 0 0;
  padding: 16px 40px;
  background: var(--ls-accent);
  color: var(--ls-on-accent);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 16px rgba(173, 255, 0, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ls-duration-fast) var(--ls-ease-out-expo),
              box-shadow var(--ls-duration-fast) var(--ls-ease-out-expo),
              transform var(--ls-duration-fast) var(--ls-ease-out-expo);
}

.ls-cta__button:hover {
  background: var(--ls-accent-hover);
  box-shadow: 0 4px 24px rgba(173, 255, 0, 0.3);
  transform: translateY(-1px);
}

.ls-cta__button:active { transform: translateY(0); }

.ls-cta__secondary {
  display: inline-block;
  margin: 24px 0 0;
  color: var(--ls-text-tertiary);
  font-size: var(--ls-text-caption);
  text-decoration: none;
  border-bottom: 1px solid var(--ls-chrome-dim);
  padding-bottom: 2px;
  transition: color var(--ls-duration-fast);
}

.ls-cta__secondary:hover { color: var(--ls-text-secondary); }

/* ── Progress indicator (scrub mode, desktop only) ────── */
.ls-progress { display: none; }

/* ══ Scrub mode — added by JS once the video is live ═══ */
/* The stage spans the whole chapter as an out-of-flow layer, and the video
   sticks inside it. Sticky-in-flow would have eaten 100vh of scroll budget and
   would have kept the frame pinned over the CTA that follows the chapter. */
.ls-chapter.is-scrub .ls-stage {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ls-chapter.is-scrub .ls-stage video {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 50vh;
  object-fit: cover;
  background: var(--ls-surface-base);
}

.ls-chapter.is-scrub .ls-scene {
  height: 200vh;
  padding: 0;
}

.ls-chapter.is-scrub .ls-scene__img { display: none; }

/* No opacity choreography: the copy is ALWAYS visible and rides the native
   sticky mechanics — it scrolls in from the viewport bottom while the previous
   scene's copy is being pushed out through the top. */
.ls-chapter.is-scrub .ls-copy {
  position: sticky;
  top: 0;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
}

/* Copy is anchored to the BOTTOM EDGE OF THE IMAGE (50vh + 16px), never to the
   viewport bottom — pinning it low left a dark gap between frame and text. */
.ls-chapter.is-scrub .ls-copy > div {
  box-sizing: border-box;
  width: 100%;
  padding: calc(50vh + 16px) 24px 0;
  transform: translateY(var(--ls-drift, 0px));
}

/* App-frame per scène: een live HTML/CSS-nabootsing van het app-element (geen
   screenshot) in een telefoonraampje dat tijdens de dwell van rechts
   binnenschuift, boven de copy. De JS zet --ls-shot-x (115% → 0%) op de figure;
   --ls-shot-dir spiegelt de inkomrichting voor desktop-frames links van de
   video. */
.ls-shot { display: none; }

.ls-chapter.is-scrub .ls-shot {
  display: block;
  position: absolute;
  top: 9vh;
  right: 16px;
  width: min(44vw, 200px);
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  background: #0F0F10;
  transform: translateX(calc(var(--ls-shot-x, 115%) * var(--ls-shot-dir, 1)))
             translateY(calc(var(--ls-drift, 0px) * 0.6));
  will-change: transform;
}

/* ── Live app-elementen (Nacht-tokens uit de app zelf) ──────────────────────
   JS zet cumulatieve klassen is-s1…is-s4 op de figure. [data-s=n] verschijnt
   bij is-sn; [data-t=n] is een vinkje dat bij is-sn aantikt; .ls-ui__draw is
   een SVG-pad (pathLength=100) dat door JS getekend wordt; .ls-ui__num
   [data-count] telt op met de seq. */
.ls-shot--ui .ls-ui {
  box-sizing: border-box;
  aspect-ratio: 9 / 18;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 14px;
  background: linear-gradient(180deg, #0A0F1A, #03040A 70%);
  color: #F0F2F5;
  font-size: 11px;
  line-height: 1.35;
}

.ls-ui__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  color: #6B7280;
  letter-spacing: 0.04em;
}
.ls-ui__batt {
  width: 16px;
  height: 8px;
  border: 1px solid #6B7280;
  border-radius: 2.5px;
  position: relative;
}
.ls-ui__batt::after {
  content: "";
  position: absolute;
  inset: 1.5px 30% 1.5px 1.5px;
  background: #6B7280;
  border-radius: 1px;
}

.ls-ui__head { margin: 2px 0 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.ls-ui__sub { margin: -6px 0 2px; font-size: 9.5px; color: #6B7280; }

/* Fase-onthulling + vinkjes */
.ls-shot [data-s] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.ls-shot.is-s1 [data-s="1"],
.ls-shot.is-s2 [data-s="2"],
.ls-shot.is-s3 [data-s="3"],
.ls-shot.is-s4 [data-s="4"] { opacity: 1; transform: none; }

.ls-ui__tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2AF0EA;
  position: relative;
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ls-ui__tick::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 7px;
  height: 4px;
  border-left: 1.8px solid #03040A;
  border-bottom: 1.8px solid #03040A;
  transform: rotate(-45deg);
}
.ls-shot.is-s2 [data-t="2"],
.ls-shot.is-s3 [data-t="3"],
.ls-shot.is-s4 [data-t="4"] { transform: scale(1); }

/* Rijen: chips, sets, taken, agenda-items */
.ls-ui__chip, .ls-ui__set, .ls-ui__task, .ls-ui__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #1E2533;
}
.ls-ui__chip b, .ls-ui__set b { margin-left: auto; font-weight: 600; }
.ls-ui__set span { color: #6B7280; font-size: 9.5px; }
.ls-ui__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-left: 3px solid #2AF0EA;
}
.ls-ui__row span { color: #6B7280; font-size: 9px; }
.ls-ui__row b { font-weight: 600; font-size: 11px; }

.ls-ui__cta {
  margin-top: auto;
  text-align: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: #2AF0EA;
  color: #03040A;
  font-weight: 700;
  font-size: 11px;
}

.ls-ui__pr {
  margin-top: auto;
  align-self: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(42, 240, 234, 0.12);
  border: 1px solid rgba(42, 240, 234, 0.4);
  color: #2AF0EA;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Voortgangsring (vult mee met de scroll via .ls-ui__draw) */
.ls-ui__ring { position: relative; width: 64px; margin: 4px auto; }
.ls-ui__ring svg { display: block; width: 100%; transform: rotate(-90deg); }
.ls-ui__ring-bg { fill: none; stroke: #1E2533; stroke-width: 6; }
.ls-ui__ring-fg {
  fill: none;
  stroke: #2AF0EA;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.ls-ui__ring-txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
.ls-ui__ring-txt small { font-size: 9px; color: #6B7280; font-weight: 600; }

/* Chat: bubbels + typindicator */
.ls-ui__bub {
  max-width: 84%;
  padding: 7px 10px;
  border-radius: 14px;
  font-size: 10.5px;
}
.ls-ui__bub--coach {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #1E2533;
  border-bottom-left-radius: 4px;
}
.ls-ui__bub--me {
  align-self: flex-end;
  background: #2AF0EA;
  color: #03040A;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}
.ls-ui__bub--typing { display: flex; gap: 3px; padding: 9px 11px; }
.ls-ui__bub--typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6B7280;
  animation: ls-typing 1.1s infinite;
}
.ls-ui__bub--typing i:nth-child(2) { animation-delay: 0.18s; }
.ls-ui__bub--typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ls-typing {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ls-chapter.is-scrub .ls-stage video { height: 55vh; }
  .ls-chapter.is-scrub .ls-copy > div { padding-top: calc(55vh + 16px); }
  .ls-chapter.is-scrub .ls-shot { top: 4vh; right: 4vw; width: 160px; }
}

/* Desktop: video contained and centred, copy pinned to the outer side zones.
   The central 44% of the viewport is never written on — the icon is the hero. */
@media (min-width: 1024px) {
  .ls-chapter.is-scrub .ls-stage video {
    top: 7.5vh;
    height: 85vh;
    object-fit: contain;
  }

  .ls-chapter.is-scrub .ls-copy { align-items: center; }

  .ls-chapter.is-scrub .ls-copy > div {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% + var(--ls-drift, 0px)));
    width: 320px;
    max-width: 28%;
    padding: 0;
  }

  .ls-chapter.is-scrub .ls-copy[data-pos="left"] > div { left: 5%; }
  .ls-chapter.is-scrub .ls-copy[data-pos="right"] > div { right: 5%; }

  /* Het frame neemt de zijzone tegenover de copy; de centrale 44% blijft van
     het video-icoon. Links geplaatst = spiegel de inkomrichting. */
  .ls-chapter.is-scrub .ls-shot {
    top: 50%;
    width: 220px;
    transform: translateX(calc(var(--ls-shot-x, 115%) * var(--ls-shot-dir, 1)))
               translateY(calc(-50% + var(--ls-drift, 0px) * 0.6));
  }
  .ls-chapter.is-scrub .ls-copy[data-pos="left"] .ls-shot { right: 5%; }
  .ls-chapter.is-scrub .ls-copy[data-pos="right"] .ls-shot {
    left: 5%;
    right: auto;
    --ls-shot-dir: -1;
  }

  /* Scene 6 is the brand moment: copy centred in the letterbox below the frame,
     clear of the 85vh video box. */
  .ls-chapter.is-scrub .ls-copy[data-pos="center"] { align-items: flex-end; }
  .ls-chapter.is-scrub .ls-copy[data-pos="center"] > div {
    position: static;
    transform: translateY(var(--ls-drift, 0px));
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 24px 4vh;
    text-align: center;
  }

  .ls-root.is-js .ls-progress {
    display: block;
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 2px;
    height: 120px;
    background: rgba(58, 58, 64, 0.2);
    z-index: 3;
  }

  .ls-progress__fill {
    display: block;
    width: 100%;
    height: 0;
    background: rgba(173, 255, 0, 0.3);
  }
}

/* ══ CTA staged reveal — only when JS is driving ═══════ */
.ls-root.is-js .ls-cta__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ls-ease-out-expo), transform 600ms var(--ls-ease-out-expo);
}

.ls-root.is-js .ls-cta.is-in .ls-cta__item {
  opacity: 1;
  transform: translateY(0);
}

.ls-root.is-js .ls-cta.is-in .ls-cta__item:nth-child(2) { transition-delay: 100ms; }
.ls-root.is-js .ls-cta.is-in .ls-cta__item:nth-child(3) { transition-delay: 200ms; }
.ls-root.is-js .ls-cta.is-in .ls-cta__item:nth-child(4) { transition-delay: 350ms; }
.ls-root.is-js .ls-cta.is-in .ls-cta__item:nth-child(5) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .ls-root.is-js .ls-cta__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ls-hero__cue span { animation: none; }
}