/*
 * Siteprovide: hero, logo's en merkonderdelen.
 *
 * Staat bewust los van style.css: een eigen bestandsnaam kan niet uit een
 * oude cache komen.
 */

/* de technische letter voor maatlijnen en labels */
:root { --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ================================================================
   HERO: werktekening
   De pagina rechts is opgebouwd uit de modules van het beeldmerk:
   rechte balken met een kwartronde uitsnede. Millimeterpapier op de
   achtergrond, maatlijnen erlangs, labels in een technische letter.
   ================================================================ */

.hero--bp { position: relative; overflow: hidden; }

/* millimeterpapier, uitgevaagd naar de randen */
.bp-paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(16, 15, 108, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 15, 108, .055) 1px, transparent 1px),
    linear-gradient(to right, rgba(1, 190, 230, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1, 190, 230, .10) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
  -webkit-mask-image: radial-gradient(120% 90% at 62% 42%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 62% 42%, #000 30%, transparent 78%);
}

.hero--bp .container { position: relative; z-index: 1; }

.hero--bp .hero__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
}

/* ---------- de tekening ---------- */

.hero__build { position: relative; }

.bp-frame {
  position: relative;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgba(16, 15, 108, .12);
  border-radius: 26px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(2px);
}

.bp-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cyan);
  opacity: .9;
}
.bp-corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.bp-corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.bp-corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.bp-corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

/* de opgebouwde pagina */
.bp-build {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 26px repeat(6, 1fr) 22px;
  gap: 10px;
  aspect-ratio: 5 / 6;
  max-height: 460px;
}

.bp-blk {
  grid-column: var(--c) / span var(--cs);
  grid-row: var(--r) / span var(--rs);
  border-radius: 8px;
  animation: bp-snap .55s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(140ms + var(--i) * 65ms);
}

.bp-blk--nav {
  background: var(--white);
  border: 1px solid #E4EAF2;
  border-radius: 999px;
  position: relative;
}
.bp-blk--nav::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 34%;
  height: 60%;
  border-radius: 999px;
  background: var(--cyan);
}

