/* arcade: pixel-art cabinet teaser, click to zoom into the screen, click the lever to pick a project */
.arcade{display:none;padding:0 0 56px}
.js .arcade{display:block}

.arc{--n:8px;--bc:var(--line);--fill:#0d0d11;--h:clamp(380px,86vw,500px);--lv:160px;--s:3;height:var(--h);max-width:760px;margin:0 auto}
.arc-in{position:absolute;inset:2px;overflow:hidden}
.arc img,.arc-lv{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}

/* teaser cabinet */
.arc-cab{position:absolute;transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .9s steps(10),opacity .01s,filter .15s}
.arc-cab img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.arc[data-state="zoom"] .arc-cab{opacity:0;pointer-events:none;transition:transform .9s steps(10),opacity .3s steps(3) .6s}
.arc-open{position:absolute;inset:0;cursor:pointer}
.arc[data-state="zoom"] .arc-open{display:none}
.arc-open:hover~.arc-cab,.arc-open:focus-visible~.arc-cab{filter:brightness(1.12)}
.arc-open:focus-visible{outline:2px solid var(--red);outline-offset:-6px}
.arc-open:hover~.arc-tag,.arc-open:focus-visible~.arc-tag{color:var(--red)}
.arc-tag{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:400 2.1rem/1 var(--pixel);color:var(--text);pointer-events:none;transition:opacity .2s,color .15s}
.arc-tag i{display:inline-block;width:9px;height:17px;margin-left:8px;background:var(--red);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.arc[data-state="zoom"] .arc-tag{opacity:0}

/* zoomed screen with the reels on top */
.arc-view{--c:5;position:absolute;opacity:0;visibility:hidden;transition:opacity .01s,visibility 0s}
.arc-view>img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.arc[data-state="zoom"] .arc-view{opacity:1;visibility:visible;transition:opacity .3s steps(3) .6s,visibility 0s .6s}
.arc-screen{position:absolute;left:calc(20px * var(--c));top:calc(17px * var(--c));width:calc(34px * var(--c));height:calc(30px * var(--c));overflow:hidden;background:rgba(3,14,14,.9)}
.arc-reel{position:absolute;top:0;width:calc(10px * var(--c));height:100%;overflow:hidden;background:rgba(9,38,42,.92)}
.arc-reel:nth-child(1){left:0}
.arc-reel:nth-child(2){left:calc(12px * var(--c))}
.arc-reel:nth-child(3){left:calc(24px * var(--c))}
.arc-strip{display:block;width:100%;height:auto}
.arc-line{position:absolute;left:0;right:0;top:calc(14px * var(--c));height:calc(2px * var(--c));background:var(--red);opacity:.22;z-index:2;pointer-events:none}
.arc.win .arc-screen{animation:arcwin .36s steps(1) 6}
.arc.win .arc-line{opacity:.6}
@keyframes arcwin{50%{filter:brightness(1.8) saturate(1.3)}}

/* zoomed controls */
.arc-ui{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
.arc-ui>*{pointer-events:auto}
.arc[data-state="zoom"] .arc-ui{opacity:1;visibility:visible;transition:opacity .3s .7s,visibility 0s .7s}
.arc-back{position:absolute;top:10px;left:12px}
.arc-lw{position:absolute;right:0;top:0;bottom:0;width:var(--lv);display:flex;align-items:center;justify-content:center;pointer-events:none}
.arc-lever{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 10px}
.arc-lv{--f:0;display:block;width:calc(38px * var(--s));height:calc(70px * var(--s));background:url(arcade/lever.png) no-repeat;background-size:calc(152px * var(--s)) calc(70px * var(--s));background-position:calc(var(--f) * -38px * var(--s)) 0}
.arc-lever span.t{text-align:center;font:400 1.5rem/1.1 var(--pixel);color:var(--muted);transition:color .15s}
.arc-lever:hover span.t,.arc-lever:focus-visible span.t{color:var(--red)}
.arc-lever[aria-disabled="true"]{cursor:default}
.arc-lever[aria-disabled="true"] span.t{color:var(--line-hi)}
.arc-status{position:absolute;left:0;right:var(--lv);bottom:10px;min-height:36px;display:flex;align-items:center;justify-content:center;text-align:center;font:400 1.5rem/1 var(--pixel);color:var(--muted)}
.arc-go{max-width:100%}

/* project notification */
.arc-note{--n:6px;--bc:var(--pc,var(--red));--fill:var(--panel);position:absolute;top:10px;left:12px;right:12px;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 12px 14px;visibility:hidden;opacity:0;transform:translateY(-140%)}
.arc-note.on{visibility:visible;opacity:1;animation:arcnote .35s steps(5) forwards}
.arc-note::after{content:"";position:absolute;left:6px;right:6px;bottom:5px;height:3px;background:var(--bc);transform-origin:left}
.arc-note.on::after{animation:arccount 3s linear forwards}
@keyframes arcnote{from{transform:translateY(-140%)}to{transform:none}}
@keyframes arccount{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.arc-ni{--bc:var(--pc);color:var(--pc);flex:none}
.arc-nt{flex:1;min-width:0}
.arc-nn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 1.7rem/1.05 var(--pixel);color:var(--pc)}
.arc-ns{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font:500 .85rem/1 var(--sans);color:var(--body)}
.arc-ty{color:var(--pc);border-color:var(--pc);padding:3px 7px;font-size:.72rem}
.arc-stay{flex:none}

@media (max-width:760px){
  .arc{--lv:88px;--s:2}
  .arc-lever span.t{font-size:1.2rem}
  .arc-tag{font-size:1.8rem}
  .arc-nn{font-size:1.35rem}
  .arc-note{gap:10px;padding:9px 10px 13px}
  .arc-ni{display:none}
}