/* =============================================================
   SM Pillen-keuze
   Sabri's "je hebt nu twee keuzes" als Matrix-moment: blauw loopt
   blauw draait rondjes in de eigen werkdag (klus, factuur, wachten),
   groen is te vinden waar klanten zoeken en de klant reist naar een site
   die haar taal spreekt.
   Licht en donker via de band-keuze, accent via --pk-accent.
   ============================================================= */

.sm-pk {
  /* licht is de standaard */
  --pk-bg: #f4f6f5;
  --pk-ink: #0d1512;
  --pk-stil: rgba(13, 21, 18, .62);
  --pk-rand: rgba(13, 21, 18, .13);
  --pk-kaart: rgba(13, 21, 18, .03);
  --pk-accent: #0f8f74;
  --pk-accent-2: #276B4D;
  --pk-blauw: #4AA3F0;
  --pk-easing: cubic-bezier(.165, .84, .44, 1);

  box-sizing: border-box;
  background: var(--pk-bg);
  color: var(--pk-ink);
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij);
  text-align: center;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.sm-pk *, .sm-pk *::before, .sm-pk *::after { box-sizing: inherit; }

.sm-pk--donker {
  --pk-bg: #0a0909;
  --pk-ink: #ffffff;
  --pk-stil: rgba(255, 255, 255, .58);
  --pk-rand: rgba(255, 255, 255, .10);
  --pk-kaart: rgba(255, 255, 255, .04);
  --pk-accent: #3DC78F;
}

.sm-pk-in { max-width: var(--sm-inhoud); margin: 0 auto; }
.sm-pk-kop {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.15; margin: 0 0 14px; color: var(--pk-ink);
}
.sm-pk-sub { color: var(--pk-stil); font-size: 1.02rem; line-height: 1.7; margin: 0 0 44px; }

.sm-pk-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; }
.sm-pk-kaart {
  border: 1px solid var(--pk-rand); border-radius: 20px; padding: 34px 26px 30px;
  background: var(--pk-kaart);
  transition: transform .45s var(--pk-easing), border-color .35s ease;
}
.sm-pk-kaart:hover { transform: translateY(-4px); }
.sm-pk-groen:hover { border-color: var(--pk-accent); }
.sm-pk-titel { font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 8px; color: var(--pk-ink); }
.sm-pk-tekst { color: var(--pk-stil); font-size: var(--sm-tekst, 16px); line-height: 1.65; margin: 0 0 20px; }
.sm-pk-tekst b, .sm-pk-tekst strong { color: var(--pk-ink); font-weight: 600; }

/* ---------- de scenes ----------
   Allebei een vak dat als één plaat meeschaalt (svg 100 x 62 + tekst in cqw).
   Blauw draait door zolang het in beeld is: dat patroon is het verhaal.
   Groen speelt één keer als het in beeld komt; de eindstand is de gewone stand. */
.sm-pk-podium {
  position: relative; aspect-ratio: 100 / 62; margin: 0 0 22px;
  border-radius: 18px; border: 1px solid var(--pk-rand); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pk-ink) 5%, transparent), transparent 70%);
  container-type: inline-size; text-align: left; font-size: 3cqw; line-height: 1.2;
}
.sm-pk-podium .pp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.sm-pk-podium .pp-gedachte {
  position: absolute; left: 4%; bottom: 5%;
  padding: 1.6cqw 2.8cqw; border-radius: 3cqw 3cqw 3cqw .8cqw;
  background: var(--pk-ink); color: var(--pk-bg);
  font-size: 3cqw; font-weight: 700; white-space: nowrap; transform-origin: 10% 100%;
}
.sm-pk-podium .pp-chip {
  position: absolute; right: 4%; bottom: 5%;
  font-size: 2.6cqw; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 1.3cqw 2.4cqw; border-radius: 9cqw; border: 1px solid var(--pk-rand); color: var(--pk-stil);
}

