/* A separate stylesheet linked from _PubliekLayout: huisstijl.css is the shared sheet of the
   whole app and sits under HouseStyleThemeConventionTests, while this drawing appears on one of
   the eight public pages. All colour comes from --sr-inkt via color-mix. */

.boek-hero {
  /* The drawing extends past .sr-wrap with a negative right and nothing above sets
     overflow-x: hidden, so without this clip the whole public page gets a horizontal scrollbar.
     isolation: isolate keeps the drawing's z-index: -1 inside this block, under the text but not
     under the page. */
  position: relative;
  isolation: isolate;
  overflow: clip;
}

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

  --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; }
}

/* `black` is a mask value (opacity) here, not a house-style colour. */
.sketch-fade-left { mask-image: linear-gradient(to right, transparent 0 12%, black 38%); }

.sketch--hero {
  width: clamp(360px, 36vw, 460px);
  right: clamp(-40px, -2.2vw, -12px);
  top: 50%;
  transform: translateY(-50%);
}

/* An <svg> without width/height attributes otherwise falls back to 300x150. */
.sketch--hero > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* IBM Plex Mono is self-hosted in this RCL, so this pulls in no external source. */
.sketch--hero text {
  font-family: var(--sr-mono);
}

/* Enough height to show more than a strip of the drawing: the intro text alone is about 200px. */
@media (min-width: 900px) {
  .boek-hero { min-height: 330px; }
}

/* The base DOM is the FINISHED drawing. Every stroke-dashoffset and opacity: 0 sits in this
   block only, so prefers-reduced-motion: reduce gets the finished drawing and nothing that moves.
   The timing is shorter than on the site (1.80s against 2.95s): every slot button is a real form
   post, so the drawing restarts on each choice. */
@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; }

  .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; }
}

/* Both keyframes are written out in full on purpose. With an implicit end step the browser
   takes the value that applies without animation: the opacity: 0 from the same rule, so the
   annotation layer would animate from 0 to 0 and stay invisible. */
@keyframes sketch-tekenen {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

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