/* Complex to clear, then the reel: one scene played by scroll (js/film-clear.js; FILM.md §2 acts 3-4, §2a;
   work/_claude-qa/film-20261021/ROUTE.md rows 4-5, §2.1, §6). A sticky stage over the held world: «Complex products.» hangs from the margin
   under the header's tab while Orbita's overview, as the reel's first frame prints it, rises under it on the middle
   columns as a dense print of glyphs; a clear lens, played by the scroll, clears it; the clear screen holds with «Clear
   journeys.» under it and the credit beside that; then it grows into the letterbox window (the 12 px frame thickens
   into bands of the frame's own ink) and the reel starts on that very frame. The section stands alone: it reads nothing
   from its neighbours, so it can move along the route. The run's length is set here, before any script, so every
   ScrollTrigger below it measures the final page: 1 screen of stage + the card + the lens + the hold + the growth + the
   reel, in screens (ROUTE.md: .5 + 1.4 for the card and the lens with its hold, 1.2 for the growth and the reel, at
   1440 and at 390). */
.film-clear{--film-card:.5;--film-lens:1.1;--film-hold:.3;--film-grow:.45;--film-reel:.75;--fc-ink:#000000;--fc-grey:#585b61;--fc-ground:#ffffff;position:relative;margin:0;padding:0;color:var(--fc-ink)}
html[data-theme=dark] .film-clear{--fc-ink:#ffffff;--fc-grey:#96999f;--fc-ground:#000000}
/* (22 Oct, review R07: between the last station and the lens a frame held no type, only the last mark sinking into the
   bare deck) on the home the lens takes 40svh from the stations' tail: «Complex products.» rises just as the ring that
   stands again at the stage's end breaks up (at 50svh it arrived over the five marks) and the camera turns to the dusk
   under it (ROUTE.md row 3: «the last mark sinks; dusk under the next card»). The stations' panel and name are away by
   then (is-away) and their panel stays above this stage (z-index 1); the home is 40svh shorter (R08). Reduced motion
   keeps the old seam: its screen stands at once and would rise into the last panel */
@media (prefers-reduced-motion:no-preference){html.space-on body[data-page=home] .film-clear{margin-top:-40svh}}
.film-clear .film-mark{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}
/* the run's length depends on no script of its own: space-gate.js (a classic script in the head) has already chosen
   the world or the airy page before the first layout, so the page's ScrollTriggers measure the final height */
html:is(.space-on,.airy) .film-clear .film-run{position:relative;height:calc(100svh * (1 + var(--film-card) + var(--film-lens) + var(--film-hold) + var(--film-grow) + var(--film-reel)))}
html:is(.space-on,.airy) .film-clear .film-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
/* the -45svh overlap the years chapter takes from whatever stands before it (css/space-ui.css) lands on this quiet
   tail, never on the reel */
html:is(.space-on,.airy) .film-clear:has(+ #years) .film-tail{height:45svh}

/* the title card: the L role (css/type-2026.css: Archivo Lens, wght 400, wdth 98), sentence case, the hero's middle
   phrase split by the screen: «Complex products.» above it from the card on, «Clear journeys.» under it once the lens
   has cleared it (the script sets its drop, --t2), when the first steps back to the grey. Each phrase rises out of its
   own line; hidden, it is also invisible, so the world's print (js/3d/space-lanes.js, [data-lane]) clears only round
   the words on show */
.film-clear .film-title{position:absolute;z-index:1;left:var(--tx,4vw);top:var(--ty,12svh);width:var(--tw,92vw);margin:0;
 font:400 var(--t-l,96px)/.95 var(--t-display,'Archivo Lens',sans-serif);font-variation-settings:"wght" 400,"wdth" 98;letter-spacing:var(--t-track-l,-.012em);font-synthesis:none;font-kerning:normal;text-wrap:balance;color:var(--fc-ink)}
.film-clear .film-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
html:is(.space-on,.airy) .film-clear.is-live .film-line-2{position:absolute;left:0;top:var(--t2,64svh)}
.film-clear .film-line>span{display:block;transition:transform .9s cubic-bezier(.16,1,.3,1),color .6s cubic-bezier(.16,1,.3,1),visibility 0s}
.film-clear.is-live .film-line>span{transform:translateY(108%);visibility:hidden;transition:transform .9s cubic-bezier(.16,1,.3,1),color .6s cubic-bezier(.16,1,.3,1),visibility 0s linear .9s}
.film-clear.is-live.is-titled .film-line:first-child>span,.film-clear.is-live.is-clear .film-line-2>span{transform:none;visibility:visible;transition:transform .9s cubic-bezier(.16,1,.3,1),color .6s cubic-bezier(.16,1,.3,1),visibility 0s}
.film-clear.is-live.is-clear .film-line:first-child>span{color:var(--fc-grey)}

/* the screen: placed by the script (inline px); these are the grid's defaults before it runs (columns 3-10) */
.film-clear .film-screen{margin:0}
.film-clear .film-window{position:absolute;z-index:3;left:19.6667%;top:24svh;width:60.6667%;height:auto;aspect-ratio:16/9;overflow:hidden;border-radius:16px;
 background:var(--fc-ground);transform-origin:0 0;contain:layout paint}
.film-clear .film-shot{display:block;width:100%;height:100%}
.film-clear .film-shot img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
/* the reel lies over the picture, which is its own first frame: until the film's first frame is up the poster shows
   through, so the cut is a match */
.film-clear .film-reel{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;background:transparent;opacity:0;visibility:hidden}
.film-clear .film-window.is-reel .film-reel{opacity:1;visibility:visible}

/* the credit, beside «Clear journeys.» on the first column line clear of it, its last baseline on the phrase's (under
   it where the row has no room; the script sets --cx, --cy, --cw): the case's name at the lead size in ink, the year,
   client and part in the small grey, «Open the case» as the stations write it. It shows with the clear screen */
.film-clear figcaption{position:absolute;z-index:3;left:var(--cx,4vw);top:var(--cy,86svh);width:max-content;max-width:var(--cw,calc(100% - 8vw));display:grid;justify-items:start;margin:0;
 font:400 var(--t-small,14px)/1.4 var(--t-text,Basel,Arial,sans-serif);color:var(--fc-grey)}
.film-clear.is-live figcaption{opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s}
.film-clear.is-live.is-clear figcaption{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s}
.film-clear figcaption a{color:var(--fc-ink);text-decoration:none}
.film-clear figcaption .film-case{margin-bottom:4px;font:400 var(--t-lead,24px)/1.2 var(--t-text,Basel,Arial,sans-serif)}
.film-clear figcaption .film-open{margin-top:6px;text-decoration:underline;text-underline-offset:3px}
.film-clear figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
.film-clear figcaption a:focus-visible{outline:2px solid var(--fc-ink);outline-offset:3px;border-radius:2px}

/* the bands: the frame's ink, under the window (they reach half a corner under its edges, so its rounded corners sit
   on ink, like the frame's own opening); each scales out from its edge as the screen grows */
.film-clear .film-band{position:absolute;z-index:2;background:var(--frame-ink,#000000);visibility:hidden;pointer-events:none}
.film-clear.is-band .film-band{visibility:visible}
.film-clear .film-band-top{left:0;right:0;top:0;height:var(--bt,0px);transform-origin:50% 0;transform:scaleY(var(--be,0))}
.film-clear .film-band-bottom{left:0;right:0;bottom:0;height:var(--bb,0px);transform-origin:50% 100%;transform:scaleY(var(--be,0))}
.film-clear .film-band-left{left:0;top:0;bottom:0;width:var(--bl,0px);transform-origin:0 50%;transform:scaleX(var(--be,0))}
.film-clear .film-band-right{right:0;top:0;bottom:0;width:var(--br,0px);transform-origin:100% 50%;transform:scaleX(var(--be,0))}

/* the reel's controls stand in the bottom band, on the window's left edge: the frame's own pills (the filled one is
   the header's «Let's talk», the outlined one the site's text pill) */
.film-clear .film-controls{position:absolute;z-index:4;left:var(--kx,24px);top:var(--ky,auto);bottom:auto;display:flex;gap:8px;opacity:0;visibility:hidden;
 transition:opacity .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
.film-clear.is-reel .film-controls{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.16,1,.3,1),visibility 0s}
.film-clear.is-reel.is-leaving .film-controls{opacity:0;visibility:hidden;transition:opacity .2s cubic-bezier(.16,1,.3,1),visibility 0s .2s}
.film-clear .film-controls button{height:var(--frame-ctl,40px);margin:0;padding:0 16px;border-radius:999px;font:400 14px/1 var(--t-text,Basel,Arial,sans-serif);letter-spacing:0;text-transform:none;cursor:pointer;
 border:1px solid var(--frame-on,#ffffff);background:transparent;color:var(--frame-on,#ffffff);box-shadow:none;transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1)}
.film-clear .film-controls .film-sound{background:var(--frame-on,#ffffff);color:var(--frame-ink,#000000)}
.film-clear .film-controls button:hover{background:var(--frame-on,#ffffff);color:var(--frame-ink,#000000)}
.film-clear .film-controls button:focus-visible{outline:2px solid var(--frame-on,#ffffff);outline-offset:2px}
/* (Olya ~11:25Z: «убирай на всех движениях паузу это лишнее») «Pause» / «Play» for the keyboard only: out of sight until Tab
   reaches it; a click or a tap on the reel stops it or plays it on (js/film-clear.js) */
.film-clear .film-controls .film-pause:not(:focus-visible){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0}
.film-clear .film-window.is-reel .film-reel{cursor:pointer}
/* once the bands have gone back into the frame (the reel's last stretch and its exit) the controls stand on the page:
   they take its colours, each pill on a ground of its own, so the pause stays in sight while the film plays */
.film-clear.is-open .film-controls button{border-color:var(--fc-ink);background:var(--fc-ground);color:var(--fc-ink)}
.film-clear.is-open .film-controls :is(.film-sound,button:hover){background:var(--fc-ink);color:var(--fc-ground)}
.film-clear.is-open .film-controls button:focus-visible{outline-color:var(--fc-ink)}

/* the music, named while the film plays with sound, in small text with the controls (the licence asks for nothing; the
   reel's README gives the words); phones have no room for it beside the two pills */
.film-clear .film-music{align-self:center;margin:0 0 0 8px;font:400 13px/1.3 var(--t-text,Basel,Arial,sans-serif);color:var(--frame-on,#ffffff);white-space:nowrap}
.film-clear .film-music[hidden]{display:none}
/* small copy never stands on the world: the line waits for the letterbox */
.film-clear.is-open .film-music{visibility:hidden}
@media (max-width:700px){.film-clear .film-music{display:none}}

/* without scripts: a plain block, the title over the clear screen and its credit; the reel needs the module (it has no
   source) */
html:not(.space-on):not(.airy) .film-clear .film-stage{position:relative;padding:clamp(80px,12vw,160px) 4vw;display:grid;gap:32px}
html:not(.space-on):not(.airy) .film-clear :is(.film-title,.film-window,figcaption){position:relative;left:auto;top:auto;width:auto;max-width:none}
.film-clear:not(.is-live) :is(.film-reel,.film-band,.film-controls,.film-music){display:none}

@media (max-width:700px){
 .film-clear .film-window{left:16px;width:calc(100% - 32px);aspect-ratio:9/16;border-radius:14px}
 .film-clear .film-controls button{position:relative;height:36px;padding:0 14px}
 /* the 36 px pills take a 46 px tap area, 4 px into the 8 px gap so the two never overlap (QA S13's rule; devices, 22 Oct) */
 .film-clear .film-controls button::after{content:"";position:absolute;inset:-5px -4px}
}
@media (prefers-reduced-motion:reduce){.film-clear .film-line>span,.film-clear :is(figcaption,.film-controls){transition:none!important}}
@media print{.film-clear .film-run{height:auto!important}.film-clear .film-stage{position:static!important;height:auto!important}.film-clear :is(.film-band,.film-controls,.film-reel,.film-music){display:none!important}}

/* -73 (24 Oct; the m1 motion report h09: «the letterbox border flashes white in the dark theme»; the coordinator: it stays
   white by night, the owner's frame, and comes on as a designed beat): the bands print in through the world's Bayer
   order, 4 px cells, in 200 ms (8 steps), as the frame thickens into them; js/film-clear.js sets .band-print for that */
@keyframes film-band-print{0.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM16 0h4v4h-4zM8 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM16 16h4v4h-4zM8 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM16 0h4v4h-4zM8 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM16 16h4v4h-4zM8 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E")}12.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E")}25.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM20 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM12 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM20 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM12 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM20 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM12 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM20 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM12 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E")}37.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E")}50.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E")}62.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E")}75.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM16 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM8 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM24 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM0 20h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM8 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM16 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM8 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM24 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM0 20h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM8 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E")}100%{-webkit-mask-image:none;mask-image:none}}
.film-clear.band-print .film-band{-webkit-mask-repeat:repeat;mask-repeat:repeat;animation:film-band-print .2s steps(1,end) both}
@media (prefers-reduced-motion:reduce){.film-clear.band-print .film-band{animation:none}}