/* Brand wipe loader (see part.js). Rewritten from Alture's page-start "Brand fade" (Webflow IX2 a-60).
   A full-screen cover holds the mark; the mark fades and grows in, then the cover collapses upward while a striped
   fringe hanging off its bottom edge reads as a scan line wiping the page open.

   Knobs (custom properties on .bwl, measured defaults):
     --bw-bg        #000     cover + fringe colour
     --bw-ink       #fff     the mark's colour (currentColor inside the mark)
     --bw-mark-w    7rem     mark width
     --bw-h         100vh    cover height at rest
     --bw-fringe    20vh     fringe height; the cover also rises by this much, so the fringe leaves with it
     --bw-z         1000     stacking (the source sits at 102)
   The fringe stripes are Alture's own mask, measured from its PNG (246 px tall): solid bands of 59, 49, 34, 22,
   14, 9 and 5 px separated by even 9 px gaps, so the edge thins out into finer and finer lines. */
.bwl {
  --bw-bg: #000;
  --bw-ink: #fff;
  --bw-mark-w: 7rem;
  --bw-h: 100vh;
  --bw-fringe: 20vh;
  --bw-z: 1000;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--bw-z);
  width: 100%;
  height: var(--bw-h);
  display: none;                       /* no JS: no cover */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bw-bg);
  color: var(--bw-ink);
  pointer-events: none;
}
/* part.js marks <html> from <head>, so the cover is up from the first paint, at the timeline's frame 0 */
html.bw-js .bwl:not(.bw-gone) { display: flex; }
html.bw-js .bwl:not(.bw-run) { animation: bw-failsafe 0s 4s forwards; }   /* script crashed after marking <html> */
@keyframes bw-failsafe { to { visibility: hidden; } }

.bwl__mark { width: var(--bw-mark-w); height: auto; display: block; opacity: 0; scale: .8; }
.bwl__mark svg { display: block; width: 100%; height: auto; }

.bwl__lines {
  position: absolute;
  left: 0;
  top: calc(100% - 1px);               /* 1px overlap: no hairline seam at fractional heights */
  width: 100%;
  height: calc(var(--bw-fringe) + 1px);
  background: linear-gradient(to bottom,
    var(--bw-bg) 0 23.98%, transparent 23.98% 27.64%,
    var(--bw-bg) 27.64% 47.56%, transparent 47.56% 51.22%,
    var(--bw-bg) 51.22% 65.04%, transparent 65.04% 68.7%,
    var(--bw-bg) 68.7% 77.64%, transparent 77.64% 81.3%,
    var(--bw-bg) 81.3% 86.99%, transparent 86.99% 90.65%,
    var(--bw-bg) 90.65% 94.31%, transparent 94.31% 97.97%,
    var(--bw-bg) 97.97% 100%);
}

@media (prefers-reduced-motion: reduce) { html.bw-js .bwl { display: none; } }