/*
  Alles is uitgetekend op 1920×1200 en schaalt mee via --u (één ontwerp-eenheid).
  Kleuren zijn gemeten in de bedrijfsbrochure van september 2026.
*/
:root {
  --u: min(calc(100vw / 1920), calc(100vh / 1200));
  --navy: #06374f;
  --blauw: #017ac1;
  --cyaan: #37bcea;
  --lime: #a3cf44;
  --groen: #96cb6a;
  --teal: #249399;
  --oranje: #ff932d;
  --geel: #d9dc49;
  --wit: #ffffff;
  --mist: #eef3f6;
  --slide-duur: 7000ms;
  --qr-duur: 20000ms;
  --band-duur: 240s;
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
  --weg: cubic-bezier(0.7, 0, 0.84, 0);
  --heen-en-weer: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
  overscroll-behavior: none;
}

.vormen { position: absolute; }

.scherm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 1920);
  height: calc(var(--u) * 1200);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--navy);
  color: var(--wit);
  transition: color 700ms var(--heen-en-weer) 250ms;
  font-family: Roboto, system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.scherm:focus-visible {
  outline: calc(var(--u) * 6) solid currentColor;
  outline-offset: calc(var(--u) * -6);
}

/* Achtergronden uit de brochure. Twee lagen: de nieuwe vervaagt boven de oude in. */
.gronden {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.grond {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--heen-en-weer) 250ms;
}

.g-blauw { background: linear-gradient(180deg, #06374f 0%, #064465 25%, #055e92 63%, #017ac1 100%); }
.g-navy { background: var(--navy); }
.g-wit { background: var(--wit); }
.g-oranje { background: linear-gradient(180deg, #ff932d 0%, #f7af37 30%, #ebc23f 50%, #dfd446 72%, #d9dc49 100%); }

/* Wit logo op gekleurde slides, kleurenlogo op witte. Zelfde plek, alleen de dekking wisselt. */
.logo {
  position: absolute;
  left: calc(var(--u) * 120);
  top: calc(var(--u) * 92);
  height: calc(var(--u) * 62);
  width: auto;
  transition: opacity 500ms linear 350ms;
}

.logo.kleur { opacity: 0; }
.licht .logo.kleur { opacity: 1; }
.licht .logo.wit { opacity: 0; }

/* Voortgang: zes streepjes, het huidige loopt vol in de tijd van één slide. */
.stappen {
  position: absolute;
  right: calc(var(--u) * 120);
  top: calc(var(--u) * 118);
  display: flex;
  gap: calc(var(--u) * 12);
}

.stap {
  position: relative;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 8);
  background: color-mix(in srgb, currentColor 26%, transparent);
  overflow: hidden;
}

.stap i {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

.stap.klaar i { transform: scaleX(1); }
.stap.nu i { animation: vollopen var(--slide-duur) linear forwards; }
.qr-open .stap.nu i { animation-play-state: paused; }

@keyframes vollopen { to { transform: scaleX(1); } }

/*
  Slides liggen op elkaar; tekst staat altijd op dezelfde plek.
  Volgorde bij een wissel, zodat niets door elkaar loopt:
  0 tot 500 ms    oude slide verdwijnt
  250 tot 950 ms  achtergrond gaat over, band schuift in of uit
  700 ms en later nieuwe slide verschijnt, eerst tekst, dan beeld
*/
.slide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--inkt, inherit);
}

.regel {
  position: absolute;
  left: calc(var(--u) * 120);
  top: calc(var(--u) * 250);
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--u) * 144);
  line-height: 1.04;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* De regel schuift uit een uitsnede omhoog; de extra ruimte onderin houdt staartletters heel. */
.lijn {
  display: block;
  overflow-x: visible;
  overflow-y: clip;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* Rusttoestand zonder overgang: een slide die klaar is springt onzichtbaar terug naar onderen. */
.in {
  display: block;
  transform: translateY(118%);
}

.tweede { color: var(--accent, inherit); }

.slide.aan .in {
  transform: none;
  transition: transform 1000ms var(--uit) 700ms;
}

.slide.aan .tweede { transition-delay: 800ms; }
.slide.aan .derde { transition-delay: 900ms; }

.slide.weg .in {
  transform: translateY(-118%);
  transition: transform 460ms var(--weg);
}

/* Kwaststreek uit de brochure: donkere tekst op een geverfd vlak. */
.kwast {
  display: inline-block;
  margin-left: -0.14em;
  padding: 0 0.2em 0.02em 0.14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23a3cf44' d='M5 20 52 12 140 17 250 9 330 15 395 7 399 40 389 61 397 90 300 94 180 88 90 96 30 90 3 95 9 60 1 40Z'/%3E%3C/svg%3E") center / 100% 86% no-repeat;
}

.kwast.cyaan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%2337bcea' d='M5 20 52 12 140 17 250 9 330 15 395 7 399 40 389 61 397 90 300 94 180 88 90 96 30 90 3 95 9 60 1 40Z'/%3E%3C/svg%3E");
}

.onder {
  position: absolute;
  left: calc(var(--u) * 124);
  top: calc(var(--u) * 590);
  margin: 0;
  font-weight: 300;
  font-size: calc(var(--u) * 48);
  line-height: 1.2;
  color: var(--sub);
  opacity: 0;
  transform: translateY(calc(var(--u) * 18));
}

/* Onder een regel van drie lijnen. */
.onder.laag { top: calc(var(--u) * 744); }

.slide.aan .onder {
  opacity: 1;
  transform: none;
  transition: opacity 800ms var(--uit) 1050ms, transform 800ms var(--uit) 1050ms;
}

/* Bij het verdwijnen blijft de onderregel op zijn plek staan en vervaagt alleen. */
.slide.weg .onder {
  transform: none;
  transition: opacity 300ms linear;
}

/* Zichtbare placeholder voor tekst die Eco-Point nog aanlevert. */
.leeg {
  display: inline-block;
  padding: 0 0.22em;
  border: calc(var(--u) * 5) dashed currentColor;
  font-weight: 300;
}

.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Slide 1: productband onder een boog ---------- */

.band, .band-boog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 500);
  clip-path: url(#boog-band);
  transform: translateY(112%);
  transition: transform 520ms var(--weg);
}