/* film met figuurtjes (instelling film, sm-km-film.js): het canvas vult het vak */
.sm-pk-podium--film { background: #070a09; }
.sm-pk-podium--film .sm-pk-film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* blauw: de werkdag draait rondjes (klus, factuur, wachten), de maanden gaan voorbij */
.sm-pk-podium--lus { color: var(--pk-blauw); }
.sm-pk-podium--lus .pp-baan { fill: none; stroke: color-mix(in srgb, var(--pk-blauw) 50%, transparent); stroke-width: .55; stroke-dasharray: 2 1.6; }
.sm-pk-podium--lus .pp-halte { fill: var(--pk-bg); stroke: var(--pk-stil); stroke-width: .5; }
.sm-pk-podium--lus .pp-rond { transform-box: view-box; transform-origin: 36px 31px; animation: pp-draai 12s linear infinite; }
.sm-pk-podium--lus .pp-ik-rond { transform-box: view-box; transform-origin: 36px 48px; animation: pp-draai 12s linear infinite reverse; }
.sm-pk-podium--lus .pp-pijl { fill: var(--pk-blauw); }
.sm-pk-podium--lus .pp-ik { fill: var(--pk-blauw); }
.sm-pk-podium--lus .pp-kal { fill: color-mix(in srgb, var(--pk-ink) 5%, transparent); stroke: var(--pk-stil); stroke-width: .5; }
.sm-pk-podium--lus .pp-kal-kop { stroke: var(--pk-stil); stroke-width: .5; }
.sm-pk-podium--lus .pp-tel { fill: color-mix(in srgb, var(--pk-ink) 7%, transparent); stroke: var(--pk-stil); stroke-width: .5; }
.sm-pk-podium--lus .pp-halte-lbl {
  position: absolute; font-size: 2.5cqw; font-weight: 700; color: var(--pk-stil); white-space: nowrap;
}
.sm-pk-podium--lus .pp-h1 { left: 36%; top: 17%; transform: translate(-50%, -100%); }
.sm-pk-podium--lus .pp-h2 { left: 55.5%; top: 50%; transform: translate(0, -50%); }
.sm-pk-podium--lus .pp-h3 { left: 17%; top: 50%; transform: translate(-100%, -50%); }
.sm-pk-podium--lus .pp-maanden { position: absolute; left: 74%; top: 24%; width: 17%; height: 23%; }
.sm-pk-podium--lus .pp-m {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3.6cqw; font-weight: 700; color: var(--pk-stil); opacity: 0; animation: pp-maand 12s linear infinite;
}
.sm-pk-podium--lus .pp-m1 { opacity: 1; }
.sm-pk-podium--lus .pp-m2 { animation-delay: 3s; } .sm-pk-podium--lus .pp-m3 { animation-delay: 6s; } .sm-pk-podium--lus .pp-m4 { animation-delay: 9s; }
.sm-pk-podium--lus .pp-tel-lbl {
  position: absolute; left: 82.5%; top: 68%; transform: translate(-50%, -50%);
  font-size: 1.9cqw; font-weight: 700; color: var(--pk-stil); white-space: nowrap;
}
.sm-pk-podium--lus .pp-gedachte { font-weight: 500; font-style: italic; }
@keyframes pp-draai { to { transform: rotate(360deg); } }
@keyframes pp-maand { 0% { opacity: 0; transform: translateY(-1.2cqw); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(1.2cqw); } }

/* groen: te vinden waar ze zoeken; de klant reist van Google naar een site die haar taal spreekt */
.sm-pk-podium--stap { color: var(--pk-accent); }
.sm-pk-podium--stap .pp-draad { fill: none; stroke: var(--pk-accent); stroke-width: .45; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .6; }
.sm-pk-podium--stap .pp-reisspoor { fill: none; stroke: var(--pk-accent); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .35; }
.sm-pk-podium--stap .pp-klant-fig { fill: var(--pk-accent); transform: scale(1.3); transform-box: fill-box; transform-origin: center; }
.sm-pk-podium--stap .pp-bron {
  position: absolute; top: 5%; width: 22%; height: 23%; padding: 1.4cqw 1.8cqw;
  display: flex; flex-direction: column; justify-content: center; gap: .8cqw;
  border-radius: 2cqw; background: var(--pk-bg); border: 1px solid var(--pk-accent);
  box-shadow: 0 0 0 .4cqw color-mix(in srgb, var(--pk-accent) 14%, transparent);
}
.sm-pk-podium--stap .pp-b1 { left: 22%; } .sm-pk-podium--stap .pp-b2 { left: 46%; } .sm-pk-podium--stap .pp-b3 { left: 70%; }
.sm-pk-podium--stap .pp-bron-lbl {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.9cqw; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pk-stil);
}
.sm-pk-podium--stap .pp-bron-url { font-size: 2.5cqw; font-weight: 700; color: var(--pk-accent); }
.sm-pk-podium--stap .pp-vink {
  position: absolute; right: 1.2cqw; top: 1.2cqw; width: 3cqw; height: 3cqw;
  fill: none; stroke: var(--pk-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.sm-pk-podium--stap .pp-site {
  position: absolute; left: 28%; top: 47%; width: 44%; height: 31%; overflow: hidden;
  display: flex; flex-direction: column; gap: 1.2cqw; border-radius: 2cqw;
  background: var(--pk-bg); border: 1px solid var(--pk-rand);
  box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .18);
}
.sm-pk-podium--stap .pp-site-balk { display: flex; gap: .7cqw; padding: 1.1cqw 1.6cqw; border-bottom: 1px solid var(--pk-rand); }
.sm-pk-podium--stap .pp-site-balk i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--pk-rand); }
.sm-pk-podium--stap .pp-site-kop { margin: 0 2cqw; font-size: 2.6cqw; font-weight: 800; letter-spacing: -.01em; color: var(--pk-ink); text-wrap: balance; }
.sm-pk-podium--stap .pp-site-kop mark {
  background: linear-gradient(#d2f65a, #d2f65a) no-repeat 0 65% / 100% 78%; color: #0d1512;
  padding: 0 .3cqw; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sm-pk-podium--stap .pp-site-lijn { display: block; margin: 0 2cqw; width: 60%; height: 1cqw; border-radius: 1cqw; background: var(--pk-rand); }
.sm-pk-podium--stap .pp-site-knop { margin: 0 2cqw; width: 30%; height: 3cqw; border-radius: 9cqw; background: var(--pk-accent); }
.sm-pk-podium--stap .pp-melding {
  position: absolute; left: 4%; bottom: 5%; display: flex; align-items: center; gap: 1.2cqw;
  padding: 1.4cqw 2.4cqw; border-radius: 9cqw; background: var(--pk-accent); color: #04261a;
  font-size: 2.6cqw; font-weight: 800; white-space: nowrap; transform-origin: 10% 50%;
}
.sm-pk--licht .sm-pk-podium--stap .pp-melding { color: #fff; }
.sm-pk-podium--stap .pp-melding svg { width: 2.8cqw; height: 2.8cqw; fill: currentColor; }
.sm-pk-podium--stap .pp-klant-denkt { left: auto; right: 3%; bottom: 5%; border-radius: 3cqw 3cqw .8cqw 3cqw; transform-origin: 90% 100%; }

.sm-pk-podium--stap .pp-b1      { animation: pp-pop .45s var(--pk-easing) both .3s, pp-licht .4s ease both 1s; }
.sm-pk-podium--stap .pp-b2      { animation: pp-pop .45s var(--pk-easing) both .55s, pp-licht .4s ease both 1.25s; }
.sm-pk-podium--stap .pp-b3      { animation: pp-pop .45s var(--pk-easing) both .8s, pp-licht .4s ease both 1.5s; }
.sm-pk-podium--stap .pp-b1 .pp-vink { animation: pp-pop .35s var(--pk-easing) both 1s; }
.sm-pk-podium--stap .pp-b2 .pp-vink { animation: pp-pop .35s var(--pk-easing) both 1.25s; }
.sm-pk-podium--stap .pp-b3 .pp-vink { animation: pp-pop .35s var(--pk-easing) both 1.5s; }
.sm-pk-podium--stap .pp-site    { animation: pp-op .6s var(--pk-easing) both 1.7s; }
.sm-pk-podium--stap .pp-draad   { animation: pp-teken .6s cubic-bezier(.65, 0, .35, 1) both 1.9s; }
.sm-pk-podium--stap .pp-reisspoor { animation: pp-teken-zacht 1.6s cubic-bezier(.45, 0, .2, 1) both 2.3s; }
.sm-pk-podium--stap .pp-site-kop mark { animation: pp-mark .7s cubic-bezier(.65, 0, .35, 1) both 3.1s; }
.sm-pk-podium--stap .pp-klant-fig { animation: pp-kleur .5s ease both 3.9s; }
.sm-pk-podium--stap .pp-klant-denkt { animation: pp-pop .5s var(--pk-easing) both 4.1s; }
.sm-pk-podium--stap .pp-melding { animation: pp-pop .5s var(--pk-easing) both 4.8s; }
@keyframes pp-pop { 0% { opacity: 0; transform: scale(.4) } 60% { opacity: 1; transform: scale(1.1) } }
@keyframes pp-op { from { opacity: 0; transform: translateY(2.4cqw) } }
@keyframes pp-licht { from { border-color: var(--pk-rand); box-shadow: none; } }
@keyframes pp-mark { from { background-size: 0% 78%; } }
@keyframes pp-kleur { from { fill: var(--pk-stil); } }
/* opacity erbij: een ronde lijnkop op lengte nul tekent anders een los puntje */
@keyframes pp-teken { 0% { stroke-dashoffset: 1; opacity: 0 } 12% { opacity: .6 } }
@keyframes pp-teken-zacht { 0% { stroke-dashoffset: 1; opacity: 0 } 12% { opacity: .35 } }

/* ---------- de knoppen ---------- */
/* de ringknop rijdt op de sm-base-motor; hier alleen de kleuren */
.sm-pk .sm-btn-ring {
  --sm-accent: var(--pk-accent);
  --sm-accent-2: var(--pk-accent-2);
  --sm-ring-vul: #0a0909;
  --sm-ring-vul-hover: #ffffff;
  color: #fff;
}
.sm-pk .sm-btn-ring:hover { color: #0d1512; }

.sm-pk-blauw-knop {
  background: transparent; border: 1px solid var(--pk-rand); color: var(--pk-stil);
  padding: .6rem 1.4rem; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; font-family: inherit;
  transition: color .3s ease, border-color .3s ease;
  min-height: 44px;
}
.sm-pk-blauw-knop:hover { color: var(--pk-ink); }
.sm-pk-knipoog { display: none; margin: 16px 0 0; font-size: .9rem; color: var(--pk-stil); font-style: italic; }
.sm-pk-gekozen .sm-pk-knipoog { display: block; }

.sm-pk-voetnoot {
  margin: 36px auto 0;
  font-family: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--pk-stil);
}

/* ---------- randgevallen ---------- */
@media (max-width: 700px) { .sm-pk-keuzes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  /* stilstaand: blauw staat bij zijn mensen, groen is al door de deur en de groep is binnen */
  html:not(.sm-rustig):not(.sm-beweeg) .sm-pk-podium *, html:not(.sm-rustig):not(.sm-beweeg) .sm-pk-podium *::before { animation: none !important; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-pk-kaart, html:not(.sm-rustig):not(.sm-beweeg) .sm-pk-kaart:hover { transform: none; transition: none; }
}

/* het nummer in de sectie-badge volgt het accent van deze sectie */
.sm-pk { --sm-badge-accent: var(--pk-accent); }

/* de gedeelde kopmaat; twee klassen zodat hij wint van de regel hierboven */
.sm-pk .sm-pk-kop{
  font-family: var(--sm-kop-font);
  font-size: var(--sm-kop);
  line-height: var(--sm-kop-regel);
  letter-spacing: var(--sm-kop-sp);
  text-wrap: balance;
}

/* geen los woord op de laatste regel */
.sm-pk .sm-pk-tekst { text-wrap: pretty; }
/* de korte blauwe tekst gelijk verdelen; de lange groene houdt pretty (balance stopt boven 6 regels en laat dan een los woord staan) */
.sm-pk .sm-pk-blauw .sm-pk-tekst { text-wrap: balance; }
.sm-pk .sm-pk-sub { text-wrap: balance; }

/* mobiel: balance verdeelt alleen het stuk vóór een break-mobile, pretty houdt ook het stuk erna vrij van een los woord */
@media (max-width: 767px) { .sm-pk .sm-pk-blauw .sm-pk-tekst { text-wrap: pretty; } }

/* een vetgedrukte openingszin staat op een eigen regel, als kopje boven de uitleg.
   Anders brak hij midden in de zin af en liep hij door in de gewone tekst. */
.sm-pk-tekst :is(b, strong):first-child { display: block; text-wrap: balance; margin-bottom: .2em; }

/* woorden in de kop in de accentkleur (veld kop_groen) */
.sm-pk-kopaccent { color: var(--pk-accent); }