/* Stationary camera feeds, projected into the monitor before signal acquisition. */
.work{--monitor-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;position:relative;isolation:isolate;margin:0;padding:0;min-height:0;height:auto;overflow:hidden;background:#070707;color:#eee9df}
.work.work-sequenced{height:var(--scene-cover);min-height:0}
.work:before,.work:after{content:"";position:absolute;inset:0;pointer-events:none}
.work:before{z-index:3;background:linear-gradient(#070707 0%,#070707e8 15%,transparent 29%,transparent 81%,#070707e8 96%,#070707)}
.work:after{z-index:6;box-shadow:inset 0 0 100px 20px #0005}
.work .film-grain{position:absolute;inset:0;width:100%;height:100%;z-index:7;opacity:.55;pointer-events:none;user-select:none}
.work .work-heading{position:absolute;z-index:5;top:calc(var(--scene-content) * .13);left:7%;width:max-content;margin:0;padding:0;text-align:left;font:500 clamp(38px,3.3vw,58px)/1.13 var(--monitor-font);letter-spacing:-.055em;text-transform:uppercase;transform-origin:0 0}
.work-heading .motion-line{margin:0;padding:0;overflow:visible}.work-heading .motion-line>span{transform:none!important}.work-countdown{z-index:9}
.film-aperture{position:relative;z-index:2;overflow:hidden}
.work-sequenced .film-aperture{position:absolute;inset:0 0 auto;height:var(--scene-content)}
.film-reel{position:relative}
.work-sequenced .film-reel{position:absolute;inset:0}
.film-frame{position:relative;height:100svh;min-height:640px;overflow:hidden;perspective:1400px}
.work-sequenced .film-frame{position:absolute;inset:0;height:100%;min-height:0;overflow:hidden;visibility:hidden;will-change:clip-path}
.film-brand{position:absolute;left:8%;top:29%;width:84%;height:34%;display:flex;align-items:center;text-decoration:none;transform-origin:50% 55%;will-change:transform,opacity}
.film-logo-ink{display:flex;align-items:center;width:100%;height:100%;transform-origin:center;will-change:transform}
.film-brand img{display:block;object-fit:contain;object-position:left center;width:100%;max-width:100%;height:auto;max-height:100%;filter:brightness(0) invert(.94)}
.film-brand:focus-visible{outline:1px solid #eee9df;outline-offset:20px}
.film-story{position:absolute;left:53%;top:72%;width:39%;max-width:610px;display:flex;flex-direction:column;align-items:start;gap:18px;will-change:transform,opacity}
.film-story .film-role{margin:0;font:400 clamp(26px,3.05vw,49px)/1.12 var(--serif);letter-spacing:-.025em;width:100%;text-wrap:balance}
.film-story .film-established{margin:0;padding:0;font:500 clamp(11px,.85vw,14px)/1.4 var(--monitor-font);letter-spacing:.12em;text-transform:uppercase;color:#c8c3b8;white-space:nowrap}
.film-category{position:absolute;z-index:5;right:7%;top:calc(var(--scene-content) * .13);width:170px;height:65px;text-align:right;overflow:hidden;pointer-events:none}
.film-category span{position:absolute;inset:0;font:italic 400 clamp(37px,4vw,62px)/1 var(--serif);letter-spacing:-.04em;will-change:transform,opacity}
.film-category span:not(:first-child){opacity:0}
.film-arke .film-brand{left:21%;width:66%;top:31%;height:29%}
.film-arke .film-story{left:9%;top:72%;width:52%}
.film-cerana .film-brand{left:8%;top:32%;height:30%;width:82%}
.film-trust .film-brand{left:16%;top:32%;height:29%;width:68%}
.film-trust .film-story{left:16%;top:71%;width:68%}
.film-hcv .film-brand{left:12%;top:28%;height:34%;width:76%}
.film-hcv .film-story{left:12%;top:73%;width:62%;max-width:760px}
.film-sozan .film-brand{left:21%;top:26%;width:58%;height:40%}
.film-sozan .film-brand img{object-position:center}
.film-sozan .film-story{left:43%;width:49%;top:75%;max-width:700px}
.film-itsm .film-brand{left:16%;top:27%;width:70%;height:40%}
.film-itsm .film-logo-ink{gap:8%;justify-content:center}
.film-itsm-mark{display:block;fill:currentColor;height:100%;width:auto;max-width:43%;flex-shrink:0;overflow:visible}
.film-itsm-mark path{transform-box:fill-box;transform-origin:center}
.film-show-name{font:500 clamp(38px,5.2vw,86px)/1.02 var(--sans);letter-spacing:-.065em}
.film-itsm .film-story{left:16%;top:76%;width:70%;max-width:none}
.scroll-motion .work.work-in-flow{position:sticky;top:0}
/* Without motion, the compositions become a normal reading sequence. */
.work:not(.work-sequenced) .work-heading{top:13svh}
.work:not(.work-sequenced) .film-frame,.work:not(.work-sequenced) .film-frame *{opacity:1!important;visibility:visible!important;transform:none!important;filter:none}
.work:not(.work-sequenced) .film-brand img{filter:brightness(0) invert(.94)}
.work:not(.work-sequenced) .film-aperture,.work:not(.work-sequenced) .film-reel{opacity:1!important;visibility:visible!important;transform:none!important;clip-path:none!important}
.work:not(.work-sequenced) .film-category{display:none}
.work:not(.work-sequenced) .film-frame:before{content:attr(data-category);position:absolute;right:8%;top:13%;font:italic 42px var(--serif)}
.work:not(.work-sequenced):before{display:none}
@media(max-width:1000px){
 .work .work-heading{font-size:42px}.film-category{height:50px}.film-category span{font-size:42px}
 .film-brand{left:8%;width:84%;top:30%;height:31%}
 .film-story{left:36%;top:70%;width:56%;gap:16px}.film-story .film-role{font-size:38px}
 .film-arke .film-story{left:9%;width:70%}.film-hcv .film-story{left:12%;width:76%}
 .film-sozan .film-story{left:38%;top:73%;width:54%}
 .film-itsm .film-brand{left:11%;width:78%;top:31%;height:29%}.film-show-name{font-size:5.7vw}
 .film-itsm .film-story{left:11%;top:70%;width:78%}
}
@media(max-width:600px){
 .film-frame{min-height:600px}
 .work .work-heading{top:calc(var(--scene-content) * .14);left:8%;font-size:36px}.film-category{right:8%;top:calc(var(--scene-content) * .14);width:95px;height:43px}.film-category span{font-size:35px}
 .film-brand{left:8%;top:29%;height:29%;width:84%}
 .film-brand img{height:auto;max-height:100%}
 .film-story,.film-arke .film-story,.film-hcv .film-story,.film-sozan .film-story,.film-itsm .film-story{left:8%;top:65%;width:84%;gap:17px}
 .film-story .film-role{font-size:38px;line-height:1.12}
 .film-story .film-established{font-size:12px}
 .film-arke .film-brand{left:11%;top:31%;width:78%;height:23%}
 .film-cerana .film-brand{left:7%;top:31%;width:86%;height:25%}
 .film-trust .film-brand{left:8%;top:33%;width:84%;height:24%}
 .film-trust .film-story{left:8%;top:65%;width:84%}
 .film-hcv .film-brand{left:9%;top:30%;width:82%;height:28%}
 .film-sozan .film-brand{left:13%;top:29%;width:74%;height:29%}
 .film-itsm .film-brand{left:8%;width:84%;top:29%;height:29%}.film-itsm .film-logo-ink{gap:8%}
 .film-itsm-mark{width:39%;height:auto}.film-show-name{font-size:8vw}
 .work:after{box-shadow:inset 0 0 70px 10px #0004}
}
@media(max-height:760px) and (min-width:601px){
 .work .work-heading{top:100px;font-size:36px}.film-category{top:100px}.film-category span{font-size:38px}
 .film-story,.film-arke .film-story,.film-hcv .film-story,.film-sozan .film-story,.film-itsm .film-story{top:73%}
 .film-story .film-role{font-size:34px}.film-story{gap:14px}
 .film-hcv .film-brand,.film-sozan .film-brand,.film-itsm .film-brand{top:30%;height:35%}
}
@media(max-height:760px) and (max-width:600px){
 .work .work-heading,.film-category{top:90px}.work .work-heading{font-size:32px}.film-category span{font-size:31px}
 .film-story .film-role{font-size:32px}.film-story{gap:14px}
}
@media(prefers-reduced-motion:reduce){.work *{transition:none!important}}

/* A restrained raster disturbance travels with the actual feed boundary. */
.feed-signal{display:none;position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none;opacity:0}
.work-sequenced .feed-signal{display:block}
.feed-raster{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0008 0px,#0008 1px,transparent 1px,transparent 4px);opacity:.28}
.feed-tracking{position:absolute;inset:0;will-change:transform}
.feed-tracking:after{content:"";position:absolute;left:0;right:0;top:-6.5%;height:13%;background:linear-gradient(transparent,#0009 39%,#ddd8c01f 48%,#eee9df55 49%,#000d 51%,#0006 63%,transparent)}