.band { background: var(--wit); overflow: hidden; }

/* De teal rand ligt net boven de band en volgt dezelfde boog. */
.band-boog {
  bottom: calc(var(--u) * 34);
  background: var(--teal);
}

.met-band .band,
.met-band .band-boog {
  transform: none;
  transition: transform 1100ms var(--uit) 760ms;
}

.met-band .band-boog { transition-delay: 660ms; }

.rij {
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 22);
  display: flex;
  width: max-content;
  animation: schuiven var(--band-duur) linear infinite;
  will-change: transform;
}

.rij img {
  flex: none;
  width: calc(var(--u) * 360);
  height: calc(var(--u) * 360);
  margin-right: calc(var(--u) * -60);
}

.qr-open .rij { animation-play-state: paused; }

@keyframes schuiven { to { transform: translateX(-50%); } }

/* ---------- Slide 2: grote ronde foto die rechts uit beeld loopt, met een productstip ---------- */

.s2-schijf, .s2-foto, .s2-product {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
}

.s2-schijf {
  left: calc(var(--u) * 1110);
  top: calc(var(--u) * 236);
  width: calc(var(--u) * 900);
  height: calc(var(--u) * 900);
  background: var(--lime);
}

.s2-foto {
  left: calc(var(--u) * 1170);
  top: calc(var(--u) * 190);
  width: calc(var(--u) * 900);
  height: calc(var(--u) * 900);
  overflow: hidden;
}

.s2-foto img { object-position: 36% 50%; }

.s2-product {
  left: calc(var(--u) * 980);
  top: calc(var(--u) * 800);
  width: calc(var(--u) * 340);
  height: calc(var(--u) * 340);
  overflow: hidden;
  background: var(--mist);
  border: calc(var(--u) * 12) solid var(--wit);
}

.s2-product img { mix-blend-mode: multiply; transform: scale(0.9); }

.s2.aan .s2-schijf { transform: none; transition: transform 1200ms var(--uit) 850ms; }
.s2.aan .s2-foto { transform: none; transition: transform 1200ms var(--uit) 980ms; }
.s2.aan .s2-product { transform: none; transition: transform 900ms var(--uit) 1500ms; }

.s2.weg .s2-schijf, .s2.weg .s2-foto, .s2.weg .s2-product {
  transform: scale(0);
  transition: transform 440ms var(--weg);
}

/* ---------- Slide 3: schermvullende kaart, sporen vanuit Halsteren ---------- */

