/* Decorative lines drawn in as you scroll (js/scroll-line.js): a loose
   network of straight runs and smooth bends that split off and run into
   one another, from the bottom of the hero to the bottom of the page.

   The layer sits on top of the page content (below only the sticky
   header, z-index 50), so the lines run across cards instead of vanishing
   behind them. Its size follows <body> (inset: 0), so it can never make
   the page any taller. */
.scroll-line-bg {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  /* a line only ever darkens the (light) page, and it's lighter than any
     text on it — so wherever it crosses text the letters win outright and
     the line passes behind them, at full strength, never faded or cut. In
     dark mode it's the mirror image: it only lightens, and is darker than
     the text. */
  mix-blend-mode: darken;
}
:root[data-theme="dark"] .scroll-line-bg { mix-blend-mode: lighten; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scroll-line-bg { mix-blend-mode: lighten; }
}
.scroll-line-bg > svg[data-scroll-line-svg] { display: none; }
/* the drawing is a stack of thin strips, each showing its own band of the page
   (see build() in js/scroll-line.js) */
.scroll-line-bg .sl-slice {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
}

/* one solid, fully opaque colour for every line, in both themes: where
   lines share a stretch (as one splits off or runs into another) they
   paint over each other with no visible seam */
.scroll-line {
  fill: none;
  stroke: var(--sage-500);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* measured with every reveal animation in its finished position, so the
   routes line up with where things end up, not with
   where they sit before they've animated in. Only transform is touched
   (opacity fades carry on untouched), and sl-settle lets it snap straight
   back afterwards instead of visibly animating back. The hero is left out
   entirely: it's revealing right as the page loads, exactly when this
   runs, and nothing in it needs measuring. */
:is(html.sl-measure, html.sl-settle) :is(#diensten, #portfolio, #reviews, #contact, .site-footer)
  :is([data-reveal], [data-reveal-scale], .tr-blur, .tr-cut-char, .tr-slide-unit) {
  transition-property: opacity, filter !important;
}
html.sl-measure :is(#diensten, #portfolio, #reviews, #contact, .site-footer)
  :is([data-reveal], [data-reveal-scale], .tr-blur, .tr-cut-char, .tr-slide-unit) {
  transform: none !important;
}
/* the portfolio cards settle into a slight fan once they've animated in,
   and the whole fan tilts a touch as it scrolls past: measure the settled
   cards at the tilt's midpoint */
:is(html.sl-measure, html.sl-settle) .portfolio-card {
  transition-property: opacity, background-color, border-color !important;
}
:is(html.sl-measure, html.sl-settle) .portfolio-fan {
  transition: none !important;
}
html.sl-measure .portfolio-card {
  transform: translateY(var(--settle-y)) rotate(var(--settle-rotate)) !important;
}
html.sl-measure .portfolio-fan {
  transform: none !important;
}

.scroll-line-bg { /* (see sl-noblend: set by the script) */ }
/* phones, and any device that struggles: the lines are kept clear of text by
   masking, so they don't need to blend with the page — a full-screen blend
   is the costliest thing on a weak graphics chip */
html.sl-noblend .scroll-line-bg { mix-blend-mode: normal !important; }

/* level 2 (see js/scroll-line.js): a device that still can't keep up gets a
   still hero — no moving background, no glass buttons */
html.sl-lvl2 .hero-shader { display: none; }
html.sl-lvl2 .hero {
  background:
    radial-gradient(60% 70% at 20% 20%, #5a693e 0%, transparent 70%),
    radial-gradient(50% 60% at 85% 75%, #c98a4a55 0%, transparent 70%),
    #12130e;
}
html.sl-lvl2 .hero *,
html.sl-lvl2 .hero *::before,
html.sl-lvl2 .hero *::after { animation: none !important; }
html.sl-lvl2 .hero .btn-hover {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* level 3: and finally the lines go */
html.sl-lvl3 .scroll-line-bg { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scroll-line-bg { display: none; }
}