/* boosten.nu, index.html: "Het scherm uit de film", de dienstensectie onder de
   scrollfilm. Eén telefoon blijft staan terwijl je scrolt; op het scherm zie
   je de weg van één klant (zoeken, de site, de rondleiding) en daarna het
   scherm van de vakman met de aanvraag en de offerte. De tekst per dienst
   scrollt ernaast mee.

   Drie standen, gezet door dienstenfilm.js:
   - geen klasse (zonder JavaScript): een gewone lijst met vier tekstblokken;
   - .df--live: de film, met een sticky toneel;
   - .df--still (prefers-reduced-motion): vier stilstaande schermen, elk bij
     zijn eigen tekst, en de video speelt niet vanzelf.

   De schermen in de telefoon zijn HTML op een vast canvas van 272 px breed.
   dienstenfilm.js schaalt dat canvas met --z naar de echte breedte van de
   telefoon, zodat de verhoudingen op elk formaat gelijk blijven.

   Tijdelijk: de avondachtergrond achter de telefoon (.df-home) is CSS; daar
   komt later een Higgsfield-plaat voor in de plaats. */

.df { padding: var(--section-y) var(--gutter); }
.df__head { max-width: var(--container-lg); margin: 0 auto var(--space-7); }
.df__grid { max-width: var(--container-lg); margin: 0 auto; }

/* ---------- de tekstblokken ---------- */
.df-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.df-card h3 {
  font: var(--weight-bold) clamp(var(--text-xl), 2.6vw, var(--text-2xl))/1.12 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--text-heading);
}
.df-card p { font: var(--type-body); color: var(--text-body); margin: 0; }
.df-card .df-price {
  font: var(--type-mono); font-size: var(--text-xs); color: var(--text-heading);
  background: var(--gold-050); border-left: 2px solid var(--gold-500);
  padding: var(--space-2) var(--space-3);
}
.df-more {
  font: var(--type-label); font-size: var(--text-sm); color: var(--text-heading);
  border-bottom: 1px solid var(--gold-500); padding-bottom: 3px;
}
.df-more:hover { color: var(--gold-600); }

/* Zonder JavaScript: geen toneel, de vier blokken in een raster. */
.df__stagecol { display: none; }
.df__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-8); }
@media (max-width: 900px) { .df__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } }

/* ---------- de film ---------- */
.df--live .df__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: var(--space-8); }
.df--live .df__stagecol { display: block; position: relative; }
/* Onderaan ruimte, zodat het toneel blijft staan tot stap 4 klaar is: het
   laatste blok eindigt op het midden van het scherm, het toneel pas onderaan. */
.df--live .df__steps { display: flex; flex-direction: column; gap: 0; padding-bottom: calc(50vh - 40px); }
.df--live .df-step {
  min-height: 88vh; padding-block: var(--space-7);
  display: flex; flex-direction: column; justify-content: center;
  opacity: .3; transition: opacity 350ms var(--ease-standard);
}
.df--live .df-step:first-child { padding-top: 12vh; }
.df--live .df-step.is-on { opacity: 1; }

.df-stage {
  position: sticky; top: calc(var(--header-h-small) + var(--space-3));
  height: calc(100vh - var(--header-h-small) - var(--space-6)); min-height: 380px;
  overflow: hidden; isolation: isolate;
  background: var(--navy-900);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
}

/* Achtergrond: de klant thuis in de avond (tijdelijk CSS), en in stap 4 het
   laatste beeld van de scrollfilm. */
.df-home {
  position: absolute; inset: 0; filter: blur(1px);
  background:
    radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--gold-300) 55%, transparent) 0 3%, transparent 9%),
    radial-gradient(circle at 80% 22%, color-mix(in srgb, var(--gold-300) 35%, transparent) 0 2%, transparent 7%),
    radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--gold-400) 30%, transparent) 0 4%, transparent 12%),
    radial-gradient(circle at 30% 85%, color-mix(in srgb, var(--navy-200) 25%, transparent) 0 3%, transparent 10%),
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--gold-700) 40%, var(--navy-900)), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--navy-800) 55%, var(--ink-900)), var(--navy-900) 70%);
}
.df-bg { position: absolute; inset: 0; opacity: var(--lock, 0); }
.df-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--navy-900) 45%, transparent); }

.df-lbl {
  position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 20;
  font: var(--type-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--cream-100); background: color-mix(in srgb, var(--navy-900) 60%, transparent);
  padding: 6px 8px;
}

/* ---------- de telefoon ---------- */
.df-frame { position: absolute; inset: 0; }
.df-phone {
  position: absolute; left: 50%; top: 50%;
  height: min(88%, 620px); aspect-ratio: 9 / 19;
  transform: translate(-50%, -50%);
  border: 9px solid var(--ink-900); border-radius: 34px;
  background: var(--paper); overflow: hidden;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
}
.df-phone::before {
  content: ""; position: absolute; top: 8px; left: 35%; width: 30%; height: 16px; z-index: 9;
  background: var(--ink-900); border-radius: 10px;
}
.df-canvas {
  position: absolute; left: 0; top: 0;
  width: 272px; height: var(--ch, 574px);
  transform: scale(var(--z, 1)); transform-origin: 0 0;
}
.df-scr {
  position: absolute; inset: 0; overflow: hidden;
  font: 400 11px/1.4 var(--font-body); color: var(--ink-700);
}

