/* Opening scene: a Jacquard loom run like a program, weaving the bc monogram. The markup is the
   finished frame; hero-loom.js plays it. Without it, or with motion paused, the finished piece stands still. */
/* The panel is the wall the loom stands against: the scene draws it as woven damask; this is its ground colour. */
.hero-media { background: #363a2f; container-type: size; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; }
/* The shading laid over the opening panel must not take the pointer. */
.hero-media::after { pointer-events: none; }
/* The loom covers 70.9% of its stage's width, starting 18.7% in, and 92% of its height from 3.6% down.
   On a wide screen it sits a little below centre, so the card hopper clears the navigation. */
.hero-stage { position: absolute; max-width: none; top: 50%; right: 4%; width: min(58cqw, calc(100cqh - 90px), calc((96cqw - 560px) / .813)); height: auto; aspect-ratio: 1; transform: translateY(calc(-50% + 8px)); }
.lm-layer, .lm-win, .lm-move, .lm-glint, .lm-clothwin, .lm-depth { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lm-layer { display: block; max-width: none; overflow: visible; }
/* The card chain slides down the reader's column, from the hopper into the stacker. */
.lm-win { clip-path: inset(6.89% 10% 72.2% 75.3%); }
/* What is woven so far: the cloth from its top down to the beam. The script moves the top edge row by row. */
.lm-clothwin { clip-path: inset(55.556% 0 12.222% 0); }
@media (min-width: 1024px) {
  /* The title keeps its darkened side; the loom stays out of the shade. */
  .hero-media::after { background: linear-gradient(90deg, #20271cc2, #20271c63 30%, #20271c00 50%); }
}
@media (max-width: 1023px) {
  /* Centred in the room the header leaves: --top clears the logo and menu button, --span is the
     width the loom may take, --shift moves it off the panel's middle. */
  .hero-stage {
    --top: 79px; --gap: 12px; --span: calc(100cqw - 16px); --shift: 0px; --from: .036; --tall: .92;
    --room: calc(100cqh - var(--top) - var(--gap));
    --w: min(var(--span) / .709, var(--room) / var(--tall));
    top: calc(var(--top) + (var(--room) - var(--w) * var(--tall)) / 2 - var(--w) * var(--from));
    right: auto; left: calc(50% + var(--shift) - var(--w) * .541); width: var(--w); transform: none;
  }
}
@container (max-height: 260px) {
  /* A short panel, as on a small phone with its browser bars showing: frame the weaving itself, from
     the heddles down, and let the cords above fade into the dark under the header. */
  .hero-stage {
    --from: .37; --tall: .586;
    -webkit-mask-image: linear-gradient(transparent calc(var(--w) * var(--from) - 34px), #000 calc(var(--w) * var(--from) + 6px));
    mask-image: linear-gradient(transparent calc(var(--w) * var(--from) - 34px), #000 calc(var(--w) * var(--from) + 6px));
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* The tablet panel is wide enough for the loom to stand between the logo and the menu button. */
  .hero-stage { --top: 16px; --gap: 16px; --span: calc(100cqw - 307px); }
}
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  /* On a phone turned sideways the menu button sits over the text; only the logo shares this panel. */
  .hero-stage { --top: 38px; --gap: 8px; --span: calc(100cqw - 16px); --shift: 0px; }
}
/* Layers that move get their own compositor layer; the ones redrawn per pick get one too, so a redraw
   stays inside them. The moving ones are <div>s: the compositor takes translate, rotate and scale from
   HTML boxes, not from <svg> ones. */
.lm-move, .lm-pick { will-change: transform; }
.lm-shed, .lm-row, .lm-pickthread { will-change: transform, opacity; }
.lm-scan, .lm-caret { will-change: opacity; }
/* The signal runs down the cords: a window the height of the harness, from the bus to the comber board,
   slides down while the drawing inside it slides up by as much, so the lit cords appear from the top. */
.lm-sigwin { position: absolute; left: 0; width: 100%; top: 29.111%; height: 14.889%; overflow: hidden; pointer-events: none; will-change: transform, opacity; }
.lm-sigwin > .lm-move { top: -195.522%; height: 671.642%; bottom: auto; }
/* The glint's band slides under a fixed clip cut to the monogram. */
.lm-glint { clip-path: url(#lm-mono-box); }
/* Seen only while the loop drives them: the reader's scan line, the lifted shed, the weft in flight, the current line. */
.lm-scan, .lm-shed, .lm-pickthread, .lm-row { opacity: 0; }
/* Turning points: the shuttle about its own middle, the ratchet about its axle, the pawl about its pin,
   the prism about its own. The pick thread is placed by a full transform from the drawing's corner. */
.lm-shuttle { transform-origin: 37.11% 86.78%; }
.lm-ratchet { transform-origin: 80.33% 90%; }
.lm-pawl { transform-origin: 78.556% 86.222%; }
.lm-prism { transform-origin: 90.889% 15.444%; }
.lm-pickthread { transform-origin: 0 0; }
/* The damask catches the light under the pointer: a soft spot, masked to the satin figure of the wall. */
.lm-sheen { position: absolute; left: -155.556%; top: -100%; width: 333.333%; height: 255.556%; opacity: 0; transition: opacity .6s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' preserveAspectRatio='none'%3E%3Cpath d='M8 0h1v1h-1ZM10 0h4v1h-4ZM16 0h1v1h-1ZM9 1h2v1h-2ZM13 1h3v1h-3ZM7 2h3v1h-3ZM14 2h3v1h-3ZM6 3h2v1h-2ZM10 3h1v1h-1ZM14 3h1v1h-1ZM16 3h2v1h-2ZM5 4h2v1h-2ZM11 4h1v1h-1ZM13 4h1v1h-1ZM17 4h2v1h-2ZM4 5h2v1h-2ZM11 5h1v1h-1ZM13 5h1v1h-1ZM18 5h2v1h-2ZM3 6h2v1h-2ZM12 6h1v1h-1ZM19 6h2v1h-2ZM2 7h2v1h-2ZM20 7h2v1h-2ZM1 8h2v1h-2ZM21 8h2v1h-2ZM1 9h2v1h-2ZM21 9h2v1h-2ZM0 10h2v1h-2ZM22 10h2v1h-2ZM0 11h2v1h-2ZM22 11h2v1h-2ZM0 12h2v1h-2ZM22 12h2v1h-2ZM0 13h2v1h-2ZM22 13h2v1h-2ZM1 14h2v1h-2ZM21 14h2v1h-2ZM1 15h2v1h-2ZM21 15h2v1h-2ZM2 16h2v1h-2ZM20 16h2v1h-2ZM3 17h2v1h-2ZM19 17h2v1h-2ZM0 18h1v1h-1ZM4 18h2v1h-2ZM18 18h2v1h-2ZM1 19h1v1h-1ZM5 19h2v1h-2ZM17 19h2v1h-2ZM23 19h1v1h-1ZM1 20h1v1h-1ZM6 20h2v1h-2ZM16 20h2v1h-2ZM23 20h1v1h-1ZM2 21h1v1h-1ZM7 21h3v1h-3ZM14 21h3v1h-3ZM22 21h1v1h-1ZM3 22h1v1h-1ZM9 22h2v1h-2ZM13 22h2v1h-2ZM21 22h1v1h-1ZM3 23h1v1h-1ZM10 23h4v1h-4ZM21 23h1v1h-1ZM4 24h1v1h-1ZM10 24h4v1h-4ZM20 24h1v1h-1ZM3 25h1v1h-1ZM9 25h2v1h-2ZM13 25h2v1h-2ZM21 25h1v1h-1ZM3 26h1v1h-1ZM7 26h3v1h-3ZM14 26h3v1h-3ZM21 26h1v1h-1ZM2 27h1v1h-1ZM6 27h2v1h-2ZM16 27h2v1h-2ZM22 27h1v1h-1ZM1 28h1v1h-1ZM5 28h2v1h-2ZM17 28h2v1h-2ZM23 28h1v1h-1ZM1 29h1v1h-1ZM4 29h2v1h-2ZM18 29h2v1h-2ZM23 29h1v1h-1ZM0 30h1v1h-1ZM3 30h2v1h-2ZM19 30h2v1h-2ZM2 31h2v1h-2ZM20 31h2v1h-2ZM1 32h2v1h-2ZM21 32h2v1h-2ZM1 33h2v1h-2ZM21 33h2v1h-2ZM0 34h2v1h-2ZM22 34h2v1h-2ZM0 35h2v1h-2ZM22 35h2v1h-2ZM0 36h2v1h-2ZM22 36h2v1h-2ZM0 37h2v1h-2ZM22 37h2v1h-2ZM1 38h2v1h-2ZM21 38h2v1h-2ZM1 39h2v1h-2ZM21 39h2v1h-2ZM2 40h2v1h-2ZM20 40h2v1h-2ZM3 41h2v1h-2ZM19 41h2v1h-2ZM4 42h2v1h-2ZM12 42h1v1h-1ZM18 42h2v1h-2ZM5 43h2v1h-2ZM11 43h1v1h-1ZM13 43h1v1h-1ZM17 43h2v1h-2ZM6 44h2v1h-2ZM11 44h1v1h-1ZM13 44h1v1h-1ZM16 44h2v1h-2ZM7 45h4v1h-4ZM14 45h3v1h-3ZM9 46h2v1h-2ZM13 46h3v1h-3ZM9 47h5v1h-5ZM15 47h1v1h-1Z'/%3E%3C/svg%3E") 60.294% 88.328% / 9.333% 16.812% repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' preserveAspectRatio='none'%3E%3Cpath d='M8 0h1v1h-1ZM10 0h4v1h-4ZM16 0h1v1h-1ZM9 1h2v1h-2ZM13 1h3v1h-3ZM7 2h3v1h-3ZM14 2h3v1h-3ZM6 3h2v1h-2ZM10 3h1v1h-1ZM14 3h1v1h-1ZM16 3h2v1h-2ZM5 4h2v1h-2ZM11 4h1v1h-1ZM13 4h1v1h-1ZM17 4h2v1h-2ZM4 5h2v1h-2ZM11 5h1v1h-1ZM13 5h1v1h-1ZM18 5h2v1h-2ZM3 6h2v1h-2ZM12 6h1v1h-1ZM19 6h2v1h-2ZM2 7h2v1h-2ZM20 7h2v1h-2ZM1 8h2v1h-2ZM21 8h2v1h-2ZM1 9h2v1h-2ZM21 9h2v1h-2ZM0 10h2v1h-2ZM22 10h2v1h-2ZM0 11h2v1h-2ZM22 11h2v1h-2ZM0 12h2v1h-2ZM22 12h2v1h-2ZM0 13h2v1h-2ZM22 13h2v1h-2ZM1 14h2v1h-2ZM21 14h2v1h-2ZM1 15h2v1h-2ZM21 15h2v1h-2ZM2 16h2v1h-2ZM20 16h2v1h-2ZM3 17h2v1h-2ZM19 17h2v1h-2ZM0 18h1v1h-1ZM4 18h2v1h-2ZM18 18h2v1h-2ZM1 19h1v1h-1ZM5 19h2v1h-2ZM17 19h2v1h-2ZM23 19h1v1h-1ZM1 20h1v1h-1ZM6 20h2v1h-2ZM16 20h2v1h-2ZM23 20h1v1h-1ZM2 21h1v1h-1ZM7 21h3v1h-3ZM14 21h3v1h-3ZM22 21h1v1h-1ZM3 22h1v1h-1ZM9 22h2v1h-2ZM13 22h2v1h-2ZM21 22h1v1h-1ZM3 23h1v1h-1ZM10 23h4v1h-4ZM21 23h1v1h-1ZM4 24h1v1h-1ZM10 24h4v1h-4ZM20 24h1v1h-1ZM3 25h1v1h-1ZM9 25h2v1h-2ZM13 25h2v1h-2ZM21 25h1v1h-1ZM3 26h1v1h-1ZM7 26h3v1h-3ZM14 26h3v1h-3ZM21 26h1v1h-1ZM2 27h1v1h-1ZM6 27h2v1h-2ZM16 27h2v1h-2ZM22 27h1v1h-1ZM1 28h1v1h-1ZM5 28h2v1h-2ZM17 28h2v1h-2ZM23 28h1v1h-1ZM1 29h1v1h-1ZM4 29h2v1h-2ZM18 29h2v1h-2ZM23 29h1v1h-1ZM0 30h1v1h-1ZM3 30h2v1h-2ZM19 30h2v1h-2ZM2 31h2v1h-2ZM20 31h2v1h-2ZM1 32h2v1h-2ZM21 32h2v1h-2ZM1 33h2v1h-2ZM21 33h2v1h-2ZM0 34h2v1h-2ZM22 34h2v1h-2ZM0 35h2v1h-2ZM22 35h2v1h-2ZM0 36h2v1h-2ZM22 36h2v1h-2ZM0 37h2v1h-2ZM22 37h2v1h-2ZM1 38h2v1h-2ZM21 38h2v1h-2ZM1 39h2v1h-2ZM21 39h2v1h-2ZM2 40h2v1h-2ZM20 40h2v1h-2ZM3 41h2v1h-2ZM19 41h2v1h-2ZM4 42h2v1h-2ZM12 42h1v1h-1ZM18 42h2v1h-2ZM5 43h2v1h-2ZM11 43h1v1h-1ZM13 43h1v1h-1ZM17 43h2v1h-2ZM6 44h2v1h-2ZM11 44h1v1h-1ZM13 44h1v1h-1ZM16 44h2v1h-2ZM7 45h4v1h-4ZM14 45h3v1h-3ZM9 46h2v1h-2ZM13 46h3v1h-3ZM9 47h5v1h-5ZM15 47h1v1h-1Z'/%3E%3C/svg%3E") 60.294% 88.328% / 9.333% 16.812% repeat;
}
.lm-sheen.is-lit { opacity: 1; }
.lm-sheen-spot { position: absolute; left: 0; top: 0; width: 7.2%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #ffe7a44d, #ffe7a41a 55%, #ffe7a400); will-change: transform; transition: translate 70ms linear; }
/* As the page scrolls on, the wall lags a little behind the loom standing in front of it. */
@supports (animation-timeline: view()) {
  [data-motion='running'] .lm-depth { animation: lm-depth linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}
@keyframes lm-depth { to { translate: 0 14%; } }
@media (prefers-reduced-motion: reduce) { .lm-depth { animation: none !important; } .lm-sheen { display: none; } }