/* het grote vlak draagt de kwartronde uitsnede uit het beeldmerk */
.bp-blk--cyan {
  background: linear-gradient(150deg, #01BEE6 0%, #0098FF 100%);
  border-radius: 8px 8px 62px 8px;
}
.bp-blk--navy { background: var(--navy); border-radius: 8px 62px 8px 8px; }
.bp-blk--round { background: #CDEFF8; border-radius: 8px 8px 8px 62px; }
.bp-blk--tile { background: var(--white); border: 1px solid #E4EAF2; box-shadow: 0 6px 18px rgba(16, 15, 108, .05); }
.bp-blk--line { background: #DFE6F0; border-radius: 999px; align-self: center; height: 9px; }
.bp-blk--footer { background: var(--navy); opacity: .9; border-radius: 999px; }

@keyframes bp-snap {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.bp-photo {
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ---------- maatlijnen ---------- */

.bp-dim {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  animation: bp-fade .6s ease .95s backwards;
}
.bp-dim i { display: block; background: var(--cyan); opacity: .55; }

.bp-dim--x { left: 0; right: 0; bottom: -34px; flex-direction: column; gap: 6px; }
.bp-dim--x i { width: 100%; height: 1px; position: relative; }
.bp-dim--x i::before,
.bp-dim--x i::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--cyan);
}
.bp-dim--x i::before { left: 0; }
.bp-dim--x i::after { right: 0; }

.bp-dim--y { top: 0; bottom: 0; left: -36px; flex-direction: column; justify-content: center; }
.bp-dim--y i { width: 1px; flex: 1; position: relative; }
.bp-dim--y i::before,
.bp-dim--y i::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 1px;
  background: var(--cyan);
}
.bp-dim--y i::before { top: 0; }
.bp-dim--y i::after { bottom: 0; }
.bp-dim--y em {
  font-style: normal;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 10px;
}
.bp-dim em { font-style: normal; }

@keyframes bp-fade { from { opacity: 0; } to { opacity: 1; } }

/* de scorekaart hoort bij de tekening, niet erbovenop */
.hero--bp .score-card { left: -14px; bottom: -26px; }

/* ---------- kleinere schermen ---------- */

@media (max-width: 900px) {
  .hero--bp .hero__grid { grid-template-columns: 1fr; }
  .hero__build { margin-top: 46px; }
  .bp-dim--y { display: none; }
  .bp-build { max-height: 380px; aspect-ratio: 4 / 5; }
  .hero--bp .score-card { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-blk,
  .bp-dim { animation: none; }
}

/* ================================================================
   HET SITEPROVIDE-RECEPT

   Twee dingen moesten kloppen. Het beeldmerk stond op 84% terwijl de
   pijlen mikken op het ankerkader van 100%, dus wezen ze ernaast: hier
   vallen ze samen. En het beeldmerk mag niet groeien tot de labels
   tegen de kop en het bijschrift aan lopen, dus schaalt het mee met de
   hoogte van het venster en niet alleen met de breedte.

   De ruimte klopt zolang: halve hoogte van het merk + de hoogte van een
   label met pijl <= de halve hoogte van het speelveld.
   ================================================================ */

.recipe__canvas {
  --sp-mark: clamp(130px, min(19vw, 24vh), 260px);
  height: min(64vh, 560px);
}

.recipe__mark { transform: translate(-50%, -50%); }
.recipe__mark img { width: var(--sp-mark); }

.recipe__anchor {
  width: var(--sp-mark);
  height: calc(var(--sp-mark) * 1.154);
}

/* iets kortere pijlen geven het beeldmerk de ruimte */
.tag__arrow { width: clamp(70px, 13vw, 150px); }

.recipe__caption { margin-top: clamp(10px, 2.4vw, 26px); }

@media (max-width: 760px) {
  .recipe__canvas {
    --sp-mark: clamp(105px, min(26vw, 19vh), 175px);
    height: min(58vh, 430px);
  }
  .tag__arrow { width: clamp(58px, 15vw, 100px); }
}

/* ================================================================
   REVIEWS
   Drie reviews zijn nooit even lang. In plaats van dat te verbergen
   worden de kaarten even hoog en staat de naam van de klant onderaan
   op één lijn, gescheiden door een dunne regel. Het cijfer stond als
   een zwaar vak naast de kop te concurreren; het is nu een rustige
   regel eronder.
   ================================================================ */

.reviews__head {
  display: block;
  max-width: 620px;
  margin-bottom: clamp(34px, 4vw, 50px);
}
.reviews__head h2 { margin: 0 0 18px; }

.reviews__score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.reviews__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.reviews__score .stars { display: flex; gap: 2px; }
.reviews__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #AEB3D6;
  margin: 0;
}

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
}
.review p { margin: 16px 0 24px; }

/* de naam zakt naar de onderkant, zodat alle drie op één lijn staan */
.review__author {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #EDF1F6;
}

/* ================================================================
   WAAROM SITEPROVIDE
   Vijf korte punten passen niet in vijf smalle kolommen en worden
   gestapeld een lange sliert. Ze staan nu als een specificatielijst:
   volle breedte, naam links, uitleg rechts, met een dunne regel
   ertussen. Op een telefoon zakt de uitleg onder de naam.
   ================================================================ */

.why { display: block; }

.why__intro {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
.why__intro-text { max-width: 640px; }
.why__intro .lead { margin: 0; }
.why__action { flex-shrink: 0; }

.why__list {
  display: block;
  border-top: 1px solid var(--line);
}

.why__item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.6fr;
  gap: 6px 40px;
  align-items: baseline;
  padding: 22px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: none;
}
.why__item:hover {
  background: none;
  box-shadow: none;
  transform: none;
}

.why__item-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* het streepje verwijst naar de balken van het beeldmerk */
.why__mark {
  flex-shrink: 0;
  display: block;
  width: 22px;
  height: 5px;
  border-radius: 999px;
  background: var(--cyan);
  margin: 0;
}

.why__item h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.why__item p { font-size: 15px; line-height: 1.65; margin: 0; }

@media (max-width: 700px) {
  .why__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
  .why__item p { padding-left: 36px; }
  .why__action { width: 100%; }
  .why__action .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   CASE-GALERIJ
   De rail is met de muis te verslepen. De cursor laat dat zien, en
   tijdens het slepen wordt tekstselectie uitgezet zodat je niet per
   ongeluk de titels blauw trekt.
   ================================================================ */

.case-rail.is-draggable { cursor: grab; }
.case-rail.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.case-rail.is-dragging .case-card { pointer-events: none; }
.case-rail.is-draggable img { -webkit-user-drag: none; user-drag: none; }

/* ================================================================
   PORTRET OP DE OVER-PAGINA
   Een donkere studiofoto is op een witte pagina een zwaar vlak. Hij
   krijgt daarom hetzelfde kader als de tekening in de hero: een licht
   paneel met hoekmarkeringen eromheen, zodat het blok een bedoeling
   heeft in plaats van een gat te zijn. De foto wordt bovendien niet
   breder dan 440 pixels, anders domineert hij de tekst ernaast.
   ================================================================ */

.intro__media {
  max-width: 440px;
  width: 100%;
  margin-left: auto;
}

.portrait-frame {
  position: relative;
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid rgba(16, 15, 108, .12);
  border-radius: 26px;
  background: linear-gradient(150deg, #F4FBFD 0%, #FFFFFF 60%);
}

.portrait-frame .portrait {
  border-radius: 16px;
  display: block;
}

/* het kaartje hangt aan de onderrand in plaats van er los naast */
.intro__media .badge-card {
  right: auto;
  left: clamp(12px, 1.6vw, 18px);
  bottom: -18px;
  box-shadow: 0 14px 34px rgba(16, 15, 108, .12);
}

@media (max-width: 900px) {
  .intro__media { margin-left: 0; }
}

@media (max-width: 520px) {
  .intro__media .badge-card { left: 10px; bottom: -14px; }
}

/* ================================================================
   GILMER
   Het lettertype van het logo. Gilmer is betaald en wordt daarom niet
   meegeleverd: zet de bestanden zelf in assets/fonts/ (zie het
   leesmij-bestand in die map).

   Elke regel probeert eerst .woff2, dan .woff en dan het .otf-bestand
   zoals het uit de huisstijl komt. Je kunt de OTF's er dus zo neerzetten.
   Ontbreekt een bestand, dan slaat de browser de regel over en gebruikt
   hij Sora. Er gaat niets stuk.
   ================================================================ */

@font-face {
  font-family: 'Gilmer';
  src: url('../fonts/gilmer-light.woff2') format('woff2'),
       url('../fonts/gilmer-light.woff') format('woff'),
       url('../fonts/GilmerLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('../fonts/gilmer-medium.woff2') format('woff2'),
       url('../fonts/gilmer-medium.woff') format('woff'),
       url('../fonts/GilmerMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('../fonts/gilmer-bold.woff2') format('woff2'),
       url('../fonts/gilmer-bold.woff') format('woff'),
       url('../fonts/GilmerBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilmer';
  src: url('../fonts/gilmer-heavy.woff2') format('woff2'),
       url('../fonts/gilmer-heavy.woff') format('woff'),
       url('../fonts/GilmerHeavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Gilmer voor alle koppen, met Sora als terugval. */
:root { --font-display: 'Gilmer', 'Sora', system-ui, sans-serif; }

/* ================================================================
   FOOTER, KOLOM GEGEVENS
   De links in een footerkolom zijn opgemaakt als blok met ruimte
   eromheen, wat klopt voor de menulinks. In deze kolom kwam daar een
   regeleinde bovenop, waardoor de regels ver uit elkaar stonden. De
   regeleindes zijn eruit en de afstanden zijn hier wat kleiner.
   ================================================================ */

.footer-col--details a { padding: 3px 0; }
.footer-col--details p { margin: 10px 0 0; }
.footer-col--details .legal { margin-top: 14px; line-height: 1.7; }

/* ================================================================
   COOKIEBANNER
   Onderaan het scherm, niet over de hele pagina heen. Beide knoppen
   zijn even groot en even zichtbaar; dat is geen smaakkwestie maar
   een eis: weigeren moet net zo makkelijk zijn als accepteren.
   ================================================================ */

.sp-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
}
.sp-consent[hidden] { display: none; }

.sp-consent__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(16, 15, 108, .18);
  animation: sp-consent-in .3s ease;
}

.sp-consent__text { flex: 1 1 320px; }
.sp-consent__text h2 { font-size: 16px; margin: 0 0 6px; }
.sp-consent__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}
.sp-consent__text a { color: var(--cyan-dark); text-decoration: underline; }

.sp-consent__buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.sp-consent__buttons .btn { flex: 1 1 auto; justify-content: center; }

.footer-bottom [data-sp-consent-reopen] {
  margin-left: 14px;
  text-decoration: underline;
}

@keyframes sp-consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .sp-consent { left: 10px; right: 10px; bottom: 10px; }
  .sp-consent__inner { padding: 18px; }
  .sp-consent__buttons { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-consent__inner { animation: none; }
}

/* ================================================================
   WHATSAPP OP DE CONTACTPAGINA
   Hetzelfde blok als de andere contactgegevens, maar klikbaar en met
   het groen van WhatsApp in het icoon. Alleen daar, zodat de rest van
   de pagina in de huisstijl blijft.
   ================================================================ */

.detail--whatsapp {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.detail--whatsapp:hover {
  border-color: #BFE9CE;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .16);
  transform: translateY(-2px);
}
.detail__icon--whatsapp {
  background: #E8F9EE;
  color: #1FAD54;
}
.detail--whatsapp .detail__value { color: var(--navy); }
.detail--whatsapp:hover .detail__value { color: #1FAD54; }

/* ================================================================
   CASE-PAGINA
   Een case had alleen een kop, een beeld en twee kolommen. Er is nu
   een strook met projectgegevens onder de introzin, hoekmarkeringen
   om het beeld (zoals in de hero) en onderaan een doorstap naar de
   vorige en volgende case.
   ================================================================ */

.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 32px;
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.case-fact__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 7px;
}
.case-fact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--navy);
}
.case-fact__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--cyan-dark);
  word-break: break-word;
}
.case-fact__link:hover { color: var(--navy); }

/* het beeld in hetzelfde kader als de tekening in de hero */
.case-shot {
  position: relative;
  padding: clamp(10px, 1.4vw, 16px);
  border: 1px solid rgba(16, 15, 108, .12);
  border-radius: 26px;
  background: linear-gradient(150deg, #F4FBFD 0%, #FFFFFF 60%);
}
.case-shot .case-banner { border-radius: 16px; }

/* vorige en volgende case */
.case-nav {
  padding: clamp(30px, 4vw, 48px) 0 0;
}
.case-nav__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.case-nav__item {
  display: block;
  max-width: 46%;
}
.case-nav__item--next { text-align: right; margin-left: auto; }

.case-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.case-nav__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--navy);
  transition: color .16s;
}
.case-nav__item:hover .case-nav__title { color: var(--cyan-dark); }

@media (max-width: 640px) {
  .case-nav__inner { flex-direction: column; }
  .case-nav__item { max-width: 100%; }
  .case-nav__item--next { text-align: left; margin-left: 0; }
}

/* ================================================================
   OPBOUW VAN DE CASE-PAGINA
   De pagina was wit op wit met alleen cyaan als accent. Er zit nu
   ritme in: een zachte kop, een lichte sectie voor het verhaal en het
   blok "Wat ik bouwde" als getint kaartje. Alles in de huisstijl,
   donkerblauw en cyaan, dus elke case ziet er hetzelfde uit.
   ================================================================ */

.case-page { --wash: rgba(1, 190, 230, .08); }

/* een zachte waas achter de kop in plaats van plat wit */
.case-page .case-hero {
  position: relative;
  background:
    radial-gradient(70% 130% at 8% 0%, var(--wash), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--wash), rgba(255, 255, 255, 0) 78%);
}

/* "Wat ik bouwde" als getint blok, zodat de twee kolommen niet
   allebei kale tekst op wit zijn */
.case-page .case-body { background: var(--bg-soft); }
.case-page .case-body__grid > div:last-child {
  background: var(--wash);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 34px);
}
.case-page .case-body__grid > div:last-child .ticks li:last-child { margin-bottom: 0; }