/* Scherm 1: zoeken */
.df-search { background: var(--paper); padding: 34px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.df-bar {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 1px solid var(--ink-100); border-radius: 16px;
  font-size: 12px; color: var(--ink-900);
  box-shadow: 0 1px 3px rgb(10 30 47 / .08);
}
.df-bar svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--ink-500); stroke-width: 2.4; }
.df-caret { width: 1px; height: 14px; background: var(--navy-600); animation: df-blink 1s steps(2) infinite; }
@keyframes df-blink { 50% { opacity: 0; } }
.df-map {
  position: relative; height: 30%; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--green-100);
  opacity: var(--res, 0); transform: translateY(calc((1 - var(--res, 0)) * 12px));
}
.df-map::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(118deg, transparent 44%, var(--paper) 44% 47%, transparent 47%),
    linear-gradient(28deg, transparent 58%, var(--paper) 58% 60%, transparent 60%),
    linear-gradient(90deg, transparent 30%, var(--navy-100) 30% 38%, transparent 38%);
}
.df-pin { position: absolute; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ink-300); }
.df-pin--me {
  width: 18px; height: 18px; background: var(--gold-500);
  box-shadow: 0 0 0 calc(var(--hl, 0) * 6px) color-mix(in srgb, var(--gold-500) 25%, transparent);
}
.df-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; opacity: var(--res, 0); }
.df-res li { position: relative; border: 1px solid var(--ink-100); border-radius: 8px; padding: 8px 9px; display: flex; flex-direction: column; gap: 4px; }
.df-res li > i { height: 7px; background: var(--ink-100); border-radius: 3px; }
.df-res .df-res__me {
  border-color: color-mix(in srgb, var(--gold-500) calc(var(--hl, 0) * 100%), var(--ink-100));
  background: color-mix(in srgb, var(--gold-050) calc(var(--hl, 0) * 100%), var(--paper));
}
.df-res__who { font: 500 9px/1.2 var(--font-mono); color: var(--gold-700); }
.df-res b { font: 600 12px/1.2 var(--font-display); color: var(--navy-700); }
.df-res em { font-style: normal; font-size: 10px; color: var(--ink-500); }
/* De tik op het resultaat */
.df-tap {
  position: absolute; right: 18px; top: 50%; z-index: 8; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--gold-500); background: color-mix(in srgb, var(--gold-500) 25%, transparent);
  transform: translateY(-50%) scale(calc(.6 + var(--tap, 0) * .4)); opacity: var(--tap, 0);
}