/* De kaart vult het hele scherm; het land loopt aan alle kanten het beeld uit. De oceaan links blijft vrij voor de tekst. */
.kaart {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.kaart img, .kaart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.s3.aan .kaart { opacity: 1; transition: opacity 900ms var(--uit) 700ms; }
.s3.weg .kaart { transition: opacity 400ms linear; }

/* Elk spoor heeft een eigen startmoment (--d) en duur (--t), gezet in de HTML. */
.spoor {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Sprong: één boog door de lucht, snel en met een zachte landing. */
.sprong.spoor { stroke-width: 11; }

.s3.aan .spoor {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--t) var(--heen-en-weer) var(--d);
}

/* Zoekend spoor: een gestippelde schets langs steden. De masker-lijn onthult hem stukje bij beetje. */
.zoek {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17 15;
}

.masker { stroke: #fff; stroke-width: 26; }
.s3.aan .masker { transition-timing-function: linear; }

/* Tussenstop op een zoekend spoor. */
.halte {
  fill: var(--wit);
  stroke: var(--navy);
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.s3.aan .halte { transform: none; transition: transform 420ms var(--uit) var(--d); }

/* Het vraagteken verschijnt op het moment dat het spoor aankomt. Na een sprong veert het even door. */
.vraag {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.vraag circle { stroke: var(--navy); stroke-width: 6; }

.vraag text {
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 56px;
  text-anchor: middle;
  fill: var(--navy);
}

.s3.aan .vraag { transform: none; transition: transform 620ms var(--uit) var(--d); }
.s3.aan .vraag.na-sprong { transition-timing-function: cubic-bezier(0.3, 1.7, 0.5, 1); }

/* Een vraagteken aan het eind van een zoekend spoor houdt de schetsrand. */
.vraag.na-zoek circle { stroke-dasharray: 12 9; }

.thuis { fill: var(--navy); stroke: var(--wit); stroke-width: 7; }

.thuis-golf {
  fill: none;
  stroke: var(--navy);
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.s3.aan .thuis-golf { animation: golf 2200ms var(--uit) 1400ms infinite; }

@keyframes golf {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(4.2); opacity: 0; }
}

/* Op de kaart liggen de voortgangsstreepjes boven wit land: dan krijgen ze een donker vlak eronder. */
.stappen {
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  margin: calc(var(--u) * -14) calc(var(--u) * -16);
  border-radius: calc(var(--u) * 18);
  background-color: transparent;
  transition: background-color 500ms linear 300ms;
}

.stappen-vlak .stappen { background-color: var(--navy); }

/* ---------- Slide 4: foto in een strook met boog, zoals in de brochure ---------- */

.s4-boog, .s4-foto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 680);
  clip-path: url(#boog-strook);
  transform: translateY(104%);
}

.s4-boog {
  bottom: calc(var(--u) * 62);
  left: calc(var(--u) * -70);
  background: var(--groen);
}

.s4-foto img { object-position: 50% 62%; }

.s4.aan .s4-boog { transform: none; transition: transform 1200ms var(--uit) 850ms; }
.s4.aan .s4-foto { transform: none; transition: transform 1200ms var(--uit) 1000ms; }

.s4.weg .s4-boog, .s4.weg .s4-foto {
  transform: translateY(104%);
  transition: transform 460ms var(--weg);
}

/* ---------- Slide 5: foto in een cirkel met een teal sikkel en twee stippen ---------- */

.s5-schijf, .s5-foto, .s5-stip {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
}

.s5-schijf {
  left: calc(var(--u) * 1196);
  top: calc(var(--u) * 356);
  width: calc(var(--u) * 600);
  height: calc(var(--u) * 600);
  background: var(--teal);
}

.s5-foto {
  left: calc(var(--u) * 1240);
  top: calc(var(--u) * 320);
  width: calc(var(--u) * 560);
  height: calc(var(--u) * 560);
  overflow: hidden;
}

.s5-foto img { object-position: 78% 50%; }

/* Twee producten in kleinere cirkels; de gekleurde rand is het verloop van de badges uit de brochure. */
.s5-stip {
  padding: calc(var(--u) * 12);
}

.s5-stip img {
  border-radius: 50%;
  background: var(--wit);
  object-fit: contain;
  padding: 11%;
}

.s5-stip-1 {
  left: calc(var(--u) * 1110);
  top: calc(var(--u) * 240);
  width: calc(var(--u) * 260);
  height: calc(var(--u) * 260);
  background: linear-gradient(180deg, var(--geel), #ff9a2f);
}

.s5-stip-2 {
  left: calc(var(--u) * 1610);
  top: calc(var(--u) * 770);
  width: calc(var(--u) * 210);
  height: calc(var(--u) * 210);
  background: linear-gradient(180deg, var(--cyaan), #017cc5);
}

.s5.aan .s5-schijf { transform: none; transition: transform 1100ms var(--uit) 950ms; }
.s5.aan .s5-foto { transform: none; transition: transform 1100ms var(--uit) 1080ms; }
.s5.aan .s5-stip-1 { transform: none; transition: transform 800ms var(--uit) 1600ms; }
.s5.aan .s5-stip-2 { transform: none; transition: transform 800ms var(--uit) 1780ms; }

.s5.weg .s5-schijf, .s5.weg .s5-foto, .s5.weg .s5-stip {
  transform: scale(0);
  transition: transform 420ms var(--weg);
}

/* ---------- Slide 6: foto als kwartcirkel vanuit de hoek rechtsonder ---------- */

.s6-boog, .s6-foto {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 100% 0 0 0;
  overflow: hidden;
  clip-path: circle(0% at 100% 100%);
}

.s6-boog {
  width: calc(var(--u) * 826);
  height: calc(var(--u) * 826);
  background: linear-gradient(180deg, var(--cyaan), #017cc5);
}

.s6-foto {
  width: calc(var(--u) * 760);
  height: calc(var(--u) * 760);
}

.s6-foto img { object-position: 64% 30%; }

.s6.aan .s6-boog { clip-path: circle(142% at 100% 100%); transition: clip-path 1300ms var(--uit) 850ms; }
.s6.aan .s6-foto { clip-path: circle(142% at 100% 100%); transition: clip-path 1300ms var(--uit) 1000ms; }

.s6.weg .s6-boog, .s6.weg .s6-foto {
  clip-path: circle(0% at 100% 100%);
  transition: clip-path 440ms var(--weg);
}

/* ---------- QR-scherm: een licht vlak schuift van onder omhoog ---------- */

.qr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 120);
  padding: 0 calc(var(--u) * 150);
  background: var(--mist);
  color: var(--navy);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 420ms var(--weg);
}

.qr-open .qr {
  clip-path: inset(0);
  transition: clip-path 760ms var(--uit);
}

.qr-vlak {
  flex: none;
  padding: calc(var(--u) * 50) calc(var(--u) * 50) calc(var(--u) * 30);
  background: var(--wit);
  border-radius: calc(var(--u) * 28);
}

.qr-vlak canvas {
  display: block;
  width: calc(var(--u) * 580);
  height: calc(var(--u) * 580);
  image-rendering: pixelated;
}

.qr-noot {
  margin: calc(var(--u) * 22) 0 0;
  font-weight: 500;
  font-size: calc(var(--u) * 30);
  text-align: center;
  color: #47647a;
}

.qr-noot[hidden] { display: none; }

.qr-tekst h2 {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--u) * 132);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.qr-tekst p {
  margin: calc(var(--u) * 36) 0 0;
  font-weight: 300;
  font-size: calc(var(--u) * 50);
  line-height: 1.2;
  color: #2f5567;
}

.qr-tekst .tel {
  margin-top: calc(var(--u) * 90);
  font-weight: 500;
  font-size: calc(var(--u) * 38);
  font-variant-numeric: tabular-nums;
}

.leeglopen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 14);
  background: #cfdbe2;
}

.leeglopen i {
  display: block;
  height: 100%;
  background: var(--blauw);
  transform-origin: left center;
}

.qr-open .leeglopen i { animation: leeglopen var(--qr-duur) linear forwards; }

@keyframes leeglopen { to { transform: scaleX(0); } }

/* Minder beweging: alles staat direct op zijn plek, wissels worden korte vervagingen. */
@media (prefers-reduced-motion: reduce) {
  .rij { animation: none; }
  .s3.aan .thuis-golf { animation: none; }
  .slide { opacity: 0; transition: opacity 300ms linear; }
  .slide.aan { opacity: 1; transition-delay: 500ms; }
  .slide .in, .slide .onder, .slide .kaart, .slide .vraag,
  .slide [class^="s2-"], .slide [class^="s4-"], .slide [class^="s5-"], .slide [class^="s6-"] {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none;
    transition: none !important;
  }
  .s4-boog, .s4-foto { clip-path: url(#boog-strook); }
  .spoor { stroke-dashoffset: 0; transition: none !important; }
  .slide .halte { transform: none !important; transition: none !important; }
  .band, .band-boog, .met-band .band, .met-band .band-boog { transition: none; }
  .qr, .qr-open .qr { transition: none; }
}