/* het kader om het beeld krijgt dezelfde tint */
.case-page .case-shot {
  background: linear-gradient(150deg, var(--wash), rgba(255, 255, 255, .9) 65%);
}

@media (max-width: 820px) {
  .case-page .case-body__grid > div:last-child { padding: 24px; }
}

/* de kolommen van de strook wat ruimer nu er één gegeven minder is */
.case-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ================================================================
   OPENINGSANIMATIE
   Het beeldmerk bouwt zichzelf op uit zijn eigen blokken, precies wat
   Siteprovide doet. Elk blok komt uit de richting waar het hoort te
   liggen, klikt op zijn plek, en daarna schuift de laag omhoog weg.

   De laag verdwijnt met een animatie en niet met JavaScript, dus ook
   als een script hapert komt de site altijd tevoorschijn.
   ================================================================ */

.sp-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4FBFD 55%, #EEF4FF 100%);
  animation: sp-loader-out .62s cubic-bezier(.65, 0, .35, 1) 1.15s forwards;
}

/* zachte gloed achter het merk, komt op en dooft weer */
.sp-loader::before {
  content: "";
  position: absolute;
  width: min(46vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 190, 230, .22), rgba(1, 190, 230, 0) 68%);
  opacity: 0;
  animation: sp-glow 1.5s ease forwards;
}

.sp-loader__stage {
  position: relative;
  animation: sp-settle .5s cubic-bezier(.34, 1.4, .5, 1) .52s both;
}

.sp-loader__mark {
  display: block;
  width: clamp(78px, 9vw, 124px);
  height: auto;
}

/* elk blok schuift vanuit zijn eigen richting op zijn plek */
.sp-piece {
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(.86);
  transform-origin: 156px 180px;
  transform-box: fill-box;
  animation: sp-piece .46s cubic-bezier(.2, .85, .28, 1) forwards;
  animation-delay: calc(var(--i) * 62ms);
}

@keyframes sp-piece {
  to { opacity: 1; transform: none; }
}

/* korte samentrekking als het merk compleet is */
@keyframes sp-settle {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

@keyframes sp-glow {
  0%   { opacity: 0; transform: scale(.7); }
  55%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* de laag schuift omhoog weg en laat de site zien */
@keyframes sp-loader-out {
  to {
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
  }
}

/* al gezien deze sessie: meteen weg */
.sp-seen .sp-loader { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sp-loader { display: none; }
}