/* Scherm 2: de site van "Jouw bedrijf", schuift van rechts in en scrolt naar de video */
.df-site { background: var(--paper); transform: translateX(calc((1 - var(--site, 0)) * 102%)); box-shadow: -10px 0 20px rgb(10 30 47 / .15); }
.df-site__in { padding-top: 30px; display: flex; flex-direction: column; gap: 9px; transform: translateY(calc(var(--sscroll, 0) * -44%)); }
.df-site__nav { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; }
.df-site__nav b { font: 700 13px/1 var(--font-display); color: var(--navy-800); }
.df-site__nav i { position: relative; width: 16px; height: 10px; border-block: 2px solid var(--navy-800); }
.df-site__nav i::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--navy-800); }
.df-site__hero { position: relative; margin: 0 10px; aspect-ratio: 4 / 4.2; border-radius: 8px; overflow: hidden; }
.df-site__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-site__hero h4 {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  font: 700 18px/1.08 var(--font-display); color: var(--paper); text-shadow: 0 2px 12px rgb(0 0 0 / .5);
}
.df-site__cta { display: flex; gap: 6px; padding: 0 10px; }
.df-site__cta span { flex: 1; text-align: center; padding: 9px 0; font: 600 11px/1 var(--font-body); border: 1px solid var(--navy-100); color: var(--navy-800); }
.df-site__cta span:first-child {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.df-site__lines { display: flex; flex-direction: column; gap: 5px; padding: 4px 12px; }
.df-site__lines i { height: 6px; background: var(--ink-100); border-radius: 3px; }
.df-site__lines i:nth-child(2) { width: 86%; }
.df-site__lines i:nth-child(3) { width: 64%; }
.df-site__h { padding: 0 12px; font: 700 13px/1.2 var(--font-display); color: var(--navy-800); }
.df-site__video { position: relative; margin: 0 10px; aspect-ratio: 9 / 12; border-radius: 8px; overflow: hidden; background: var(--navy-900); }
.df-site__video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.df-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: color-mix(in srgb, var(--cream-100) 92%, transparent); }
.df-play::after { content: ""; position: absolute; left: 16px; top: 12px; width: 12px; height: 16px; background: var(--navy-800); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.df-site__len { position: absolute; left: 8px; bottom: 8px; font: 500 9px/1 var(--font-mono); color: var(--paper); background: color-mix(in srgb, var(--navy-900) 60%, transparent); padding: 4px 6px; }

/* Scherm 3: de rondleiding vult het scherm */
.df-video {
  background: var(--navy-900); pointer-events: none;
  opacity: var(--vid, 0); transform: scale(calc(.62 + var(--vid, 0) * .38)); transform-origin: 50% 72%;
}
.df-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-video__ui { position: absolute; left: 10px; right: 10px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; color: var(--paper); }
.df-video__ui b { font: 600 13px/1.2 var(--font-display); text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
.df-video__ui span { font: 500 9px/1.2 var(--font-mono); text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.df-video__bar { height: 3px; background: rgb(255 255 255 / .3); }
.df-video__bar i { display: block; height: 100%; width: calc(var(--vprog, 0) * 100%); background: var(--gold-400); }

/* Scherm 4: het vergrendelscherm van de vakman, via een snede van 45°. Het
   canvas is ongeveer 2,2 keer zo hoog als breed; de onderkant van de snede
   loopt daarom 220% achter op de bovenkant. */
.df-lock {
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  clip-path: polygon(0 0, calc(var(--lock, 0) * 320%) 0, calc(var(--lock, 0) * 320% - 220%) 100%, 0 100%);
  padding: 40px 10px 10px; display: flex; flex-direction: column; gap: 8px; color: var(--cream-100);
}
.df-lock__time { text-align: center; font: 600 44px/1 var(--font-display); letter-spacing: var(--tracking-tight); margin: 10px 0 2px; }
.df-lock__where { text-align: center; font-size: 11px; color: var(--navy-200); margin-bottom: 14px; }
.df-note {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start;
  padding: 9px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--cream-100) 94%, transparent); color: var(--ink-900);
  opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * -14px));
}
.df-note i { position: relative; width: 22px; height: 22px; border-radius: 6px; background: var(--navy-800); }
.df-note i::after { content: ""; position: absolute; inset: 5px; background: var(--gold-500); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.df-note b { display: block; font: 600 11px/1.3 var(--font-display); color: var(--navy-800); }
.df-note span { font-size: 10.5px; line-height: 1.35; color: var(--ink-700); }

/* ---------- smal scherm: beeld vast over de hele hoogte, tekst als kaart onderin ---------- */
@media (max-width: 900px) {
  .df--live .df__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .df--live .df__stagecol,
  .df--live .df__steps { grid-area: 1 / 1; }
  .df--live .df-stage {
    top: var(--header-h-small);
    height: calc(100vh - var(--header-h-small)); height: calc(100svh - var(--header-h-small));
    min-height: 0; clip-path: none;
    margin-inline: calc(-1 * var(--gutter));
  }
  .df--live .df-frame { top: 36px; bottom: 38%; }
  .df--live .df-lbl { right: auto; left: var(--space-3); bottom: auto; top: var(--space-3); }
  .df--live .df__steps { position: relative; z-index: 2; pointer-events: none; padding-bottom: 12vh; }
  .df--live .df-step { min-height: 105vh; padding: 0 0 var(--space-3); justify-content: flex-end; opacity: 0; }
  /* De eerste stap begint pas te tellen als het toneel vaststaat: zijn bovenkant
     ligt dan op de referentielijn van 90% (zie dienstenfilm.js). Anders typt de
     klant al terwijl de telefoon nog achter de kaart zit. */
  .df--live .df-step:first-child { padding-top: 0; margin-top: calc(90vh - var(--header-h-small)); }
  .df--live .df-step.is-on { opacity: 1; }
  .df--live .df-card {
    position: sticky; bottom: var(--space-3); width: 100%; pointer-events: auto;
    gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5);
    background: var(--surface-card); box-shadow: var(--shadow-lg);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  }
  .df--live .df-card h3 { font-size: var(--text-xl); }
  .df--live .df-card p { font-size: var(--text-sm); line-height: 1.5; }
}

/* De zwevende knop valt over de tekst (desktop) of de kaart (smal). Zolang
   het toneel in beeld staat, zet dienstenfilm.js .df-on en is hij weg; de
   header en de kaarten hebben hun eigen links. */
body.df-on .fab { opacity: 0; pointer-events: none; }

/* ---------- reduced motion: vier stilstaande schermen bij de tekst ---------- */
.df-shot { display: none; }
.df--still .df__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.df--still .df-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.df--still .df-shot {
  display: block; position: relative; height: 460px;
  background: var(--navy-900);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
}
@media (max-width: 900px) {
  .df--still .df-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .df--still .df-shot { height: 400px; }
}