/* Starruk — de constructietekening achter de introtekst van de publieke boekingspagina.

   Geporteerd uit de bedrijfssite (src/styles/schetsen.css, choreografieblok 168-209), maar
   omgekeerd: op de site ligt de tekening licht op een navy hero-band, hier ligt zij als een
   rustige navy constructielijn op het papier van de publieke laag. Jacobs keuze: papier houden,
   geen navy band — de slots blijven de baas op de pagina.

   Dit stijlblad hangt aan _PubliekLayout via een tweede <link>. Waarom niet achteraan
   huisstijl.css: dat bestand is het gedeelde huisstijlblad van de hele app (ook de ingelogde
   schil laadt het) en het staat onder een architectuurtest (HouseStyleThemeConventionTests).
   Een tekening die alleen op een van de acht publieke pagina's staat, hoort daar niet in.
   Pagina-lokaal kon niet: _PubliekLayout kent geen @RenderSection, en er een sectie in snijden
   raakt alle acht pagina's voor het gemak van een.

   Alle kleur komt uit --sr-inkt via color-mix. Geen enkele letterlijke kleurwaarde. */

.boek-hero {
  /* De tekening steekt met een negatieve `right` buiten .sr-wrap (max-width 1100px), en er
     staat nergens overflow-x: hidden op html/body/.sr-wrap. Zonder deze clip krijgt de hele
     publieke pagina een horizontale scrollbar. isolation: isolate houdt de z-index: -1 van de
     tekening binnen dit blok, zodat zij onder de tekst blijft en niet onder de pagina zakt. */
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.sketch {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  contain: layout paint style;
  display: none;

  /* De drie tinten van de tekening, gemengd uit de inkt van de huisstijl: de hulpgeometrie
     bijna weg, de maatvoering iets sterker, de S-contour het gezicht van de tekening. */
  --sr-schets-lijn: color-mix(in srgb, var(--sr-inkt) 10%, transparent);
  --sr-schets-sterk: color-mix(in srgb, var(--sr-inkt) 16%, transparent);
  --sr-schets-contour: color-mix(in srgb, var(--sr-inkt) 26%, transparent);
}

/* The drawing stays behind the introduction from 900px upward. Smaller screens keep
   the available width for the appointment text and booking controls. */
@media (min-width: 900px) {
  .sketch { display: block; }
}

/* Statische randdemping onder de tekstkolom — nooit geanimeerd. `black` is hier een
   maskerwaarde (dekking), geen huisstijlkleur. */
.sketch-fade-left { mask-image: linear-gradient(to right, transparent 0 12%, black 38%); }

.sketch--hero {
  /* Rechts verankerd en hoger dan het blok: de cirkelbogen lopen boven en onder van het blad
     af, precies zoals op de site. De maatvoering blijft in de zichtbare band. */
  width: clamp(360px, 36vw, 460px);
  right: clamp(-40px, -2.2vw, -12px);
  top: 50%;
  transform: translateY(-50%);
}

/* Zonder deze regel klopt de breedte en de verticale centrering niet: een <svg> zonder
   width/height-attributen valt anders terug op 300x150 (bron: schetsen.css:124-128). */
.sketch--hero > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* De maatgetallen en het 45°-label staan in het monospace van de huisstijl; IBM Plex Mono is
   zelf-gehost in deze RCL, dus dit trekt geen externe bron aan. */
.sketch--hero text {
  font-family: var(--sr-mono);
}

/* Genoeg hoogte om meer dan een strookje van de tekening te tonen: de introtekst zelf is
   ongeveer 200px hoog, de tekening ruim het dubbele. */
@media (min-width: 900px) {
  .boek-hero { min-height: 330px; }
}

/* ---------- choreografie ----------
   Contract van de bron, 1-op-1 overgenomen: de basis-DOM is de VOLTOOIDE tekening. Elke
   stroke-dashoffset en elke opacity: 0 staat uitsluitend binnen dit blok, dus wie
   `prefers-reduced-motion: reduce` heeft staan, krijgt de afgemaakte tekening en niets dat
   beweegt. Geen animation-timeline, geen IntersectionObserver, nul JavaScript.

   Het ritme is ingedikt van 2,95 s (site) naar 1,80 s: elke slotknop is een echte form-post en
   elke weekpijl kan een herlaad zijn, dus de tekening begint bij elke keuze opnieuw. Alle
   delays en duren zijn met dezelfde factor 0,61 geschaald, zodat de volgorde en de onderlinge
   overlap van de site behouden blijven. */
@media (prefers-reduced-motion: no-preference) {
  .sketch--hero .hb-hulplijn,
  .sketch--hero .hb-cirkel,
  .sketch--hero .hb-blad-a,
  .sketch--hero .hb-blad-b {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation-name: sketch-tekenen;
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
    animation-fill-mode: both;
  }
  .sketch--hero .hb-hulplijn { animation-duration: 0.4s; animation-delay: 0.34s; }
  .sketch--hero .hb-cirkel   { animation-duration: 0.7s; animation-delay: 0.46s; }
  .sketch--hero .hb-blad-a   { animation-duration: 0.7s; animation-delay: 0.55s; }
  .sketch--hero .hb-blad-b   { animation-duration: 0.7s; animation-delay: 0.8s; }

  /* Vijf selectors, waar de bron er zeven heeft: .werkstuk-merktekens .mt-prikpunt en
     .schets-hero-rotor .rotor-cirkel (schetsen.css:188-189) horen bij het gerenderde
     3D-werkstuk van de site en bestaan op deze pagina niet. */
  .sketch--hero .hb-hartlijn,
  .sketch--hero .hb-tics,
  .sketch--hero .hb-maat,
  .sketch--hero .hb-boog45,
  .sketch--hero .hb-prikpunt {
    opacity: 0;
    animation-name: sketch-verschijnen;
    animation-duration: 0.36s;
    animation-timing-function: cubic-bezier(0, 0.4, 0, 1);
    animation-fill-mode: both;
  }
  .sketch--hero .hb-hartlijn { animation-delay: 0.28s; }
  .sketch--hero .hb-tics { animation-delay: 1.2s; }
  .sketch--hero .hb-maat { animation-delay: 1.32s; }
  .sketch--hero .hb-boog45 { animation-delay: 1.44s; }
  .sketch--hero .hb-prikpunt { animation-delay: 1.2s; }
}

/* Beide keyframes zijn met opzet volledig uitgeschreven. De bron (schetsen.css) laat de
   eindstap impliciet — `@keyframes schets-verschijnen { from { opacity: 0; } }` — en dan neemt
   de browser voor 100% de waarde die zonder animatie zou gelden. Dat is de `opacity: 0` uit
   dezelfde regel, dus de annotatielaag animeert van 0 naar 0 en blijft onzichtbaar. Chrome doet
   dat aantoonbaar; het is bij het porten gemeten, niet aangenomen. */
@keyframes sketch-tekenen {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sketch-verschijnen {
  from { opacity: 0; }
  to { opacity: 1; }
}